v146 · HTML · Accessibility · demo
Toolbar Demo
Tab into the toolbar, use ← → arrows to navigate between buttons, Tab again to reach the editor. All keyboard behaviour comes from the current focusgroup="toolbar inline" attribute syntax — no JavaScript focus management.
Support check running. This ChromeStatus entry is listed in the v146 folder, while native keyboard behavior has appeared in later Chrome channels and experiments. The toolbar markup is real
focusgroup="toolbar inline"; this page reports whether this browser exposes native support.
1 · Click into the toolbar area (or Tab to it) | 2 · Use ← → to move between buttons | 3 · Press Tab to move to the editor
Click here or Tab from the toolbar to edit. The focusgroup attribute above gives the toolbar its arrow-key navigation — inspect the HTML to see how simple it is.
<!-- The entire keyboard navigation behaviour —
arrow keys, single tab stop, last-focus memory —
comes from ONE attribute -->
<div role="toolbar" focusgroup="toolbar inline">
<button>B</button>
<button>I</button>
<button>U</button>
<!-- no tabindex juggling, no keydown handlers -->
</div>
<!-- focusgroup values:
"toolbar" — toolbar behavior token required by current Chrome
"inline" — ← → navigate along the inline axis
"block" — ↑ ↓ navigate along the block axis
"wrap" — navigation wraps at the ends
"nomemory" — re-entering the group starts from the first item
-->