Listbox: Listbox is missing appropriate roles and/or attributes - WARNING: VERY RARE
custom-listbox
Rule
The name, role, value, states, and properties of user interface components MUST be programmatically determinable by assistive technologies.
Background
Every user interface control must have a role along with any applicable states and properties so that screen reader users know how to interact with the control. Native HTML elements - such as <button>, <a>, <input>, <select> - already have a role, and their necessary states and properties - such as the checked/unchecked state of a checkbox - are automatically conveyed so nothing more needs to be done. If you create a custom version of a native HTML element or a custom control or widget that does not have a native HTML equivalent, you must add the relevant role(s) and any applicable states and properties using ARIA as well as expected keyboard interactions.
How to Fix
A listbox widget presents a list of options and allows a user to select one or more of them. Listbox differs from a combobox in two major ways: The set of options does not collapse, and it does not have a separate input field.
Fix this issue by doing ONE of the following:
- Use an HTML <select> element for a widget where one option is selected (a single-select listbox).
- For a multi-select listbox, follow the ARIA listbox design pattern including expected keyboard interactions at: https://www.w3.org/WAI/ARIA/apg/patterns/listbox/