Roving tabindex

A group with one Tab stop where arrow keys move focus among its items, so Tab can enter once and leave once.

arrow keys inside a groupone tab stop for a whole widgettab into it then use arrowsmake tabs work like desktop tabstabbing through my toolbar takes twenty pressesstop tab going through every button in the rowkeyboard focus moves within the listroving tabindext

See it

Live demo coming soon

What it is

Roving tabindex is a focus pattern for a composite widget. Exactly one item in the group has tabindex='0'; its siblings have tabindex='-1'. Tab enters at that one item and leaves the group in one press, while arrow keys move within the group by changing which item has zero and calling focus() on it. The behavior is lifted straight from desktop toolbars and menu bars, where Tab moves between panes and arrows move inside the one you landed in.

Use it for widgets whose ARIA Authoring Practices pattern expects one tab stop, such as tab lists, toolbars, radio groups, and some menus or grids. It prevents a long group from consuming one Tab press per item and remembers the last active item when the user returns. Home and End often move to the first and last item, but the exact keys come from the specific widget pattern.

Gotcha: roving tabindex is an algorithm, not permission to invent a widget. Roles, selection state, orientation, disabled-item behavior, and activation rules still have to match the chosen ARIA pattern. Do not confuse focus with selection: in some widgets arrowing selects immediately, while in others Enter or Space performs the selection.

Ask AI for it

Implement roving tabindex for this composite widget using its matching WAI-ARIA Authoring Practices pattern. Initialize one enabled item with tabindex='0' and every peer with tabindex='-1'. On the pattern's arrow keys, set the current item to -1, set the destination to 0, and call HTMLElement.focus() on it; implement Home and End only when the pattern specifies them. Let Tab and Shift+Tab leave the group without custom handling. Preserve the last focused item across re-renders with a stable item id, keep focus distinct from selection where required, and expose the correct role, accessible name, orientation, and selected or checked state. Add keyboard tests for entry, exit, wrapping behavior, disabled items, item removal, and right-to-left layout.

You might have meant

keyboard navigationtab orderfocus managementaccessible name

Go deeper