[Dialog] Focus not moving into dialog content when TalkBack is on

[susheelahegde]

Steps to reproduce

Steps:

1. Go to https://stackblitz.com/edit/vitejs-vite-uyj92zhd?file=src%2FApp.tsx,package.json&terminal=dev or https://mui.com/material-ui/react-dialog/
2. Turn on talkback
3. Try to access dialog content using swipe.

Current behavior

When talkback is on, the focus does not move inside the content of the dialog. This may be due to the tabIndex=-1 applied to the TransitionComponent. I overrode the TransitionComponent, but after that, the focus is no longer trapped inside the dialog; it moves out, and the focus order becomes incorrect. Please refer to the screen recording for more details.

Expected behavior

When talkback is on, the focus should move into the dialog content automatically when the dialog opens.
The focus should remain trapped within the dialog while it is open, preventing it from moving to elements outside the dialog.
The focus order inside the dialog should follow a logical and meaningful sequence, ensuring accessibility and usability for screen reader users.

Context

Access the content of the dialog when talkback is on.

Your environment

npx @mui/envinfo

System:
    OS: Android 14
  Browsers:
    Chrome: Not Found
    Edge: Chromium (127.0.2651.74)
  npmPackages:
    @emotion/react: ^11.10.5 => 11.11.1
    @emotion/styled: ^11.10.5 => 11.11.0
    @mui/base:  5.0.0-alpha.113
    @mui/core-downloads-tracker:  5.15.4
    @mui/icons-material: ^5.11.0 => 5.14.11
    @mui/material: ^5.11.4 => 5.11.4
    @mui/private-theming:  5.15.4
    @mui/styled-engine:  5.14.11
    @mui/styles: ^5.11.4 => 5.15.4
    @mui/system: ^5.11.4 => 5.14.11
    @mui/types:  7.2.13
    @mui/utils:  5.15.4
    @types/react: ^18.0.26 => 18.2.24
    react: 18.2.0 => 18.2.0
    react-dom: 18.2.0 => 18.2.0
    typescript: ^4.9.4 => 4.9.5

Search keywords: A11y

[mj12albert]

@susheelahegde Thanks for reporting this ~ are you able to repro the issue with the Base UI dialogs in this page? https://base-ui.com/react/components/dialog

(We will soon adopt Base UI for Material UI)

[DiegoAndai]

Hey @susheelahegde, thanks for the report.

Please refer to the screen recording for more details.

May I ask you to add the screen recording? You seemed to have missed attaching it.

[alyssavo]

Hi @DiegoAndai, I'm facing the same problem as @susheelahegde. I can recreate this bug with both the drawer component and the dialog component.

It seems to work fine on Firefox on Android, so it looks like this is a Chrome & Talkback problem. I tested the Base UI component, and that works fine.

Screen Recordings:
https://github.com/user-attachments/assets/0e7f5d9b-1dff-4c30-b318-60499433246d
https://github.com/user-attachments/assets/ea4b9dba-c3b9-4943-a2cd-fe0235c74e54

[DiegoAndai]

I am tentatively scheduling this for the Base UI migration. Still, I'll add the "ready to take" label if someone from the community wishes to investigate and find a solution earlier.

[GaryStimson]

@susheelahegde Can you show how you overrode the transition component. I'm currently failing our WCAG assessment because of this and trying to find a workaround. Thanks.

[DiegoAndai]

Hey @GaryStimson, is using Base UI's Dialog an option for you? This is our unstyled library. It's in alpha, but we expect it to be in beta soon and stable within this year.