WCAG Score - Not compliant
Provided by the component
Keyboard navigation
- ↓ / Alt+↓ — Opens the popout.
- ← → / ↑ ↓ — Navigates through the calendar grid.
- Enter / Space — Select the date (Updates the value of the combobox with the selected date and closes the dialog and moves focus to the combobox. For range variant, closes the popout after end range is selected)
- Esc — Closes the popout and return focus to the input.
- Tab / Shift+Tab — Move focus between interactive elements inside the popout (Month & Year selects → Navigation buttons → Dates grid)
ARIA
Trigger
|
Attribute |
Description |
|---|---|
|
aria-role=”combobox” |
Identifies the input element as a combobox. |
|
aria-haspopup="dialog" |
Indicates that the combobox opens a dialog. |
|
aria-expanded="false/false" |
Indicates that the combobox is collapsed or expanded. |
|
aria-autocomplete="none" |
Indicates the combobox does not support autocomplete. |
|
aria-controls="ID" |
Identifies the element controlled by the combobox. |
|
aria-describedby="ID" |
Identifies the element that provides an accessible description for the combobox, enabling assistive technologies to associate, for instance, the date format description with the input. |
Popout
|
Attribute |
Description |
|---|---|
|
aria-role=”dialog” |
Identifies the element as a dialog. |
|
aria-modal="true" |
Indicates the dialog is modal. |
Implementation considerations
- Ensure the proper use date format based on user’s locale.
WCAG 1.1.1
If something other than plain text (image, icon, video, …) is displayed, you must give it a little text tag (alt, caption, …) that explains what it is, especially if it is for decorative purposes.