Calendar
Calendar is a component for displaying or selecting dates in a calendar.
Keyboard Navigation
| Key | Description | State |
|---|---|---|
ArrowUp | Moves focus one cell up. | - |
ArrowDown | Moves focus one cell down. | - |
ArrowLeft | Moves focus one cell left. If on first cell, focuses last cell of previous period. | - |
ArrowRight | Moves focus one cell right. If on last cell, focuses first cell of next period. | - |
Home | Focuses the first cell. | - |
End | Focuses the last cell. | - |
Space, Enter | Activates the focused cell. | - |
ARIA Roles and Attributes
| Component | Roles and Attributes | Usage |
|---|---|---|
CalendarLabel Internal | aria-live="polite" | Indicates that it may be updated outside of focus. |
CalendarControlPrev Internal | aria-label | Sets "Go to previous month" if type is "date", otherwise sets "Go to previous year". |
CalendarControlNext Internal | aria-label | Sets "Go to next month" if type is "date", otherwise sets "Go to next year". |
Month Internal | role="grid" | Indicates that it is a grid. |
aria-label | Sets the selected month and year, like "October 2024". | |
aria-multiselectable | Sets "true" if multiple selection is enabled. | |
MonthList Internal | role="grid" | Indicates that it is a grid. |
aria-label | Sets the selected year, like "2024". | |
YearList Internal | role="grid" | Indicates that it is a grid. |
aria-label | Sets the year range, like "From 2021 to 2032". | |
Button Internal | aria-selected | Set to "true" if the item is selected, "false" if not selected. |
aria-disabled | Set to "true" if the item is disabled. |
Edit this page on GitHub