Issue Summary

The "State" combobox functionality is inaccessible for screen reader users.

Additionally, this combobox is coded using native and custom approaches but none of these are fully accessible for screen reader users.

Note: A similar issue is found on the "Repositories" page.

Steps to Reproduce

1. Navigate to the mentioned page.
2. Try to access custom mentioned comboboxes. Observe it is not accessible.
3. Try to navigate to native comboboxes in read mode and observe that it is missing an accessible name.

Screenshot 1: Pull request page

Screenshot 2: Repositories page

Actual Results

The role is not provided for the “State” custom combobox. 

Following problems found with custom combobox →

1. The custom combobox is missing the role of combobox.
2. The option coded at the end of the page source code.
3. role=”option” is missing for combobox options.

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

The problem found with native comboboxes 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, comboboxes are inaccessible to 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 to remove the “tabindex=”-1” property from the <select> elements. Also, hide the custom combobox i.e <input> element and its options from the users. The native dropdowns have out-of-the-box accessibility.

Alternatively, 

Making custom combobox accessible →

1. role="combobox" and aria-autocomplete="list" to the <input> element to announce the correct role for this field.
2. aria-expanded property to the <input> element and toggle its value programmatically to true/ false depending on the expanded/ collapsed state of combobox.
3. <div> element with role=”listbox” and a unique id.
4. “aria-owns” attribute to <input> element having value of id property of <div> element.
5. role=”option” and unique id to the <div> elements present for options present for combobx.
6. aria-activedescendant property to the <input> element having value as id property of <li> element.
7. Code options just after the triggering element in the source code.

Workaround

Currently, there is no known workaround for this behaviour.

Environment 

MacBook Pro (16-inch, 2019)
macOS 13.4.1 (c) (22F770820d)
Chrome - Version 115.0.5790.170 (Official Build) (x86_64)
Firefox- Version 114.0 (64-bit)
Safari- Version 16.5.2 (18615.2.9.11.10)
JAWS- Version 2023.2306.28
NVDA- Version 2022.2.2
Voiceover - Version Latest