Issue Summary

On "Find an issue" page, the selected state is not announced when any option is selected from "User" and "Permission" interactive elements (appears in "Permission helper" and "Notification helper" modals).

Note : This issue is found on "Basic" and "Advanced" mode.

Steps to Reproduce

1. Open above page.
2. Activate "Actions" buttons. 
3. Activate "Permission helper" or "Notification helper" button. 
4. Navigate through modal using screen reader. 
5. Select any option from "User" and "Permission" elements. 
6. Observe that the combobox is not defined correctly.

Screen Recording

Screen Recording 2024-02-12 at 4.51.22 PM.mov

Actual Results

The following issues are found with the combobox:

1. Users are not able to navigate the options using arrow keys present for "User" and "Permissions" comboboxes. The options does not have roving tabindex="" attribute.
2. The selected status is not announced for screen reader users. 
3. The aria-selected="" attribute has not been used on options of mentioned comboboxes.
4. Options dismisses itself.

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

As a result, screen reader users can not access the combobox’s functionality effectively.

Expected Results 

The combobox components should be correctly programmatically determined.

Create a proper combobox with ARIA.

• On the <input> element, use role="combobox". Make sure that the <input> element has a visible label. This can be done with an <label> element.
• Use {{aria-expanded="" attribute to programmatically define an expandable state to the combobox.
• Use aria-activedescendant attribute to determine the active option. This attribute uses the "id" of the active option.
• On the parent <ul> containing the list of options, use role="listbox". On the child <li> elements, use role="option".
• Use aria-selected attribute to programmatically determine the selected option. Make sure that this combobox is operable with a keyboard as well.

For more information about a combobox pattern, you can refer to this WAI ARIA Practices combobox example Select-Only Combobox Example

Workaround

Not available

Environment

MacBook Pro (16-inch, 2021)

macOS Sonoma Version 14.1

Chrome - Version 119.0.6045.159 (Official Build) (arm64)

Firefox- Version 93.0 (32-bit) Safari- Version 17.1 (19616.2.9.11.7)

JAWS- Version 2023

NVDA- Version 2020.3

Voiceover - Version Latest