What the component handles
- Associated helper message and error message announced by screen readers in a correct order
- Required attribute announced by the screen readers
- Month selector dropdown with aria-expanded and aria-haspopup
- 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")
- aria-pressed state for selected dates and aria-disabled for unavailable dates
- Focus management - returns to input when calendar closes
What you need to provide
- aria-labelledby if you're referencing an existing label element
- If a Placeholder is the sole way of describing the required format (which should be avoided by all means), add a hidden label with the format example, and use aria-describedby
Color contrast
Meets the WCAG 2.1 AA color contrast ratio requirements and can be used on the following:
- background.static.xxx tokens except for background.static.inverse and background.static.on-color
- in default Card variant.