Intelligence Community Design System

The day, month and year values of a date input focus from left to right with focus moving between each date element.

The day, month and year values can be updated using the up and down arrow keys. For example, if hovering day input, people can use the arrow keys to increase or decrease the day.

Pressing tab and shift tab will move the cursor between day, month and year. Pressing forward slash or dash (hyphen), will move the cursor from left to right as these are commonly used date separators.

People can copy and paste into a date input component to quickly input a date into the date input field.

To aid people in understanding how to navigate through a date input, the label, helper text and date input description are initially read out. The description announced for the date input includes the date format (if there is custom helper text) and how to add values using the arrow keys.

When selecting the day using the arrow keys, the day and then the phrase 'day' is announced, for example "01, day".

When selecting the month using arrow keys, the following message is announced, "01 – January, month".

When selecting the year using arrow keys, the year and phrase 'year' are announced. For example, "2024, year".

If further updates to the input are made once day, month and year have been set, the screen reader will announce "Selected date: date changed to ". For example, if the input was changed from 01/01/2023 to 02/01/2023, it will announce "Selected date: Monday 2, January 2023".

We’ve tested this component against WCAG 2.2 Level AA. It’s been tested with NVDA and VoiceOver, and several different users with different interaction methods.