Listbox Dropdown

Collapsible Dropdown Listbox Button

Description Inner text describes button purpose
Role Identifies itself as a button
Relationships On focus, button indicates it controls a listbox using aria-haspopup="listbox"
State Indicates when the button is expanded/collapsed using aria-expanded="true"
Focus Visibly focusable with the tab key / swipe
Action Enter, space / double tap

Collapsible Dropdown Listbox List <ul>

Description Label describes the purpose of the listbox
Role Identifies itself as a listbox
Relationships Uses aria-labelledby="label-id", aria-activedescendant="option-id"
State The selected option is indicated using aria-selected="true"
Focus Focus moves from the launch button to the list itself with tab key / swipe
Action Tab key / swipe, Enter / double tap, escape, arrow keys, home, end, characters

Keyboard & Screenreader Support

Enter If the focus is on the button, expands the listbox and places focus on the currently selected option in the list. If focus is in the listbox , collapses the listbox and keeps the currently selected option as the button label.
Escape If the listbox is displayed, collapses the listbox and moves focus to the button.
Down Arrow Moves focus to and selects the next option. If the listbox is collapsed, also expands the list.
Up Arrow Moves focus to and selects the previous option. If the listbox is collapsed, also expands the list.
Home If the listbox is displayed, moves focus to and selects the first option.
End If the listbox is displayed, moves focus to and selects the last option.
Printable Characters Type a character: focus moves to the next item with a name that starts with the typed character. Type multiple characters in rapid succession: focus moves to the next item with a name that starts with the string of characters typed.

Custom Element

Making a listbox is a custom element that recreates a lot of functionality of a <select> element. When possible, use a <select>.

Description Requires extra work

  • The listbox should be described by its label.
  • Use aria-labelledby="[label-id]" to describe the listbox.

Role Requires extra work

  • Button should describe itself as a button
  • role="listbox" for the <ul>
  • role="option" for the <li>

Relationships Requires extra work

  • Button
    • aria-haspopup="listbox" Indicates that activating the button displays a listbox.
    • aria-activedescendant="[optionl-id]" to indicate the currently active option
  • Listbox ul
    • aria-labelledby="[label-id]" to label the <ul>

State Requires extra work

  • Use aria-selected="true" to indicate the selected option

Focus Requires extra work

  • Tab key should focus the button
  • tabindex="-1" will make the <ul> focusable when the button is activated.

Actions Requires extra work

  • Enter
  • escape
  • arrow keys
  • home
  • end
  • characters