➡️ Open the demo ⬅️

Interactive demos for the HTML focusgroup attribute, which lets you add arrow-key navigation to composite widgets (the roving tabindex pattern) without JavaScript.

Note: The focusgroup behavior token maps a minimum ARIA role to generic containers (e.g., a plain <div>) and can infer child roles (e.g., tab on <button> inside a tablist). These demos rely on that automatic mapping. Explicit role attributes are only used for intentional overrides (e.g., role="group" on the accordion to prevent the toolbar role).

• Index: Overview page with a quick-demo toolbar and navigation to all demos
• Toolbar: Toolbar demos using inline and block navigation
• Tablist: Tab control using the tablist behavior token (which defaults to inline + wrap), with nomemory to reset focus position on re-entry
• Menu & Menubar: Vertical menu and horizontal menubar with nested submenus
• Radio Group: Radio button group navigation
• Listbox: Selectable list navigation
• Accordion: Accordion with block-axis arrow key navigation using focusgroup="toolbar block" and role="group"
• Additional Concepts: Nested focusgroups, opt-out, deep descendants, CSS reading-flow integration, feature detection

• Focusgroup Explainer (Open UI)
• Focusgroup polyfill (GitHub) (npm: @microsoft/focusgroup-polyfill)
• ARIA Authoring Practices Guide (APG)

These demos use the scoped-focusgroup variant of the spec and require enabling the Experimental Web Platform features flag at about://flags in Microsoft Edge or another Chromium-based browser. The feature is experimental and not yet enabled by default in stable builds. See the Open UI explainer for the spec status.