-
Bug
-
Resolution: Unresolved
-
Low
-
None
-
9.5.1
-
Severity 3 - Minor
-
Issue Summary
Role "menuitem" has been defined for the dropdown options unnecessarily.
Steps to Reproduce
- Open the home page.
- Go to projects and select any one from the table.
- Select any one repository.
- Go to side navigation and activate the "Create pull request" link.
- Select "Source" and "Destination" options.
- Inspect the code of the options.
- Verify that role defined unnecessarily.
Screenshot
Actual Results
The ARIA role="menuitem" is unnecessarily used on the options such as "main", "cover", and "add-bunster". The parent role "listbox" and child role "option" is already defined programmatically, that's why role "menuitem" seems unnecessary. As a result, screen reader users are communicated with inappropriate role information.
Expected Results
Make sure that while navigating through the interactive elements proper name, role, and state should be conveyed. In this scenario, multiple roles has been defined which leads to confusion for screen reader users.
Remove role="menuitem" from <div> container containing "main", "cover", and "add-bunster" options.
Code Snippet
<div class="filterable-tabs__menu-list css-11wjbfv" role="listbox" aria-multiselectable="false" id="react-select-11-listbox"> <div data-testid="option" data-test-label="main" data-test-value="refs/heads/main"> <div class="filterable-tabs__option filterable-tabs__option--is-focused filterable-tabs__option--is-selected css-1uxiw2h-option" aria-disabled="false" id="react-select-11-option-0" role="option">main</div></div>(...) </div>
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
