45 Virtual Focus. 45 of 95.
45/NAVIGATION/45 of 95
Virtual Focus
Highlight can move without moving DOM focus.
The problem
Moving DOM focus through every list option on each arrow key disrupts the input, breaks IME, and confuses screen readers mid-type.
The solution
DOM focus stays on the input; activedescendant tracks the highlighted option.
Experiment
Play with the values
How it works
- DOM focus stays on the text input so typing is never interrupted.
- Arrow keys move a highlight through the options without moving focus.
- aria-activedescendant points at the highlighted option so assistive tech can follow it.
- The active option is styled as selected even though it does not own DOM focus.
- Enter commits the highlighted option.
Seen in
Comboboxes
Suggestions highlight while the caret stays in the search field.
Command palettes
Arrow through commands without stealing focus from the filter input.
Mention pickers
People lists navigate while composition and typing continue in the editor.
Autocomplete
Virtual focus keeps typing uninterrupted across long option lists.