Select: Custom select does not have a role and/or state
Link to Select: Custom select does not have a role and/or state copied to clipboard
select-missing-role-state
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 to convey what type of control it is for screen reader and other assistive technology users. Native HTML elements - such as <button>, <a>, <input>, <select> - already have a role, 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) using ARIA as well as expected keyboard interactions.
How to Fix
Fix this issue by using ONE of the following techniques:
- Use an HTML <select> element with <option> elements to create the drop-down menu.
- Use the ARIA combobox design pattern. View the full ARIA design pattern for a combobox including expected keyboard interactions and examples: https://www.w3.org/WAI/ARIA/apg/patterns/combobox/