[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://master--base-ui.netlify.app/react/components/dialog

(We will soon adopt Base UI for Material UI)