-
Bug
-
Resolution: Fixed
-
Low
-
5.5.0
-
Severity 3 - Minor
-
Issue Summary
The dropdowns in the help portal form are inaccessible for the screen reader users as well as have missing roles and labels.
Steps to Reproduce
- In the Help center, select any Request.
- In the Request form main content area, keep the screen reader on and navigate to dropdowns such as "Component/s ", "Approvers", etc., and try to interact with the component and inspect the source code.
Actual Results
In the help center Requests for different scenarios, there are dropdowns present such as "Component/s ", "Approvers", etc. These dropdown menus are not accessible to the screen reader users and have missing roles and labels.
Additionally, the labels are not announced to the screen reader user when the focus is on the input field.
Hence this makes it the screen reader users difficult to access the information effectively.
Expected Results
Ensure the dropdown element is accessible to the screen reader users and the labels and roles are provided correctly. The dropdown is similar to a combobox with list autocomplete.
Implement the following changes to make the combobox more accessible:
- Provide and role="comobox" and aria-expanded="false" and aria-autocomplete="list" to the <input> element.
- Structure the options inside a list structure instead of <select> element.
- Provide role="listbox" to the <ul> element and role="option" to the <li> element.
Refer to the following link for more details : https://www.w3.org/WAI/ARIA/apg/example-index/combobox/combobox-autocomplete-list.html
Screenshot
Screen recording
Screen Recording 2023-01-06 at 4.31.21 PM.mov
Workaround
Currently, there is no known workaround for this behavior. A workaround will be added here when available
