Accessibility

Foundational principles

• Native HTML elements (button, input, label) are used wherever they suffice — no reinvented semantics.
• Interactive primitives (Accordion, Modal, Popover-based Dropdown/DatePicker, Tabs, Tooltip) follow the relevant WAI-ARIA design patterns.
• Focus is always visible via focus-visible rings — never suppressed with outline: none alone.
• Color is never the sole signal: status is paired with text or icons throughout.
• Every dismissible surface (Modal, Dropdown, DatePicker, toast) closes on Escape by default and restores focus to its trigger.

Keyboard patterns

• Tabs — Arrow Left/Right moves and activates; follows the WAI-ARIA Tabs pattern.
• Accordion — Arrow Up/Down moves focus between triggers, Home/End jump to first/last.
• Dropdown — Arrow Up/Down navigates options, Enter selects, Escape closes, and typing filters when searchable.
• DatePicker — Arrow keys move between days, Enter selects, Escape closes the popover.
• Modal — Focus is trapped inside while open and returns to the trigger on close.
• Tooltip — Opens on focus as well as hover, and dismisses on Escape.

Per-component notes

Each component page documents its specific ARIA roles, states, and keyboard behavior in full. A few highlights:

• Button — Renders a native <button> by default, so it's keyboard-focusable and activates on Enter/Space without extra ARIA.
• ButtonGroup — Uses `role="group"` with `aria-labelledby` for the shared field label and `aria-describedby` for help or error text.
• Badge — Purely presentational by default (no implicit role); add `role="status"` yourself if a badge communicates a live update.
• GradientText — Gradient text can reduce contrast against busy backgrounds — verify contrast at the darkest stop against your page background.
• Icon — Decorative by default (`aria-hidden="true"`) since icons are almost always paired with visible text.
• Loader — Uses `role="status"` when indeterminate and `role="progressbar"` (with `aria-valuenow/min/max`) when determinate.
• Breadcrumb — Root uses `<nav aria-label="Breadcrumb">` so the trail is announced as a landmark.
• Skeleton — The skeleton itself is `aria-hidden` — it is decorative and should not be announced.
• Avatar — Image alt text defaults to `name` — override with `alt` when needed.
• Progress — Uses the built-in Progress primitive with `role="progressbar"` and `aria-valuenow/min/max`.
• Grid — Purely layout — renders plain <div> elements and doesn't alter document semantics or reading order.
• Input — Label is always associated to the field via `htmlFor`/`id` (auto-generated with `useId` when not provided).
• Textarea — Label is associated via `htmlFor`/`id` (auto-generated with `useId` when not provided).
• Checkbox — Uses the built-in Checkbox primitive with `role="checkbox"`, `aria-checked`, and Space to toggle.
• CheckboxGroup — Uses `role="group"` with `aria-labelledby` for the shared field label.
• Switch — Uses the built-in Switch primitive with `role="switch"` and `aria-checked`.
• SwitchGroup — Uses `role="group"` with `aria-labelledby` for the shared field label.
• Radio — Must be used inside `RadioGroup` which provides `role="radiogroup"` and arrow-key navigation.
• RadioGroup — Implements the WAI-ARIA Radio Group pattern with roving focus and arrow-key navigation.
• Dropdown — Trigger uses `role="combobox"` with `aria-expanded` and `aria-controls` pointing at the listbox.
• DatePicker — The trigger is a real button with `aria-haspopup="dialog"` and `aria-expanded`.
• Accordion — Triggers are real buttons inside an `<h3>`, with `aria-expanded` and `aria-controls`.
• Alert — Default `live="assertive"` uses `role="alert"` for urgent, interruptive messages.
• Panel — When `collapsible`, the header becomes a real button with `aria-expanded`.
• Tabs — Implements the WAI-ARIA Tabs pattern: `role="tablist"`/`"tab"`/`"tabpanel"` with `aria-selected` and `aria-controls`.
• Pagination — Root uses `<nav aria-label="Pagination">` so the control group is announced as navigation.
• Popover — Opens on trigger click and closes on outside click or Escape.
• Tooltip — Opens on both hover and keyboard focus, and closes on Escape — never hover-only.
• Modal — Uses `role="dialog"` with `aria-modal="true"` on the focusable container.
• DropMenu — Trigger exposes `aria-haspopup="menu"`; content renders as `role="menu"` with `menuitem` rows.
• SideMenu — Renders as `<nav aria-label="Side menu">` with button rows for each item.