-
Bug
-
Resolution: Unresolved
-
Low
-
None
-
9.5.1
-
Severity 3 - Minor
-
Issue Summary
The role "combobox" is not defined programmatically for the "Enter a branch name" and "Enter a tag name".
Steps to Reproduce
- Open the homepage.
- Go to projects link present in header section.
- Activate "PROJ" link.
- Now activate the "awesome-go" link.
- Select a "Branches" link from side navigation.
- Activate the "Source branch" button.
- Inspect the code of the form fields and verify that role not defined.
Screenshot 1
Screenshot 2
Actual Results
There is a combobox that is not correctly programmatically defined with appropriate roles and properties. The <input > element of the "Enter a branch name" and "Enter a tag name" comboboxes does not use role="combobox".
This may particularly disadvantage the users of a screen reader. That the combobox is not correctly programmatically defined may confuse or mislead them about the functionality of the form field.
Expected Results
Make sure that the combobox should be programmatically defined by providing appropriate role and attributes, so that the screen reader users can interact with it effectively.
To achieve this, make the following changes:
- Provide role="combobox" for <input> element containing the mentioned form control in the DOM.
- Specify the “aria-expanded” attribute and set the value as “false“ when it is in the collapse state. Make sure that the value should be updated on user interaction.
- The attributes "aria-autocomplete", "aria-haspopup", and "aria-controls" further define the exact behavior of the component. They are not strictly required for conformance. However, we strongly encourage you to use these attributes.
- Additionally, make sure the options available in combo boxes are also accessible for screen reader users. Use aria-activedescendant attribute on the <input> elements to determine the active option. This attribute uses the "id" of the active option.
For more information on implementing the editable combo box, Refer to the following resources:
Workaround
Currently there is no known workaround for this behavior. A workaround will be added here when available
Environment
MacBook Pro (16-inch, 2021)
macOS Sequoia Version 15.2 (24C101)
Chrome - Version 131.0.6778.266 (Official Build) (arm64)
Firefox- Version 112.0.1 (64-bit)
Safari- Version 18.2 (20620.1.16.11.8)
JAWS- Version 2023
NVDA- Version 2020.3
| Form Name | |||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|