-
Bug
-
Resolution: Fixed
-
Low
-
5.4.1
-
Severity 2 - Major
-
Issue Summary
The role is not provided for the “Martin Test Insight Object (optional)” custom combobox. In addition, a visual label is not associated with the mentioned custom combobox.
Steps to Reproduce
- Navigate to "Help center" and activate it.
- Navigate to the "Charlottes First Project" link and activate it
- Try to access the “Martin Test Insight Object (optional)” custom combobox with screen reader on.
- Observe the comboboxes are missing roles.
Actual Results
The role is not provided for the “Martin Test Insight Object (optional)” custom combobox. In addition, a label is not provided for the mentioned combobox.
Following problems found with custom combobox →
- The custom combobox is missing the roles of "combobox" and "listbox".
- role=”option” is missing for combobox options.
- The visual label “Martin Test Insight Object (optional)” is not associated with combobox.
Due to this, screen reader users may not be able to use the functionality effectively.
Although, all the necessary instructions such as "Press down to open the menu" and "Press left to focus selected values" are provided for the combobox.
Expected Results
Making custom combobox accessible →
- role="combobox" to the <input> element to announce correct role for this field.
- aria-expanded property to the <input> element and toggle its value programmatically to true/ false depending on expanded/ collapsed state of combobox.
- <div> element with role=”listbox” and unique id.
- “aria-owns” attribute to <input> element having value of id property of <div> element.
- role=”option” and unique id to the <div> elements present for options present for combobox.
- aria-activedescendant property to the <input> element having value as id property of <li> element
- A visible label such as “Martin Test Insight Object (optional)” should be associated with Combobox using “for“ and “id” attributes.
For details on implementation, please see this example →
https://www.w3.org/WAI/ARIA/apg/patterns/combobox/
Screenshots
Screen Recording 2023-02-03 at 12.33.33 PM.mov
Workaround
Currently there is no known workaround for this behavior.
[JSDSERVER-12363] Get IT Help: Roles not defined for custom combobox
| Remote Link | New: This issue links to "Page (Confluence)" [ 914954 ] |
| Remote Link | New: This issue links to "Page (Confluence)" [ 914952 ] |
| Fix Version/s | New: 5.16.0 [ 107596 ] |
| Resolution | New: Fixed [ 1 ] | |
| Status | Original: Short Term Backlog [ 12074 ] | New: Closed [ 6 ] |
| Labels | Original: 1.3.1 4.1.2 Level-A WCAG21 ax-at-JAWS ax-at-NVDA ax-at-VO ax-at-user ax-bug ax-desktop ax-dev-ready ax-high-priority ax-macos-safari ax-qa ax-qa-prioritised ax-windows-chrome ax-windows-firefox | New: 1.3.1 4.1.2 Level-A WCAG21 ax-at-JAWS ax-at-NVDA ax-at-VO ax-at-user ax-bug ax-desktop ax-high-priority ax-macos-safari ax-qa ax-qa-fixed ax-qa-verified ax-windows-chrome ax-windows-firefox |
| Attachment | New: Screenshot 2024-05-21 at 12.52.32 PM.png [ 457633 ] |
| Assignee | New: Shova Acharya [ f8cc0f3bb64f ] |
| Status | Original: Gathering Impact [ 12072 ] | New: Short Term Backlog [ 12074 ] |
| Status | Original: Needs Triage [ 10030 ] | New: Gathering Impact [ 12072 ] |
| Labels | Original: 1.3.1 4.1.2 Level-A WCAG21 ax-at-JAWS ax-at-NVDA ax-at-VO ax-at-user ax-bug ax-desktop ax-dev-ready ax-high-priority ax-macos-safari ax-qa-prioritised ax-windows-chrome ax-windows-firefox | New: 1.3.1 4.1.2 Level-A WCAG21 ax-at-JAWS ax-at-NVDA ax-at-VO ax-at-user ax-bug ax-desktop ax-dev-ready ax-high-priority ax-macos-safari ax-qa ax-qa-prioritised ax-windows-chrome ax-windows-firefox |