Toolbar from @prepared911/ui-core 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.
- 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
IconButton 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.
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.
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.
- 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.
