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

[haxxmaxx]

• 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).

(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

[oliviertassinari]

@haxxmaxx Please test on v5: https://next.material-ui.com/components/tables/, v4 is not relevant.

[haxxmaxx]

Thanks for the quick response! Same problem on v5.

[haxxmaxx]

I just noticed that it works on the https://next.material-ui.com/components/tables/#custom-pagination-actions example, because of using the native dropdown. That works for our app as well, but we'd like to use the styled one.

[oliviertassinari]

@haxxmaxx Thanks. It looks like we have quite many issues with the Select: https://github.com/mui-org/material-ui/issues?q=is%3Aopen+label%3A%22component%3A+Select%22+label%3Aaccessibility.

[haxxmaxx]

Ah I see. I noticed that space isn't working to confirm as well, mentioned in one of those bugs. We might actually consider using the native one

[oliviertassinari]

I noticed that Space isn't working to confirm as well, mentioned in one of those bugs.

@haxxmaxx Interesting, @eps1lon worked on this in #18754. One confusing aspect might be that Space allows to open the popup but not to pick an option. Would it be better if it's "all" or "nothing"?

[mnajdova]

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.

[haxxmaxx]

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 👍

[mnajdova]

Perfect, thanks for the confirmation @haxxmaxx