demo · v146
Nested focusgroup lab
Real toolbars nest. Format bar holds a font-family menu that itself holds a weight submenu. This lab composes focusgroup-style routing: outer arrow keys traverse the top-level row, the illustrative extend toggle lets a child share the parent's keymap, and the current nomemory token resets the active item on exit. Toggle each and watch the keymap change.
This page polyfills focusgroup routing for visualisation. Current Chrome requires a behavior token such as toolbar and does not accept the older explainer-only extend spelling as a native modifier, so the lab stores its full token string in data-focusgroup-intent and avoids native parser warnings.
outer toolbar — data-focusgroup-intent="toolbar inline wrap"
inner submenu — data-focusgroup-intent="toolbar inline extend"
key events
Behaviour map
toolbar inline— left/right cycle children along the inline axis; up/down do nothing.extend— illustrative explainer token that lets the inner row's arrow keys "punch through" into the parent's keymap.nomemory— current Chrome spelling for resetting to the first item when the group is re-entered.wrap— right-from-last lands on first; otherwise focus stops at the edge.
<div data-focusgroup-intent="toolbar inline wrap">
<button>B</button>
<button>I</button>
<div data-focusgroup-intent="toolbar inline extend"> <!-- inner: same axis, escapes upward in this polyfill -->
<button>100</button>
<button>400</button>
<button>700</button>
</div>
<button>align</button>
</div>