baseweb icon indicating copy to clipboard operation
baseweb copied to clipboard

Accessibility issues: Several form components cannot be accessed using browse mode

Open brunoprietog opened this issue 3 years ago • 4 comments

Current Behavior

Using the NVDA screen reader in browse mode, when I encounter items such as a combobox or menu, I cannot enter them using space or enter. The only way to access them is to return to a previous control and press tab.

Something similar happens with the Radio component, I can only access the options using tab.

Expected Behavior

When navigating in browse mode with NVDA, using the arrows, if I encounter any of these items, I should be able to access them using space or enter, just as I can do with a Select component for example.

In the other case, I should be able to access the Radio component options without pressing enter, space or tab, using NVDA's browse mode or any other screen reader.

Your Environment

It can be tested on the same page of the documentation. I also tested it in my environment and the same thing happens.

Tech Version
Base UI v9.111.2
React 17.0.1
browser Microsoft Edge Chromium
  • [x] I have searched the issues of this repository and believe that this is not a duplicate.

brunoprietog avatar Mar 15 '21 08:03 brunoprietog

Thank you for reporting. We will address this soon

chasestarr avatar Mar 16 '21 16:03 chasestarr

Thank you for reporting these issues. I've done some fixes on combobox already and have been trying to find solutions for menu/listbox and radio/radiogroup.

When inspecting the W3C aria guidelines for radio groups, this example also cannot enter the control with enter. Similarly for W3C listbox guidelines, I'm finding the same behavior on this example.

Do you mind pointing to some examples that operate as-expected?

chasestarr avatar Apr 01 '21 16:04 chasestarr

Thanks for the work. This combobox works fine, this radiogroup also works fine with tabindex, but unfortunately the listbox does not. I suspect it's a bug in NVDA that it can't get the focus from a listbox, since any item that has another role and tabindex=0 does work, except listbox. I will report this in the repository. However, in Microsoft's Fluent UI it works fine. Apparently they are using data-is-focusable and they handle the focus, because they use tabindex at -1. Here is the example I am referring to (Selectable list).

brunoprietog avatar Apr 03 '21 08:04 brunoprietog

Here is the issue I opened in the NVDA repository so you can follow up on it. Anyway it would be interesting if you can review the approach they took to it in Fluent UI to see if there is a possibility to fix it from here. Thank you very much!

brunoprietog avatar Apr 03 '21 09:04 brunoprietog