Calendar
Calendar
enables users to quickly navigate to and select a single date or range of dates. Currently all date based controls, need to be wrapped in a LocalizationProvider
The Calendar
component is typically not used on its own but is composed with other components to build more user-friendly components such as DatePicker
.
- If the
Calendar
is composed within another component, move focus to the first interactive element within that component. - After a date is selected, provide feedback and move focus appropriately to enhance the user experience.
When composing a Calendar
with your own content, ensure that text and interactive elements within the DatePicker
have sufficient color contrast.
- Include clear instructions for each date selection mode. For example, explain how to select multiple dates or how to use offset dates.
- Display validation messages and status updates in a way that is accessible to screen readers.
- Use
aria-live
regions to announce changes, such as when a date is selected or when the calendar view changes. - Ensure that screen readers announce the selected dates and any instructions for interacting with the
DatePicker
.
Key | Function |
---|---|
Tab |
|
Shift + Tab |
|
Arrow keys |
|
Enter / Space |
|
Escape |
|
The Calendar
component is typically not used on its own but is composed with other components to build more user-friendly components such as DatePicker
.
- If the
Calendar
is composed within another component, move focus to the first interactive element within that component. - After a date is selected, provide feedback and move focus appropriately to enhance the user experience.
When composing a Calendar
with your own content, ensure that text and interactive elements within the DatePicker
have sufficient color contrast.
- Include clear instructions for each date selection mode. For example, explain how to select multiple dates or how to use offset dates.
- Display validation messages and status updates in a way that is accessible to screen readers.
- Use
aria-live
regions to announce changes, such as when a date is selected or when the calendar view changes. - Ensure that screen readers announce the selected dates and any instructions for interacting with the
DatePicker
.
Key | Function |
---|---|
Tab |
|
Shift + Tab |
|
Arrow keys |
|
Enter / Space |
|
Escape |
|
The Calendar
component is typically not used on its own but is composed with other components to build more user-friendly components such as DatePicker
.
- If the
Calendar
is composed within another component, move focus to the first interactive element within that component. - After a date is selected, provide feedback and move focus appropriately to enhance the user experience.
When composing a Calendar
with your own content, ensure that text and interactive elements within the DatePicker
have sufficient color contrast.
- Include clear instructions for each date selection mode. For example, explain how to select multiple dates or how to use offset dates.
- Display validation messages and status updates in a way that is accessible to screen readers.
- Use
aria-live
regions to announce changes, such as when a date is selected or when the calendar view changes. - Ensure that screen readers announce the selected dates and any instructions for interacting with the
DatePicker
.
Key | Function |
---|---|
Tab |
|
Shift + Tab |
|
Arrow keys |
|
Enter / Space |
|
Escape |
|