The element that has combobox role is the combined presentation of a single line text field with a list box popup. The combobox may be editable. Typically editable combo boxes are used for autocomplete behavior.
In a input type text box when an auto complete behavior is present a combo box role is used. In addition aria-owns, role option can be used to have a best experience. Have a look at the below example for a simple editable combobox with combobox role. Currently I could not find enough support with combobox role using JAWS and NVDA on Firefox and Internet explorer.
Note: Elements with the role combobox have an implicit aria-haspopup value of true.
Example
<input type=”text” aria-label=â€Wild Animals†role=”combobox” aria-haspopup=”true” aria-autocomplete=”list” aria-owns=”owned_listbox” aria-activedescendant=”selected_option”>
<ul role=â€listbox†id=â€owned_listboxâ€>
<li role=â€optionâ€>Zebra</li>
<li role=â€option†id=â€selected_optionâ€>Tiger</li>
<li role=â€optionâ€>Lion</li>
<li role=â€optionâ€>Elephant</li>
<li role=â€optionâ€>Fox</li>
</ul>
Combobox role with ARIA 1.1 Specifications (Updated on August 5, 2018)
A combobox role is a combination of a textbox and listbox or a Grid. So a Combobox role is a composite widget role. The options in the listbox or grid dynamically populates to set the value of the text box.
As the combobox role has or owns a textbox, provide aria-multiline property to false. Instead of a textbox role a search role can also be provided. In case the combobox supports autocomplete behavior set appropriate value of aria-autocomplete property to the textbox. By default the combobox is collapsed and so set aria-expanded to false. When the secondary element in the textbox such as listbox or grid becomes visible convert the aria-expanded state to true. On expanding the combobox set the aria-controls property on the textbox that refers the values of the elements in the combobox popup. The elements in the combobox popup can also be a dialog or tree in addition to listbox and grid. The element that has role combobox has an implicit value of aria-haspopup to list. IF it is not appropriate provide aria-haspopup property that corresponds to the combobox.
Keyboard Management
When the user navigates to the combobox, the tab key should bring focus to the textbox and user should be able to use down arrow to move to the values of the popup element such as the values of listbox. If the popup element supports aria-activedescendant, in lieu of moving focus, such keyboard mechanisms can control the value of aria-activedescendant on the textbox element. When a descendant of the popup element is active, authors MAY set aria-activedescendant on the textbox to a value that refers to the active element within the popup while focus remains on the textbox element.