baseweb
baseweb copied to clipboard
Accessibility issues: Several form components cannot be accessed using browse mode
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.
Thank you for reporting. We will address this soon
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?
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).
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!