v150 · 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="toolbar wrap" 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. Grid Navigation

    focusgroup="listbox wrap nomemory" on visual picker grids — current listbox semantics for a single tab stop plus a small row/column helper while native 2D grid behavior remains outside the Chrome 150 contract.

  4. Radio Group

    A vertical radio group where focusgroup="radiogroup block nomemory" handles ↑ ↓ navigation and single-tab-stop behaviour — side-by-side with the 35-line roving-tabindex equivalent to show exactly what gets deleted.

  5. Menu Bar

    An accessible menu bar with four top-level items and dropdown submenus, powered by focusgroup="menubar" and nested focusgroup="menu" popups. Tab enters the bar, ← → cycle through items, Enter/Space opens the dropdown, Escape closes it.

  6. API Console

    Mutate every current focusgroup token — behavior, inline/block, wrap/nowrap, and nomemory. Interact using the keyboard to watch focus events log in real time and generate the matching HTML snippet.

  7. Migration Diff

    Four widget patterns — toolbar, radio group, tablist, listbox — showing the full roving-tabindex JavaScript implementation versus the single focusgroup attribute. Toggle between old and new, interact with both, and read exactly how many lines of keyboard management code each widget eliminates.

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

implementation reference

Need the exact API surface, compatibility boundaries, errors, lifecycle, and source links? Read the matching gendn reference ↗