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.