Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

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

See original GitHub issue

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:

Start NVDA
Go to https://material-ui.com/components/tables/ in chrome
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)
Open the dropdown using space or enter
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

Issue Analytics

State:
Created 2 years ago
Comments:9 (5 by maintainers)

Top GitHub Comments

2reactions

haxxmaxxcommented, Mar 2, 2022

Yupp seems to work fine! We are currently using the native one. We will do some design changes eventually, we’ll keep the unstyled one in mind 👍

1reaction

mnajdovacommented, Mar 1, 2022

I was just testing the unstyled select, and looks like it works much better. I am able to open, navigate, select items and they are properly announced. @haxxmaxx would you like to check https://mui.com/components/selects/#unstyled-component (it basically reads similar as the native select) cc @michaldudak good job on the unstyled component.