Date range — accessibility

Keyboard

• Tab order: "od" input → "do" input → calendar trigger. ↓ in either end opens the panel; Enter commits the typed end; blur commits or reverts.
• In the panel the Calendar grid has focus: arrows move by day/week, PageUp/PageDown by month (Shift = year), Home/End to week edges, Enter/Space picks the first then the second end, Esc closes.
• Tab out of the whole component closes the panel.

ARIA

• Ends: aria-label from fromLabel / toLabel ("Od" / "Do"); autocomplete="off".
• Trigger: aria-label="Otevřít kalendář", aria-haspopup="dialog", aria-expanded.
• Panel: role="dialog" aria-label="Vybrat rozsah"; head inputs are readOnly with the same labels.
• Grid cells: role="gridcell", aria-selected on both ends, aria-current="date" on today (Calendar).

Focus

• Field ring .dp-field:focus-within (accent border + 3px color-mix(--accent 16%)).
• Day focus ring 0 0 0 1px var(--accent), 0 0 0 4px color-mix(--accent 16%).
• Focus is not moved back to the field after the panel closes from the scrim; Esc from the grid calls onRequestClose → panel hides, focus stays where the browser leaves it (known limit).

Contrast

• Ends --ink-900 on --surface-100: 17.59:1 light, 14.53:1 dark.
• Between-days --accent-ink on --accent-tint: 4.58:1 light, 5.37:1 dark.
• Selected ends white on --accent: 4.44:1.
• Day count .count --fg-muted 11px: 2.85:1 light — below AA.
• Preset .on --accent-ink on transparent/--surface-100: 5.31:1 light, 6.82:1 dark.

Known limits

• No focus return to the trigger after closing the panel via scrim or Esc.
• The day count and placeholders are below AA 4.5:1 in light mode.
• Open-ended ranges are shown by a fill that runs off the grid; there is no textual "open" hint for screen readers beyond the empty end input.