Details
-
Bug
-
Resolution: Unresolved
-
Low
-
None
-
8.2.0
-
Severity 2 - Major
-
0
-
Description
Issue Summary
In the search input field for searching the "Search for code, commits or repositories", the results are not accessible and announced to the screen reader users.
Steps to Reproduce
- In the Bitbucket dashboard, keeping the screen reader on, navigate to the search input field for "Search for code, commits or repositories" in the header section.
- Try searching for any "Search for code, commits or repositories" in the input field and observe the results.
Screenshot
Screen recording
Screen Recording 2022-07-21 at 11.46.41 AM.mov
Actual Results
In the search input field for the "Search for code, commits, or repositories" in the header section of Bitbucket, when the screen reader tries to search for any code, commit, or repositories, a list of results is available. But the following results are not announced and accessible to the screen reader users. When the user tries to interact with the results with the Up/Down arrow keys the options in the list are not announced to the screen reader users. This makes it the assistive technology user difficult to use the functionality.
Expected Results
When the user tries to search for the code, commit, or repositories and the list appears the results should be announced to the screen reader user, such as "5 results found".
Ensure when the screen reader tries to interact with the list using the Up/Down arrow keys the results are accessible to the users. Additionally, the focus should not move out of the list.
To make the component more accessible, try implementing the following:
- Add role="combobox" and an aria-autocomplete="list" to the <input> element of the element.
- Add a role="listbox" to the <ul> element of the list and role="option" to the options of the list.
Refer to the following implementations: https://www.w3.org/WAI/ARIA/apg/example-index/combobox/grid-combo.html and https://www.w3.org/WAI/ARIA/apg/example-index/combobox/combobox-autocomplete-list.html
Workaround
Currently, there is no known workaround for this behavior. A workaround will be added here when available.
Attachments
Issue Links
- mentioned in
-
Page Loading...