Select-Only Combobox Example
- -About This Example
-
-
- The following example implementation of the Combobox Pattern demonstrates a single-select combobox widget that is functionally similar to an HTML select element.
- Unlike the editable combobox examples, this select-only combobox is not made with an <input> element, and it does not accept freeform user input.
- However, like an HTML <select>, users can type characters to select matching options.
-
Similar examples include:
--
-
- Editable Combobox with Both List and Inline Autocomplete: An editable combobox that demonstrates the autocomplete behavior known as
list with inline autocomplete
.
- - Editable Combobox with List Autocomplete: An editable combobox that demonstrates the autocomplete behavior known as
list with manual selection
.
- - Editable Combobox Without Autocomplete: An editable combobox that demonstrates the behavior associated with
aria-autocomplete=none.
- - Editable Combobox with Grid Popup: An editable combobox that presents suggestions in a grid, enabling users to navigate descriptive information about each suggestion. -
- Date Picker Combobox: An editable date input combobox that opens a dialog containing a calendar grid and buttons for navigating by month and year. -
Example
-Accessibility Features
-While the functionality and user experience of this example are nearly equivalent to an HTML select element with the attribute size="1", the following differences in behavior are implemented to improve both accessibility and general usability.
-
-
-
- If the combobox is collapsed and the user types printable characters, the listbox is displayed and receives accessibility focus via
aria-activedescendant. - This enables users to perceive the presence of the options, and enables assistive technology users to comprehend the size of the list of options.
- - - Navigating the list of options does not set the value of the input. - This gives screen reader users, who need to navigate among the options to perceive them, the ability to explore options without losing the current value of the input. - The value is set when users press Space, Enter, or Tab, or when focus moves out of the combobox. - The current value is retained if the listbox is closed with Escape or if the user collapses the list by clicking the input. - -
-
- Browsers do not manage visibility of elements referenced by
aria-activedescendantlike they do for elements with focus. - When a keyboard event changes the active option in the listbox, the JavaScript scrolls the option referenced byaria-activedescendantinto view. - Managingaria-activedescendantvisibility is essential to accessibility for people who use a browser's zoom feature to increase the size of content. -
-
Keyboard Support
-- The example combobox on this page implements the following keyboard interface. - Other variations and options for the keyboard interface are described in the Keyboard Interaction section of the combobox pattern. -
-Closed Combobox
-| Key | -Function | -
|---|---|
| Down Arrow | -
-
|
-
| Alt + Down Arrow | -Opens the listbox without moving focus or changing selection. | -
| Up Arrow | -
-
|
-
| Enter | -Opens the listbox without moving focus or changing selection. | -
| Space | -Opens the listbox without moving focus or changing selection. | -
| Home | -Opens the listbox and moves visual focus to the first option. | -
| End | -Opens the listbox and moves visual focus to the last option. | -
| Printable Characters | -
-
|
-
Listbox Popup
-
- NOTE: When visual focus is in the listbox, DOM focus remains on the combobox and the value of aria-activedescendant on the combobox is set to a value that refers to the listbox option that is visually indicated as focused.
- Where the following descriptions of keyboard commands mention focus, they are referring to the visual focus indicator.
- For more information about this focus management technique, see
- Managing Focus in Composites Using aria-activedescendant.
-
| Key | -Function | -
|---|---|
| Enter | -
-
|
-
| Space | -
-
|
-
| Tab | -
-
|
-
| Escape | -
-
|
-
| Down Arrow | -
-
|
-
| Up Arrow | -
-
|
-
| Alt + Up Arrow | -
-
|
-
| Home | -Moves visual focus to the first option. | -
| End | -Moves visual focus to the last option. | -
| PageUp | -Jumps visual focus up 10 options (or to first option). | -
| PageDown | -Jumps visual focus down 10 options (or to last option). | -
| Printable Characters | -
-
|
-
Role, Property, State, and Tabindex Attributes
-- The example combobox on this page implements the following ARIA roles, states, and properties. - Information about other ways of applying ARIA roles, states, and properties is available in the Roles, States, and Properties section of the Combobox Pattern. -
-Combobox
-| Role | -Attribute | -Element | -Usage | -
|---|---|---|---|
- combobox
- |
- - | div |
- Identifies the input as a combobox. | -
| - |
- aria-labelledby="#IDREF"
- |
- div |
- Identifies the element that labels the combobox. | -
| - |
- aria-controls="#IDREF"
- |
- div |
- Identifies the element that serves as the popup. | -
| - |
- aria-expanded="false"
- |
- div |
- Indicates that the popup element is not displayed. | -
| - |
- aria-expanded="true"
- |
- div |
- Indicates that the popup element is displayed. | -
| - |
- aria-activedescendant="IDREF"
- |
- div |
-
-
|
-
Listbox Popup
-| Role | -Attribute | -Element | -Usage | -
|---|---|---|---|
- listbox
- |
- - |
- div
- |
- Identifies the element as a listbox. |
-
- option
- |
- - | div |
-
-
|
-
| - |
- aria-selected="true"
- |
- li |
-
-
|
-
JavaScript and CSS Source Code
--
-
- - CSS: - select-only.css - -
- - JavaScript: - select-only.js - -
HTML Source Code
-To copy the following HTML code, please open it in CodePen.
- -