Toolbar

Features

• WAI-ARIA toolbar pattern: role="toolbar" with grouped controls and role="separator" dividers
• Roving tabindex: one control tabbable at a time, ArrowLeft/ArrowRight/Home/End move focus with wrap
• Toggle buttons (bold, italic, underline) flip aria-pressed and a visual active state
• Single-select alignment group (left, center, right) behaves like a radio set
• CSS-driven tooltips shown on hover and focus, with accessible aria-label retained
• Overflow "More" menu using the ARIA menu button pattern (aria-haspopup, aria-expanded, Escape and outside-click close)
• Responsive layout with horizontal scroll on narrow viewports

Accessibility

Toolbar role

role="toolbar" with aria-label and aria-orientation

Grouped controls

role="group" per group, role="separator" dividers

Roving tabindex

One control tabindex="0", rest -1; arrows/Home/End move focus

Toggle buttons

aria-pressed flipped on bold/italic/underline

Single-select group

Alignment buttons keep one aria-pressed="true"

Menu button

aria-haspopup, aria-expanded, aria-controls, Escape and outside-click close

ARIA labels

All icon-only buttons carry explicit aria-label

Focus indicators

:focus-visible with --ring outline on all elements

Reduced motion

prefers-reduced-motion: reduce disables all animations

Customise it with AI

Open Toolbar in Atheros AI Builder, pick a design system and ask the AI assistant to change the layout, copy or behaviour — the toolbar is regenerated against your tokens. Take the HTML, CSS, JS and React source with you, or pull it into your repo from Claude Code, Cursor or Codex over MCP.