-
Bug
-
Resolution: Fixed
-
Low
-
4.20.0, 5.3.1
-
Severity 2 - Major
-
Issue Summary
The element appears and functions like a combobox but is missing required ARIA role(s) and/or attribute(s).
Element Name: Type name, email address, or organization Combobox.
Location of the element: Share model
Issue details: Visually looks Combobox box is missing required ARIA role(s).
Steps to Reproduce
- Navigate to the "Help Center" and activate it.
- Navigate to the main content and activate any link from the "Get IT Help", "Set up VPN to the office", etc options.
- Complete all the required fields and click on the "Create" button.
- Navigate to the "Share" link and activate it.
- Try to access the “Type name, email address, or organization” custom combobx with a screen reader on
Actual Results
The role is not provided for the “Type name, email address, or organization” 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 role of combobox.
- There is no accessible name for this combobox.
- role=”option” is missing for combobox options.
- The accessible name for this combobox is not announced for screen reader users.
Due to this, screen reader users may not be able to use the functionality effectively.
Expected Results
- Making custom combobox accessible →
- role="combobox" and aria-autocomplete="list" to the <input> element to announce the correct role for this field.
- aria-expanded property to the <input> element and toggle its value programmatically to true/ false depending on the expanded/ collapsed state of combobox.
- <div> element with role=”listbox” and a 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 combobx.
- aria-activedescendant property to the <input> element having value as id property of <li> element
For details on implementation, please see this example → https://www.w3.org/favicon.ico!Editable Combobox With List Autocomplete Example
Screenshot
Workaround
Not Available
Bug Ref: 745507
Bulldog Ref:
