autoSelect
will automatically select and fill the textbox value when user cycles through listbox options. Otherwise, ENTER
key is required to manually select an option. Typically autoSelect will be true
for a combobox with autocomplete behaviour.DOWN-ARROW
and UP-ARROW
keys must navigate through the list of options. The keyboard focus will appear to be in two places at the same time - the textbox and the listbox. In actual fact, keyboard focus always stays on the textbox. The aria-activedescendant property controls the pseudo-focus inside of the listbox.SPACEBAR
must always enter a blank space in the textbox.autoSelect
, changing the highlighted option will automatically fill the textbox with that option.autoSelect
, changing the highlighted option must not automatically fill the textbox; ENTER
key is required to manually select the option.ENTER
key while an option is highlighted must collapse the listbox. For a combobox with autoSelect
the form will be submitted. For a combobox without autoSelect
the form must not be submitted.ESC
key while an option is highlighted must collapse the listbox..combobox
wrapper element. This wrapper acts as our module root and hook for CSS & JavaScript.hidden
attribute.role=combobox
. We also create the properties and state that connect the combobox to the listbox:role
, aria-expanded
, autocomplete
and aria-owns
.aria-roledescription
. aria-activedescendant
. This attribute is placed on the combobox element. The attribute value is the ID of the currently active (pseudo-focussed) option. This allows assistive technology such as a screen reader to programmatically determinetextbox
to combobox
. We recommend applying this attribute on the client-side with JavaScript.