Accessibility
Tabs from @prepared911/ui/tabs implements the WAI-ARIA Tabs pattern. Trigger-to-panel association, orientation, roving focus, and keyboard behavior are built in; your job is to provide an accessible group label and to keep focus behavior inside panels sensible.
TabsList → tablist, TabsTrigger → tab with aria-selected and aria-controls, TabsContent → tabpanel with aria-labelledby.aria-orientation reflects horizontal or vertical layout and drives arrow-key direction.listOverflow={TabsListOverflow.Scroll}, arrow-key roving focus is unchanged. When focus moves to a tab outside the visible scrollport, the list scrolls that tab into view (scrollIntoView). Scroll padding and clip margin reserve space so focus rings stay visible at the edges of the scrollport (WCAG 2.4.11).label (renders aria-label) or labelledBy (renders aria-labelledby) on Tabs. Without one, screen-reader users hear "tablist" with no context.| Key | Action |
|---|---|
| Tab | Moves focus into the active trigger, then into the panel. |
| Arrow Left / Right | Moves between triggers in horizontal layouts. |
| Arrow Up / Down | Moves between triggers in vertical layouts. |
| Enter / Space | Activates the focused trigger. |
| Home / End | Jumps to the first / last trigger. |
| Element | Role | Key attributes |
|---|---|---|
TabsList | tablist | aria-orientation |
TabsTrigger | tab | aria-selected, aria-controls |
TabsContent | tabpanel | aria-labelledby |
TabsListOverflow.Scroll), roving focus does not trap inside the scrollport: Home, End, and arrow keys still move among all tabs, and the list scrolls to keep the focused tab visible.tabpanel can confuse assistive tech.Dialog; never rely on a tab change to "cancel" a destructive flow.