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