[autocomplete] SRs do not read existing selected items when `multiple`

Open
#40,024 4 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Assessment

Difficulty
3/5
Estimated time
1-2 days
Newbie friendliness
38/100
Issue type
Bug
Clarity
Mostly clear
Activity status
Stale
Tech stack
react, typescript
Domain
accessibility, frontend

Research direction

Start with the linked CodeSandbox reproduction at src/Demo.tsx:13,17 and test the multiple-selection Autocomplete with a screen reader. Compare the initial focus announcement with the selected items shown in the example; done means existing selections are announced instead of blank.

Written by the indexing model from the issue text.

Description

accessibility on hold scope: autocomplete
Duplicates
  • I have searched the existing issues
Latest version
  • I have tested the latest version
Steps to reproduce 🕹

Link to live example:
https://codesandbox.io/p/sandbox/hardcore-snow-fw2kyg?file=%2Fsrc%2FDemo.tsx%3A13%2C17

Steps:

  1. Navigate to above link and Enable any screen reader (e.g. NVDA)
  2. Using Tab focus the auto complete
  3. its reads editable combo box etc but it does not reads already selected items in the list. Instead its reads blank

image

Current behavior 😯
  • Screen reader reads blank instead of reading items are selected on AutoComplete
Expected behavior 🤔
  • Screen reader should read what items are selected on AutoComplete on initial focus on AutoComplete
Context 🔦

This is basically blocking visually challenging users to use Auto complete, as they cannot figure out what options are already selected on auto complete

Your environment 🌎
npx @mui/envinfo

Browser: Chrome@119

System:
OS: Windows 11 10.0.22631
Binaries:
Node: 18.16.1 - C:\Program Files\nodejs\node.EXE
Yarn: Not Found
npm: 9.5.1 - C:\Program Files\nodejs\npm.CMD
Browsers:
Chrome: Not Found
Edge: Chromium (119.0.2151.72)
npmPackages:
@emotion/react: ^11.4.1 => 11.10.6
@emotion/styled: ^11.3.0 => 11.10.6
@mui/base: 5.0.0-beta.8
@mui/icons-material: ^5.8.4 => 5.11.11
@mui/lab: 5.0.0-alpha.137
@mui/material: 5.4.1 => 5.4.1
@mui/private-theming: 5.13.7
@mui/styled-engine: 5.13.2
@mui/styles: 5.4.1 => 5.4.1
@mui/system: 5.14.1
@mui/types: 7.2.4
@mui/utils: 5.14.1
@mui/x-date-pickers: ^5.0.0-beta.3 => 5.0.20
@mui/x-date-pickers-pro: ^5.0.0-beta.3 => 5.0.20
@mui/x-license-pro: 5.17.12
@types/react: 17.0.53
react: ^17.0.1 => 17.0.2
react-dom: ^17.0.1 => 17.0.2
typescript: 4.4.3 => 4.4.3

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.