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:

• ​jquery-active-descendant​

• ​makeup-active-descendant​