Date-time range — accessibility

Keyboard

  • Tab order: date input → calendar trigger → "od" → "do" → all-day checkbox → duration presets; in all-day mode the Date range field (start → end → one calendar trigger) → the "Celý den" switch.
  • Each part keeps its own keys: ↓ opens the calendar or the time list, Enter commits, Esc closes the open panel.
  • Space toggles "Celý den"; presets are native buttons (Enter/Space).

ARIA

  • Date parts: aria-label="Datum" / "Datum konce"; time parts "Od" / "Do" (listbox options carry the duration text).
  • All-day: canonical Switch (role="switch", aria-checked), accessible name "Celý den". The range field ends are "Datum" / "Datum konce"; the shared calendar is a dialog "Vybrat rozsah" (on phone a bottom sheet with a title and Hotovo).
  • Visually hidden aria-live="polite" region announces "od až do, délka[, přes půlnoc]" after each change.
  • .dp-status is plain text; the × icon is decorative SVG.

Focus

  • Inherited rings from Date field, Time field and the foundation focus-visible rule for the checkbox and preset buttons (.dp-preset:focus-visible 2px --accent, offset 1px).
  • Focus never jumps between parts automatically; the user moves it.

Contrast

  • Duration .dp-dur --fg-secondary on --surface-100: 3.93:1 light, 6.2:1 dark — below AA 4.5 in light (12px 500).
  • Overnight note --warning-ink: 5.58:1 light, 7.96:1 dark.
  • Status ok --positive-ink: 5.33:1 light, 7.55:1 dark; busy --critical-ink: 5.37:1 light, 5.8:1 dark.
  • Preset label --ink-700 on --surface-75: 12.55:1 light, 11.29:1 dark; .on --accent-ink: 5.31:1 light.
  • All-day label --fg-secondary: 3.93:1 light — below AA.

Known limits

  • Duration and "Celý den" label are below AA 4.5:1 in light mode (--fg-secondary at 12px).
  • The live region is the only announcement of the computed end day; the visual .dp-dur is not linked with aria-describedby.
  • The status line is not role="status"; a change of availability is not announced.
  • Native checkbox styling relies on accent-color; older engines show the platform checkbox.

Source: docs/date-time/date-time-range.a11y.md · GitLab