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.

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