ComboButton

Combo Box

The Combo Box control has a static text field label explicitly associated with the control. Optionally the label has a mnemonic to aide navigation.

Keyboard Interaction

• Tab moves focus to the drop-down button.
• Left arrow moves focus from the button into the text field.
• Enter posts the list.

When menu is posted, up arrow and down arrow keys move highlight and selection up or down within the list. 

• Enter or spacebar closes the list, maintaining latest selection (highlighted item).
• Escape dismisses the list and reverts to the prior selection.

Mouse Interaction

• RMB click in text area moves focus into text area and displays insertion cursor.
• RMB click on down-arrow button toggles post / unposting of the list.
• RMB on list item selects the item.
• RMB away from control also unposts list.

ARIA Roles and Properties

A combo box uses the ARIA roles:

• combobox for box itself
• textfield for the editable portion of the box
• listitem for the items displayed in the combo box when it is opened

Combo boxes use the ARIA properties disabled, readonly, and expanded.

Example

• Editable Combo Box supported in Firefox