[Dialog] ChromeVox unable to linearly navigate into Dialog

[AlexJSully]

Steps to reproduce

Link to live example: Can be reproduced on https://mui.com/material-ui/react-dialog/ with a Chromebook/ChromeOS's screen reader ChromeVox.

Steps:

1. Open a <Dialog /> component with the Chromebook/ChromeOS ChromeVox screen reader.
2. If autofocus enabled, linearly navigate to top of dialog
3. Once screen reader reads the aria attributes of the dialog, cannot linearly navigate (Search + Right or Search + Down) into the dialog itself. Tab navigate works for actionable items but not linear navigate.

Current behavior

Video example:
Screen recording 2024-06-10 15.46.41.webm

Once a Dialog is opened while Chromebook/ChromeOS ChromeVox screen reader is opened, the user will not be able to linearly navigate (Search + Right or Search + Down) into the dialog once they get to the parent dialog accessibility/aria attributes. They get stuck reading only the dialog aria labels only and unable to go into the dialog's content.

The user will be able to use tab navigation to go between actionable items but if there is text content, like a paragraph (<Typography />), they cannot read that.

This does work on MacOS VoiceOver and seems to only happen on Chromebook/ChromeOS ChromeVox.

Expected behavior

Be able to linearly navigate and read the content within an opened <Dialog /> using Chromebook/ChromeOS Chromevox.

Context

I am trying to make my web application accessible for users that use screen readers.

Your environment

App:

• node: 18.18.2

Related packages:

• @mui/material: ^5.12.3
• react: ^18.2.0
• react-dom: ^18.2.0

Accessibility testing hardware:

• Chromebook/ChromeOS: 125.0.6422.169
• Google Chrome: 125.0.6422.169
• Screen reader: ChromeVox

Search keywords: accessibility, a11y, dialog, chromebook, chromeos, chromevox, screen reader

[siriwatknp]

Can you try it with Base UI Dialog?

[github-actions]

Since the issue is missing key information and has been inactive for 7 days, it has been automatically closed. If you wish to see the issue reopened, please provide the missing information.

[celestecarter95]

I ran into this same issue — ChromeVox's virtual cursor (Search+Arrow) could not navigate into non-interactive text content (paragraphs, headings) inside MUI Dialog. After extensive testing with the help of Claude AI, I confirmed the issue is not with the DOM structure or ARIA roles — I built a static HTML page mimicking MUI's exact DOM (including role="presentation" wrappers, tabindex="-1", and focus sentinel divs) and ChromeVox navigated all of them without issue. The culprit is MUI's FocusTrap component, which actively monitors and recaptures focus, intercepting ChromeVox's virtual cursor. Adding disableEnforceFocus to the Dialog component resolves the issue. Tab focus trapping still works on some of my dialogs — users cannot Tab out of the dialog — but ChromeVox can now navigate through all text content with Search+Arrow as expected.

[AlexJSully]

cc @siriwatknp for above ^