Date Field

User stories

The following user stories can be used to understand when this component should be used, and how to know when it's been implemented correctly.

• As someone using the component, I want to be able to easily understand the information required from me and how it should be provided.
• As someone with a cognitive disability, I want to be able to understand if any personal information is required, for example whether it's my birthdate or payment method's expiry date.
• As someone with a cognitive disability, I want to be able to understand any errors related to the date field, as well as how to resolve the error.
• As a keyboard-only user, I want to be able to navigate to each input field within the date field using the Tab key.
• As a screen reader user, I want the group label relating to the date field to be announced when navigating through the input fields.
• As a screen reader user, I want any additional information provided alongside the group label to be announced when navigating through the input fields.
• As a screen reader user, I want any additional information provided alongside the date field's group label to be announced when navigating through the input fields.
• As a screen reader user, I want any error messages relating to the date field to be announced when they become present.
• As a voice-control user, I want to be able to navigate to each input field within the date field using their associated label.

Test steps

Use these steps to check that the date field component has been implemented correctly:

1. Turn on a screen reader.
2. Navigate to each input field within the date field using the Tab key.
3. Verify that each input within the date field has a visible label.
4. Verify that a name for each input field is announced and that it includes the visible label.

If any errors appear when the form is validated, complete the following checks:

1. Turn on a screen reader.
2. Navigate to the inputs within the date field using the Tab key.
3. Verify that once one of the inputs within the date field receives focus, that there is an announcement to convey that there is an error with this field.

---