v150 · 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 focusgroup attribute — no JavaScript focus management.

Chrome 150+ — requires focusgroup attribute. In unsupported browsers the toolbar still works via Tab; arrow navigation is the new part.

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 wrap">
  <button>B</button>
  <button>I</button>
  <button>U</button>
  <!-- no tabindex juggling, no keydown handlers -->
</div>

<!-- focusgroup values:
  "toolbar"          — toolbar behavior; inline arrows by default
  "toolbar block"    — vertical toolbar override
  "toolbar wrap"     — wrap from end to start and start to end
  "toolbar nomemory" — do not restore the last-focused item
-->

see also

implementation reference

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