Date Picker Input
Success Criteria:
| Description | Label describes the input |
|---|---|
| Role | Identify it as a date picker |
| Relationships | for="input-id" is required in the label |
| State | valid/invalid = selected/unselected |
| Focus | Be visibly focusable with tab key / swipe |
| Action | Enter and spacebar keys / double tap |
Keyboard & Screenreader Support
| Tab / swipe | Moves focus to the date picket input and between parts of the date / the date string |
|---|---|
| Space / double tap | If the date picker is [type="text"] is will replace the text value with a space, if the input is [type="date"] is will open the calendar month widget. |
| Right arrow | When focus is on the input with [type="date"] Moves focus between parts of the date (day/month/year). If the input is [type="text"] moves the cursor inside of the date string |
| Down arrow | When focus is on the input with [type="date"] decrements the current value. If the input is [type="text"] moves the cursor to the end of the string. |
| Left arrow | When focus is on the input with [type="date"] Moves focus between parts of the date (day/month/year). If the input is [type="text"] moves the cursor inside of the date string |
| Up arrow | When focus is on the input with [type="date"] increments the current value. If the input is [type="text"] moves the cursor to the start of the string. |
Native Element
Native date inputs have a lot of of keyboard and focus interactions built in for free.
Description
- Label inner text should describe the date picker input.
- Label with for="[datepicker-id]" attribute works too.
- aria-describedby="description-id" for additional descriptions
- pattern="\d{4}-\d{2}-\d{2}"
Role
- Is natively a date picker
Relationships
- aria-labelledby="label-id"
- The Label can have for="input-id" or aria-owns="input-id"
- aria-haspopup="date-picker-dialog-id"
State
- required="true/false"
Focus
- Is natively focusable
- Focus must be visible
Actions
- Tab
- Space
- Arrow Keys
Custom Element
Input type="date" has 92% browser support as of April 2020. Use with a fallback.
Description
- Label inner text should describe the Date picker input.
- aria-label="Choose Date" can also be used.
Role Requires extra work
- implicit as <input>
Relationships Requires extra work
- aria-labelledby="label-id"
- The Label can have for="input-id" or aria-owns="input-id"
- aria-haspopup="date-picker-dialog-id"
State Requires extra work
- aria-selected="true/false"
- aria-invalid="true/false"
Focus Requires extra work
- Roving tabindex="-1" and tabindex="0"
Actions Requires extra work
- Tab
- Space
- Arrow Keys