mui / mui/material-ui

[Select] Does not work properly with keyboard navigation when using NVDA in chrome

Open
#26,033 9 comments 0 reactions 1 assignee View on GitHub

Nobody has claimed this yet.

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

Description

  • The issue is present in the latest release.
  • I have searched the issues of this repository and believe that this is not a duplicate.

Current Behaviour 😯

When using the keyboard to navigate, the dropdown for choosing rows per page does not behave as expected. When opening the dropdown using enter/space, it opens properly and receives focus. After that, you can't use the arrow keys to move up/down. If you press enter/space again, you can move using the arrows. This is present on the material ui table documentation page. This is only a problem when NVDA is running (version 2020.4).

table navigation comp
(When pressing arrow down repeatedly, NVDA repeats rows per page list 5)

Expected Behaviour 🤔

As soon as you open the dropdown, you should be able to navigate the options using arrows while NVDA is running.

Steps to Reproduce 🕹

Steps:

  1. Start NVDA
  2. Go to https://material-ui.com/components/tables/ in chrome
  3. Tab down to an example that has the ability to set rows per page (e.g. https://material-ui.com/components/tables/#sorting-amp-selecting)
  4. Open the dropdown using space or enter
  5. Press up or down arrow -> nothing happens

Context 🔦

We are building an advanced table extension for Qlik Sense, where we would like a consistent keyboard navigation solution. The a11y setup we support is NVDA in chrome on windows, so a different screen reader is not an option unfortunately.

Your Environment 🌎

Windows 10
Chrome Version 90.0.4430.93
NVDA version 2020.4

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.

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.