Skip to content

Select dropdown options not being read with screen reader inside Modal #8626

Description

@harry-ignite

Dependencies check up

  • I have verified that I use latest version of all @mantine/* packages

What version of @mantine/* packages do you have in package.json?

8.3.13

What package has an issue?

@mantine/core

What framework do you use?

Next.js

In which browsers you can reproduce the issue?

Chrome

Describe the bug

Repro:

  • place a Select inside Modal
  • open the modal window
  • focus Select
  • observe/listen the Voiceover's output
  • use arrows up/down to navigate through dropdown options
  • observe/listen the Voiceover's output

Observed:
Voiceover recognises and announces the listbox, but remains silent when going through options

Expected:
Voiceover recognises and announces the listbox, then announces each visited listbox option

Screen.Recording.2026-01-20.at.14.35.07.mov

If possible, include a link to a codesandbox with a minimal reproduction

https://codesandbox.io/p/sandbox/mantinemodalwithselect-forked-mwsl3n

Possible fix

When using Select component inside a Modal, the dropdown content is portaled to the document body by default. This breaks listbox accessibility because screen readers expect all content to be within the modal's DOM subtree. Currently the Voiceover doesn't announce listbox options.

Dropdown options rendered inside a Modal should be part of the modal's DOM tree to be read by assistiove technology.

Self-service

  • I would be willing to implement a fix for this issue

Activity

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

      Milestone

      No milestone

      Relationships

      None yet

      Development

      No branches or pull requests

      Issue actions