Accessibility
Keyboard navigation, ARIA state, focus, and motion support.
Calix supplies the accessibility behavior for its components and hook prop getters. If you render your own markup, spread the getters onto the intended elements instead of copying their attributes manually.
Calendar semantics
The calendar grid uses role="grid", week rows use role="row", and day
buttons use role="gridcell". A day exposes:
- its localized full date through
aria-label; - selection and disabled state through
aria-selectedandaria-disabled; - today's date through
aria-current="date".
The visible month heading is announced through a polite live region when it changes.
Keyboard model
| Key | Action |
|---|---|
| Arrow keys | Move focus by a day or a week; left/right mirror in RTL. |
| Home / End | Move to the first / last day of the displayed week. |
| Page Up / Page Down | Move focus one month backward / forward. |
| Shift + Page Up / Page Down | Move focus one year backward / forward. |
| Enter / Space | Select the focused date. |
| Escape | Dismiss the standard date-picker popover. |
Only one day has tabIndex={0} at a time. The date picker popover manages
focus and returns focus to the trigger after dismissal.
Motion and contrast
The supplied themes honor prefers-reduced-motion and provide a high-contrast
variant under prefers-contrast: more. Do not convey a custom selected or
disabled state with color alone—retain a visible non-color distinction as well.
Custom implementations
When using useCalendar, use both getGridProps() and
getDayProps(date, view). The latter is what wires keyboard navigation,
selection, focus registration, ARIA state, and state attributes.
Test your final UI with a keyboard and a screen reader. Your custom header,
footer, trigger, and renderDay content remain your responsibility.