Axon 911 Frontend DocsAxon 911 Frontend Docs
Axon 911 Frontend Docs
    Loading navigation…
U
User
Switch to light mode
  1. Components
  3. Button Group
  5. Accessibility

Button group

Accessibility

ButtonGroup from @prepared911/ui/button-group is a layout primitive around a cluster of Buttons that share visual context. The component handles grouping semantics; each button inside the group carries its own accessible name.
What the component handles
  • Group role. Renders role="group" on the container.
  • Layout rhythm. Spacing and alignment between buttons is consistent.
What you must provide
  • Group label. When the cluster represents one conceptual control (e.g., "Record actions"), set aria-label on the ButtonGroup so screen-reader users get context before hearing the individual buttons.
  • Accessible names on each button. Every button still needs a readable name. Position relative to siblings is not a label.
  • Ordering. Tab order follows DOM order; keep the primary action first or last consistently across the app.
Keyboard behavior
  • Tab / Shift+Tab move between buttons.
  • Enter / Space activate the focused button per the underlying Button contract.
Semantics and roles
  • Container → role="group" with optional aria-label or aria-labelledby.
  • Each child renders its own button (or link) semantics.
Known caveats
  • Spatial implication. Adjacent buttons can look like one control to sighted users but read separately to assistive tech. If the group truly acts as one control with sub-actions (e.g., "Save and send"), reach for SplitButton instead.
Previous
Button Group / API and Development
Next
Card / Usage
On this page
What the component handles
What you must provide
Keyboard behavior
Semantics and roles
Known caveats