Toolbar

Accessibility

Toolbar from @prepared911/ui/toolbar presents a compact floating strip of actions. The component supplies the floating container and sizing; your job is to apply the toolbar role with a label, give each control an accessible name, and let keyboard users reach every affordance.

What the component handles

Floating layout. Keeps a consistent strip geometry with slot spacing and motion.
Elevation. Surface + shadow distinguish the toolbar from the content it sits above.

What you must provide

Toolbar role and label. Wrap the strip with role="toolbar" and aria-label ("Message actions", "Selection actions"). When more than one toolbar exists on the page, labels disambiguate them for rotor users.
Named controls. Every Button inside carries a title/label; toggle buttons expose aria-pressed.
Tab order. Controls appear in the tab sequence in visual order. Use roving focus when the toolbar grows large enough that Tab through every item becomes noisy.
Non-hover discoverability. If the toolbar is revealed on hover or selection, ensure keyboard focus and screen-reader navigation also reveal it—otherwise the actions are unreachable.

Keyboard behavior

Toolbars default to linear Tab navigation. When the strip contains many items, apply a roving-focus pattern:

Tab moves focus into the toolbar (lands on the first enabled button or the last focused one).
Arrow Left / Right move between buttons.
Home / End move to the first / last button.
Tab again moves out of the toolbar.

In @prepared911/ui, a Popover or Menu trigger wrapped in ToolbarItem is one roving item: the toolbar keeps one tab stop, and Arrow Left / Right (mirrored in RTL), Home, and End move across triggers like any other item. Enter, Space, or a press opens the surface; Escape closes it and focus returns to the trigger, which stays the tab stop. For a menu, Arrow Down opens on the first row and Arrow Up on the last; Tab from an open menu closes it and returns focus to the trigger. A disabled button inside a trigger is skipped by the arrows; disabled on ToolbarItem also works and wins. Put menu triggers in a horizontal toolbar; in a vertical toolbar Arrow Down and Arrow Up open the menu instead of moving.

Semantics and roles

role="toolbar" on the root with aria-label or aria-labelledby.
role="group" around related subgroups (formatting vs alignment vs insert).
Toggle buttons expose aria-pressed; disabled buttons expose aria-disabled.

Known caveats

Overflow. If items don't fit, collapse the rest into an overflow Menu so keyboard users reach them without horizontal scrolling.
Destructive actions. Keep destructive buttons in a clearly labeled section; rely on tone (color + icon + label) rather than position alone.

Toolbar / API and Development

Tooltip / Usage

On this page

What the component handles

What you must provide

Keyboard behavior

Semantics and roles

Known caveats

Toolbar

Accessibility

What the component handles

Floating layout. Keeps a consistent strip geometry with slot spacing and motion.
Elevation. Surface + shadow distinguish the toolbar from the content it sits above.

What you must provide

Toolbar role and label. Wrap the strip with role="toolbar" and aria-label ("Message actions", "Selection actions"). When more than one toolbar exists on the page, labels disambiguate them for rotor users.
Named controls. Every Button inside carries a title/label; toggle buttons expose aria-pressed.
Tab order. Controls appear in the tab sequence in visual order. Use roving focus when the toolbar grows large enough that Tab through every item becomes noisy.
Non-hover discoverability. If the toolbar is revealed on hover or selection, ensure keyboard focus and screen-reader navigation also reveal it—otherwise the actions are unreachable.

Keyboard behavior

Toolbars default to linear Tab navigation. When the strip contains many items, apply a roving-focus pattern:

Tab moves focus into the toolbar (lands on the first enabled button or the last focused one).
Arrow Left / Right move between buttons.
Home / End move to the first / last button.
Tab again moves out of the toolbar.

Semantics and roles

role="toolbar" on the root with aria-label or aria-labelledby.
role="group" around related subgroups (formatting vs alignment vs insert).
Toggle buttons expose aria-pressed; disabled buttons expose aria-disabled.

Known caveats

Overflow. If items don't fit, collapse the rest into an overflow Menu so keyboard users reach them without horizontal scrolling.
Destructive actions. Keep destructive buttons in a clearly labeled section; rely on tone (color + icon + label) rather than position alone.

Toolbar / API and Development

Tooltip / Usage

On this page

What the component handles

What you must provide

Keyboard behavior

Semantics and roles

Known caveats