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

Open
#44,779 14 comments 5 reactions 1 assignee View on GitHub

Nobody has claimed this yet.

Assessment

This issue has not been assessed yet.

Description

accessibility scope: dialog
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

Dominant language
JavaScript
Stars
99.1k
Forks
32.5k
Avg merge
2d 17h
Merged PRs (30d)
106

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

More from mui/material-ui

All issues in mui/material-ui

Similar issues

More JavaScript issues

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.