-
-
Notifications
You must be signed in to change notification settings - Fork 1.4k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
[docs] Create Pickers accessibility page (#13274)
- Loading branch information
1 parent
b72e1db
commit 3247869
Showing
5 changed files
with
93 additions
and
6 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,81 @@ | ||
| --- | ||
| productId: x-date-pickers | ||
| title: Date and Time Pickers - Accessibility | ||
| githubLabel: 'component: pickers' | ||
| packageName: '@mui/x-date-pickers' | ||
| --- | ||
|
|
||
| # Accessibility | ||
|
|
||
| <p class="description">The Date and Time Pickers have complete accessibility support, including built-in keyboard navigation that follows international standards.</p> | ||
|
|
||
| ## Guidelines | ||
|
|
||
| Common conformance guidelines for accessibility include: | ||
|
|
||
| - Globally accepted standard: [WCAG](https://www.w3.org/WAI/standards-guidelines/wcag/) | ||
| - US: | ||
| - [ADA](https://www.ada.gov/) - US Department of Justice | ||
| - [Section 508](https://www.section508.gov/) - US federal agencies | ||
| - Europe: [EAA](https://ec.europa.eu/social/main.jsp?catId=1202) (European Accessibility Act) | ||
|
|
||
| WCAG 2.1 has three levels of conformance: A, AA, and AAA. | ||
| Level AA exceeds the basic criteria for accessibility and is a common target for most organizations, so this is what we aim to support. | ||
|
|
||
| The WAI-ARIA Authoring Practices includes examples on [Date Picker Dialog](https://www.w3.org/WAI/ARIA/apg/patterns/dialog-modal/examples/datepicker-dialog/) and [Date Picker Spin Button](https://www.w3.org/WAI/ARIA/apg/patterns/spinbutton/examples/datepicker-spinbuttons/) patterns, which provide valuable information on how to optimize the accessibility of these components. | ||
|
|
||
| ## Screen reader compatibility | ||
|
|
||
| Date and Time Pickers use ARIA roles and robust focus management across the interactive elements to convey the necessary information to users, being optimized for use with assistive technologies. | ||
|
|
||
| ## Keyboard support | ||
|
|
||
| The Date and Time Pickers consist of different associations of Field, Calendar, and Clock components. | ||
| Each of these components is designed to respond intuitively to keyboard interactions, providing extensive keyboard navigation support. | ||
|
|
||
| ### Fields | ||
|
|
||
| The following table describes the keyboard support for all [field components](/x/react-date-pickers/fields/): | ||
|
|
||
| | Keys | Description | | ||
| | --------------------------------------------------------------------: | :------------------------------------------- | | ||
| | <kbd class="key">Arrow Left</kbd>, <kbd class="key">Arrow Right</kbd> | Moves focus among date/time sections | | ||
| | <kbd class="key">Arrow Up</kbd> | Increases focused section value by 1 | | ||
| | <kbd class="key">Arrow Down</kbd> | Decreases focused section value section by 1 | | ||
| | <kbd class="key">Page Up</kbd> | Increases focused section value section by 5 | | ||
| | <kbd class="key">Page Down</kbd> | Decreases focused section value section by 5 | | ||
| | <kbd class="key">Home</kbd> | Sets focused section to the minimal value | | ||
| | <kbd class="key">End</kbd> | Sets focused section to the maximal value | | ||
|
|
||
| ### Date Calendar | ||
|
|
||
| Among the [available view components](https://mui.com/x/react-date-pickers/date-calendar/#views), `day` is the only one that implements specific keyboard support: | ||
|
|
||
| | Keys | Description | | ||
| | -------------------------------: | :-------------------------------------------------------------- | | ||
| | <kbd class="key">Page Up</kbd> | Moves calendar to next month, keeping focus on the same day | | ||
| | <kbd class="key">Page Down</kbd> | Moves calendar to previous month, keeping focus on the same day | | ||
| | <kbd class="key">Home</kbd> | Moves focus to the first day of the week | | ||
| | <kbd class="key">End</kbd> | Moves focus to the last day of the week | | ||
|
|
||
| ### Date Picker | ||
|
|
||
| The [Date Picker](/x/react-date-pickers/date-picker/) combines the functionalities of the Date Field and Date Calendar components. | ||
|
|
||
| Depending on which component is in focus, the Picker will provide the corresponding keyboard support, either from [Date Field](/x/react-date-pickers/accessibility/#fields) or [Date Calendar](/x/react-date-pickers/accessibility/#date-calendar). | ||
|
|
||
| ### Date Range Calendar | ||
|
|
||
| The [Date Range Calendar](/x/react-date-pickers/date-range-calendar/) implements a similar keyboard support as the day view of the [Date Calendar](/x/react-date-pickers/accessibility/#date-calendar) component, with a difference on the navigation among the previous and next months that must be achieved using the arrows in the calendar header. | ||
|
|
||
| | Keys | Description | | ||
| | --------------------------------------------------------------------------------------------------------------------------------------------: | :------------------------------------------------------------ | | ||
| | <kbd class="key">Arrow Up</kbd>, <kbd class="key">Arrow Down</kbd>,<br> <kbd class="key">Arrow Left</kbd>, <kbd class="key">Arrow Right</kbd> | Moves focus among the available values | | ||
| | <kbd class="key">Page Up</kbd> | Moves focus to the last day of the month | | ||
| | <kbd class="key">Page Down</kbd> | Moves focus to the first day of the month | | ||
| | <kbd class="key">Home</kbd> | Moves focus to first day of the week within the current month | | ||
| | <kbd class="key">End</kbd> | Moves focus to last day of the week within the current month | | ||
|
|
||
| ### Date Range Picker | ||
|
|
||
| When interacting with the keyboard, the [Date Range Picker](/x/react-date-pickers/date-range-picker/) keeps the focus on the Field component, thereby offering the same keyboard navigation support as the [Date Range Field](/x/react-date-pickers/accessibility/#fields), having the changes consistently updated on the calendar component. |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,7 @@ | ||
| import * as React from 'react'; | ||
| import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs'; | ||
| import * as pageProps from 'docsx/data/date-pickers/accessibility/accessibility.md?muiMarkdown'; | ||
|
|
||
| export default function Page() { | ||
| return <MarkdownDocs {...pageProps} />; | ||
| } |