Combobox: Combobox is missing appropriate roles and/or attributes

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 combobox is an input widget that most closely resembles an HTML select element. It generally has an input with a popup that enables users to select a value for the combobox from a collection of possible options. Some allow the user to type into the input. The default state of a combobox is collapsed.

Fix this issue by using ONE of the following techniques:

1. Use an HTML <select> element with <option> elements to create the drop-down menu.
2. Use the ARIA design pattern for a combobox. View the full ARIA design pattern for a combo including expected keyboard interactions and examples: https://www.w3.org/WAI/ARIA/apg/patterns/combobox/