Accessibility

spacing-ui is accessible by default. This page collects the patterns shared across every primitive.

Focus management

Every stateful primitive owns focus during its lifecycle:

• Dialog traps focus and returns it to the trigger on close.
• Tabs, RadioGroup, and Accordion use a roving tabindex so only the active item is in the tab order.
• Select moves focus into the listbox on open and restores it to the trigger on close.
• Tooltip never steals focus. It responds to hover and to focus on the trigger.

If you need to override where focus lands, use the primitive’s onOpenChange / onValueChange callback and call .focus() on your own ref.

Reduced motion

The docs stylesheet respects prefers-reduced-motion: reduce and collapses every animation and transition to a near-zero duration when the user has requested less motion. If you build your own animated primitives, follow the same pattern:

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}