Range Date Picker

Allows users to select a start and end date from a calendar or by entering dates manually.

What the component handles

  • Calendar dropdown with role="dialog" and modal behavior
  • Arrow key navigation between dates within the calendar grid
  • Month/year navigation buttons are properly labeled
  • Date buttons have full date labels (e.g., "28 August 2025, Thursday")
  • Selection states are announced clearly ("Selected as start date", "Selected as end date", "Selected")
  • aria-pressed state for selected dates and aria-disabled for unavailable dates

Color contrast

All states meet the 4.5:1 text contrast requirement.