v146 · HTML · Accessibility

Focusgroup

The focusgroup HTML attribute turns any container into a single tab-stop with arrow-key navigation for its children — replacing the hand-written roving-tabindex pattern used in every toolbar, tablist, menubar, and grid in production today.

concepts

  1. Toolbar Demo

    A text-editor toolbar where focusgroup="horizontal" on the wrapper gives all buttons arrow-key navigation with zero JavaScript — Tab enters, ← → move, Tab exits.

  2. Before / After: Roving Tabindex

    Side-by-side comparison: the full JavaScript roving-tabindex implementation on the left, the single HTML attribute on the right. Count the lines saved.

  3. Nested focusgroup lab

    A toolbar with a nested submenu. Live-toggle the extend, wrap, no-memory and axis tokens to see how arrow keys re-route through composed groups.

  4. Grid navigation

    An 8×6 colour picker on focusgroup="block inline grid". Logical axes follow RTL automatically; toggle dir to confirm.

why it shipped

Every composite widget — toolbar, tablist, radio group, menubar, grid — requires arrow-key navigation. The established technique is "roving tabindex": set tabindex="-1" on all children, tabindex="0" on the active one, then handle keydown to shift focus and swap tabindex values. This logic is identical across frameworks and is copy-pasted millions of times into codebases. ARIA authoring practices explicitly document the pattern. Yet there is no native mechanism — until now. focusgroup is the attribute that native HTML should always have had. Mozilla gave it a positive standards position and it shipped in Microsoft Edge's origin trial first, giving Chrome a clear interop path to follow for the 150 stable release.

references