-
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
| Form Name | |||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|
[JSDSERVER-12291] Help center: Missing role and labels for the dropdowns
| Remote Link | New: This issue links to "Page (Confluence)" [ 914953 ] |
| Remote Link | New: This issue links to "Page (Confluence)" [ 915137 ] |
| Labels | Original: 2.1.1 4.1.2 Accessibility Level-A WCAG21 ax-at-JAWS ax-at-NVDA ax-at-VO ax-bug ax-dev-ready ax-high-priority ax-qa ax-qa-prioritised | New: 2.1.1 4.1.2 Accessibility Level-A WCAG21 ax-at-JAWS ax-at-NVDA ax-at-VO ax-bug ax-high-priority ax-qa ax-qa-fixed ax-qa-verified |
| Fix Version/s | New: 5.16.0 [ 107596 ] |
| Resolution | New: Fixed [ 1 ] | |
| Status | Original: Short Term Backlog [ 12074 ] | New: Closed [ 6 ] |
| Attachment | New: Screenshot 2024-05-21 at 12.52.32 PM.png [ 457632 ] |
| Assignee | New: Shova Acharya [ f8cc0f3bb64f ] |
| Status | Original: Ready for Development [ 10049 ] | New: Short Term Backlog [ 12074 ] |
| Labels | Original: 2.1.1 4.1.2 Accessibility Level-A WCAG21 ax-at-JAWS ax-at-NVDA ax-at-VO ax-bug ax-dev-ready ax-high-priority ax-qa-prioritised | New: 2.1.1 4.1.2 Accessibility Level-A WCAG21 ax-at-JAWS ax-at-NVDA ax-at-VO ax-bug ax-dev-ready ax-high-priority ax-qa ax-qa-prioritised |
| Remote Link | Original: This issue links to "Page (Confluence)" [ 719448 ] |