MiHCM
primitives/@mihcm/ui·v0.21.0·stable

Calendar

Date grid powered by @daypicker/react v10. Forwards the full DayPicker prop surface with MiHCM tokenized geometry, focus, and selection styles.

WCAG 2.1 AA — release blocker

Calendar must satisfy these on every render before it ships.

Web (React DOM)

  • Renders a <table> grid with role="grid". Each day is a focusable cell.
  • Navigation buttons (< / >) are real <button> elements with aria-label (e.g. "Go to previous month").
  • Selected date receives aria-selected="true".
  • Disabled dates receive aria-disabled="true" and cannot be focused.
  • aria-current="date" marks today's date.

Keyboard

KeyAction
Arrow Left/RightMove focus by one day.
Arrow Up/DownMove focus by one week.
Home / EndJump to start / end of the week.
Page Up/DownGo to previous / next month.
Enter / SpaceSelect the focused date.

React Native

  • Calendar is a stub on native (not yet interactive).

Reduced motion

Animations are CSS-based and respect prefers-reduced-motion.

Audit checklist

  • Every day cell is keyboard-reachable
  • Selected date announced with aria-selected
  • Today marked with aria-current="date"
  • Nav buttons have aria-label
  • Disabled dates not focusable
  • 4.5:1 contrast on selected / today backgrounds