What is focusgroup?
The focusgroup HTML attribute lets you add
arrow-key navigation to groups of
focusable elements, implementing the "roving tabindex"
pattern natively
without writing any JavaScript for focus management.
Composite widgets like toolbars, tablists, menus, radio groups,
and listboxes typically need arrow-key navigation so they behave
as a single tab stop. With focusgroup, you add the
attribute and the browser manages focus.
It makes the group a single tab stop: Tab enters, arrow keys
navigate within, Tab exits. The browser tracks which element last
had focus and restores it on re-entry. Optional wrap,
inline, and block tokens control
boundary behavior and axis restriction.
The focusgroup attribute manages keyboard navigation.
Its behavior token also maps a minimum ARIA role to the container
(and may infer child roles, e.g. tab on buttons inside
a tablist) when no explicit role is present
and the element is otherwise generic. These demos rely on the
behavior token for role mapping. Explicit role
attributes are only used when overriding the default (e.g.,
role="group" on an accordion to prevent the
toolbar role).
Quick Demo
Click on the first button below, then use ← → arrow keys to navigate. Press Tab to exit.
- The entire toolbar is one tab stop
- Left/Right arrows move focus between buttons
- Focus wraps from the last button back to the first (and vice versa)
Explore the Demos
Resources
Browser Support
The focusgroup attribute is an
experimental feature. At the time
of writing, you may need to enable experimental browser flags
in Microsoft Edge or another
Chromium-based browser:
- Open
about://flagsin Microsoft Edge or another Chromium-based browser - Search for Experimental Web Platform features
- Set the flag to Enabled
- Restart the browser