Focusgroup: Toolbar Pattern

A simple horizontal toolbar. All buttons are natively focusable. focusgroup makes the group a single tab stop with arrow-key navigation.

focusgroup="toolbar"

Try it: Tab to the toolbar, then press → and ← to navigate. Press Tab to exit the toolbar.

The toolbar is a single tab stop. Tab enters, arrows navigate within, and Tab exits.
Left/Right arrows move focus between buttons
toolbar defaults to horizontal (inline) navigation. No explicit inline modifier needed.
No JavaScript is needed for focus management
Home and End are not built into focusgroup. Add JavaScript handlers if your pattern requires them.

View source

<div focusgroup="toolbar" aria-label="Text formatting" class="toolbar-horizontal">
    <button type="button">Bold</button>
    <button type="button">Italic</button>
    <button type="button">Underline</button>
    <button type="button">Strikethrough</button>
</div>

No `tabindex` Management Needed

With focusgroup, you don't need to set or manage tabindex on any items. The browser collapses all focusable children into a single tab stop, with no JavaScript "roving tabindex" boilerplate required.

focusgroup="toolbar"

Try it: Press Tab to enter the toolbar. Only one button is reachable via Tab. Use arrows to move between buttons, then Tab to exit. Tab back in. Focus is restored to the last-focused button (memory).

focusgroup collapses multiple tab stops into one. No tabindex="-1" needed
Focus memory is preserved. The last-focused button is restored on re-entry.

View source

<div focusgroup="toolbar"
     aria-label="Document actions" class="toolbar-horizontal">
    <button type="button">New</button>
    <button type="button">Open</button>
    <button type="button">Save</button>
    <button type="button">Print</button>
</div>

Entry Point with `focusgroupstart`

The focusgroupstart attribute marks which element receives focus when Tab enters the group for the first time (with no prior focus history). When nomemory is set, Tab always re-enters at focusgroupstart. Without nomemory, Tab re-enters at the last-focused item (focus memory), so focusgroupstart only applies on the very first visit.

focusgroup="toolbar nomemory"

Try it: Press Tab to enter. Focus lands on "Middle (Entry)" because focusgroupstart marks it as the entry point. With nomemory, focus returns here every time, not just on the first visit.

focusgroupstart controls the entry point for the group
nomemory means focus always returns to the entry point, not the last-focused element
Without nomemory, the group remembers where you were

View source

<div focusgroup="toolbar nomemory"
     aria-label="Entry point demo" class="toolbar-horizontal">
    <button type="button">First</button>
    <button type="button" focusgroupstart>Middle (Entry)</button>
    <button type="button">Last</button>
</div>

Use focusgroup="toolbar block". The explicit block modifier overrides toolbar's default inline, so only Up/Down arrow keys navigate. Set aria-orientation="vertical" on the container so assistive technologies know the toolbar is oriented vertically.

focusgroup="toolbar block"

Try it: Use ↓ and ↑ to navigate. ← and → do nothing.

toolbar block uses the toolbar behavior with the block axis. block overrides toolbar's default inline modifier.
Left/Right arrow keys do nothing; only Up/Down navigate
aria-orientation="vertical" is required for correct ARIA semantics (the toolbar token maps the role automatically)

View source

<div focusgroup="toolbar block"
     aria-label="Vertical toolbar" aria-orientation="vertical"
     class="toolbar-vertical">
    <button type="button">Cut</button>
    <button type="button">Copy</button>
    <button type="button">Paste</button>
</div>

Basic Toolbar

No tabindex Management Needed

Entry Point with focusgroupstart

Vertical Toolbar

No `tabindex` Management Needed

Entry Point with `focusgroupstart`