Skip to content

[material-ui][Autocomplete] Issues with clearOnEscape when using screen reader on Windows #43458

Open
@austin-reed-iseatz

Description

@austin-reed-iseatz

Steps to reproduce

Link to live example: https://codesandbox.io/p/sandbox/hungry-northcutt-d3nr68?file=%2Fsrc%2FDemo.tsx

Steps:

  1. The issue can be seen from even the default demo on the component's page.
  2. While using a screen reader like NVDA or JAWS, interact with the autocomplete and then try to use the escape key.
  3. Observe

Current behavior

While the escape key does clear the input field, the focus on the input seems to be lost.

Videos:

https://drive.google.com/file/d/15xjifFiumDYm7X7Eztf5f33-aB5qPozs/view?usp=sharing

https://drive.google.com/file/d/1cFjOo6-xZA-Su9qYCWAmHo4Ka_O6M8Mx/view?usp=sharing

Expected behavior

When using the escape key, the input will stay focused and the user will continue to be able to interact with the element.

Context

Ensure that users have the ability to interact with the autocomplete component when using screen readers on Windows.

Your environment

npx @mui/envinfo
  System:
    OS: Windows 10
  Binaries:
    Node: 20.12.0 - ~/.nvm/versions/node/v20.12.0/bin/node
    npm: 10.5.0 - ~/.nvm/versions/node/v20.12.0/bin/npm
    pnpm: Not Found
  Browsers:
    Chrome: 127.0.6533.122
    Edge: Not Found
    Safari: 17.4.1
  npmPackages:
    @emotion/react: 11.13.3 => 11.13.3 
    @emotion/styled: 11.13.0 => 11.13.0 
    @mui/core-downloads-tracker:  5.16.7 
    @mui/material: 5.16.7 => 5.16.7 
    @mui/private-theming:  5.16.6 
    @mui/styled-engine:  5.16.6 
    @mui/system:  5.16.6 
    @mui/types:  7.2.15 
    @mui/utils:  5.16.6 
    @mui/x-data-grid: 7.12.1 => 7.12.1 
    @mui/x-date-pickers: 7.12.1 => 7.12.1 
    @mui/x-internals:  7.12.0 
    @types/react: 18.3.3 => 18.3.3 
    react: 18.3.1 => 18.3.1 
    react-dom: 18.3.1 => 18.3.1 
    typescript: 5.5.4 => 5.5.4 

Search keywords: clearOnEscape

Metadata

Metadata

Assignees

Labels

accessibilitya11ybug 🐛Something doesn't workcomponent: autocompleteThis is the name of the generic UI component, not the React module!

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions