ComboButton

From W3C Wiki


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