-
Bug
-
Resolution: Unresolved
-
Medium (View bug fix roadmap)
-
None
-
8.20.30, 9.12.2, 9.4.17
-
8.2
-
Severity 3 - Minor
-
Issue Summary
On the "Accessibility assessment | Roadmaps" page, the "Choose issue type" comboboxes are not programmatically declared.
Steps to Reproduce
- Navigate onto the above mentioned page.
- Navigate onto the "View settings" button and activate it.
- Navigate to the mentioned instances and inspect the code.
- Observe that the comboboxes are not programmatically defined.
Screenshot
Actual Results
There are comboboxes that are not correctly programmatically defined with appropriate roles and properties. The <input > elements of the "Choose issue type" comboboxes do not use role="combobox" or aria-activedescendant. As well, the child listbox does not use role="listbox", role="option" and aria-selected attributes.
This may particularly disadvantage the users of a screen reader. That the combobox is not correctly programmatically defined may confuse or mislead them about the functionality of the form fields.
Expected Results
Make sure that the combobox components are programmatically determined. In this scenario, we would recommend you to create a combobox with appropriate ARIA roles and properties. On the combobox, use role="combobox". Where possible, expand a native <input>. Make sure that the <input> is labelled. This can be done with <label> or aria-labelledby. Use aria-expanded to differentiate when the listbox is expanded and collapsed. As well, use aria-activedescendant to programmatically determine the active option. This attribute uses the id of the active option. On the listbox, use role="listbox". Where possible, expand a list container such as <ul>. On the options, use role="option". Where possible, expand <li>. As well, use aria-selected to differentiate of the active and inactive options. For more information, you can refer " https://www.w3.org/WAI/ARIA/apg/patterns/combobox/"
Code Snippet
<label for="ex">Choose issue type</label> <input id="ex" type="search" role="combobox" aria-activedescendant="01" aria-autocomplete="list" aria-expanded="true" aria-controls="results" aria-haspopup="listbox" ...> <ul id="results" role="listbox" aria-label="Issue type list"> <li id="01" role="option" aria-selected="true">Task</li> <li id="02" role="option">Story</li> ... </ul>
Workaround
Currently there is no known workaround for this behavior. A workaround will be added here when available
Environment
MacBook Pro (16-inch, 2021)
macOs Ventura 13.3.1
Chrome - Version 113.0.5672.63 (Official Build) (x86_64)
Firefox- Version 92.0 (64-bit)
Safari- Version 16.4 (18615.1.26.110.1)
JAWS- Version 2023
NVDA- Version 2023.3
Voiceover - Version Latest
- links to
| Form Name | |||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|