How to build an accessible DateRangePicker in React

The trigger is role="combobox" with aria-haspopup="dialog"/aria-expanded; the popover is a role="dialog" containing two Calendar grids, each an APG role="grid" with roving tabindex; selection is two clicks (first sets the pending start, second emits the sorted range; clicking the same day twice clears), and the hover/keyboard preview marks in-between cells with data-in-range; Escape and outside-click close the panel

When to use a DateRangePicker

• Selecting a contiguous start–end date range (reporting windows, bookings, filters)
• When two months visible at once and hover-preview of the in-between span aid selection

When not to use it

• Picking a single date — use DatePicker or Calendar
• Selecting many non-contiguous dates — a range picker only models one continuous span

Keyboard interactions

Role combobox, verified at WCAG 2.2-AA.

• Enter
• Space
• Escape
• ArrowUp
• ArrowDown
• ArrowLeft
• ArrowRight
• Home
• End
• PageUp
• PageDown

Common mistakes

Avoid: Emitting the range in click order, so onValueChange can fire with end before start

Prefer: The two clicked dates are sorted before emitting, so start is always <= end

Consumers expect range.start <= range.end; an unsorted range breaks downstream comparisons and queries

Example

<DateRangePicker />

See the full DateRangePicker reference →