Issue Summary

On the “Restrictions” modal dialog, the combobox functionality present for the "No restrictions", "Editing restricted",  and "Viewing and Editing restricted" fields are inaccessible for screen reader users.

In addition, these combo boxes are implemented using native and custom approaches but none of these are fully accessible for screen reader users.

Steps to Reproduce

1. Navigate to the "More options" link & activate it.
2. Navigate to restrictions & activate it.
3. Try to access custom mentioned comboboxes. Observe it is not accessible.
4. Try to navigate to native comboboxes in read mode and observe that it is missing an accessible name.

Screen Recording

Screen Recording 2023-08-01 at 6.28.24 PM.mov

Actual Results

There is both native and custom combo box implementation done for mentioned combo boxes or select only combo boxes throughout the product.

The following problems were found with custom combo boxes →

• When users navigate to options with up/down keys present for combobox it is announcing "edit blank" for screen reader users.
• The custom combo box is missing the role of the combobox.
• role=” option” is missing for combo box options.

Due to this, screen reader users may not be able to use the functionality effectively.

The problem found with native combo boxes is that the select-only comboboxes are coded in the tabindex=”-1” property due to which it is available in read mode.

As a result combo boxes are inaccessible for screen reader users.

Expected Results

The combobox components should be correctly programmatically determined. Since there are already hidden native dropdowns in the DOM, we would recommend you to remove the “tabindex=”-1” property from the <select> elements. As well, hide the custom combobox i.e. <input> element and its options from the users. The native dropdowns have out-of-the-box accessibility.

For more information about a combobox pattern, you can refer to this WAI ARIA Practices combobox example !https://www.w3.org/favicon.ico!Select-Only Combobox Example 

Workaround

Currently, there is no known workaround for this behavior. A workaround will be added here when available.

Environment

MacBook Pro (16-inch, 2019)
macOs Ventura 13.3.1
Chrome - Version 113.0.5672.63 (Official Build) (x86_64)
Firefox- Version 92.0 (64-bit)
Safari- Version 16.4 (18615.1.26.110.1)
JAWS- Version 2022
NVDA- Version 2021.2
Voiceover - Version Latest