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-statusis plain text; the × icon is decorative SVG.
Focus
- Inherited rings from Date field, Time field and the foundation
focus-visiblerule for the checkbox and preset buttons (.dp-preset:focus-visible2px--accent, offset 1px). - Focus never jumps between parts automatically; the user moves it.
Contrast
- Duration
.dp-dur--fg-secondaryon--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-700on--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-secondaryat 12px). - The live region is the only announcement of the computed end day; the visual
.dp-duris not linked witharia-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