Active Descendant

Provides additional keyboard navigation/selection without moving keyboard focus.

Active descendant is a technique whereby keyboard focus remains on an element (usually a textbox) but has the appearance of moving elsewhere when using the arrow keys. This technique is useful so that users can continue to input text, whilst also controlling another element (usually a grid or listbox).

Compare this to a roving tabindex technique, where focus is explicitly moved to a new element each time an ARROW key is pressed.

Patterns that utilize the active descendant technique are: grid, combobox and autocomplete.

Code Example

Todo

Utilities

We provide two useful JavaScript utilities for initiating active-descendant navigation on a collection of elements:

Last updated