APG · Listbox

Listbox

The list is the tab stop; the options never are. The highlight is carried by aria-activedescendant, which keeps selection and focus independent — exactly what multi-select needs.

Single select — selection follows focus

The default. Arrowing changes the value, which is what a keyboard user expects from a list of choices.

Single select — selection does not follow focus

Use this when selecting has a side effect: a network request, a destructive change, anything you would not want fired eight times while someone arrows down the list.

Multi select

Selected: nothing

What to check. In the multi-select list, arrow down and watch: the dashed highlight moves but the ticks do not follow. Those are two independent states, and a design that draws them the same way makes multi-select impossible to follow. Ctrl+A selects all — and a second press clears, because a select-all with no way back is a trap.

Keyboard interaction
`Tab`	Into the list — one stop, however many options it holds.
`↓ / ↑`	Move the highlight. Clamps at the ends; a listbox does not wrap.
`Home / End`	First / last option.
`Space`	Single select: choose the highlighted option. Multi select: toggle it.
`Enter`	Choose the highlighted option when selection does not follow focus.
`Shift + ↓ / ↑`	Multi select: extend the selection as the highlight moves.
`Ctrl/⌘ + A`	Multi select: select all. Press again to clear.
`Printable character`	Jump to the next option starting with it, cycling on repeats.

Notes

In a multi-select listbox every option carries an explicit aria-selected, so "not selected" is stated rather than inferred. In a single-select one, only the chosen option has the attribute — an option without it is simply not the current value.

Space is always consumed. A focusable list that lets Space through scrolls the page, moving the list out from under the user mid-selection.