[docs] Create Pickers accessibility page

docs/data/date-pickers/accessibility/accessibility.md

@@ -0,0 +1,96 @@
+---
+productId: x-date-pickers
+title: Date and Time Pickers - Date format and localization
+githubLabel: 'component: pickers'
+packageName: '@mui/x-date-pickers'
+---
+
+# Date and Time 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
+
+The most commonly encountered conformance guidelines for accessibility are:
+
+- 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 meets the most commonly encountered conformance guidelines.
+This is the most common target for organizations so what we aims to support very well.
+
+<!-- Those examples do not cover the clock component -->
+
+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/) that provide valuable information on how to optimize the accessibility of the Date and Time Pickers.
+
+## Screen reader compatibility
+
+Date and Time Pickers provide support to ARIA roles and a 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 on different associations of Fields, Calendar, Time and Digital Clock components, each of them designed to respond intuitively to keyboard interactions, providing a better experience for users who rely on keyboard navigation.
+
+Each available component presents its own keyboard support, detailed on the following section:
+
+### 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> | Moves focus among date/time sections         |
+| <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 first value      |
+|         <kbd class="key">End</kbd> | Sets focused section to the last value       |
+
+### Date Calendar
+
+All the available [views](/x/react-date-pickers/date-calendar/#views) implement the same basic keyboard support:
+
+|                                                      Keys | Description                            |
+| --------------------------------------------------------: | :------------------------------------- |
+|                                <kbd class="key">Tab</kbd> | Moves focus to the next element        |
+|   <kbd class="key">Shift</kbd>+<kbd class="key">Tab</kbd> | Moves focus to the previous element    |
+| <kbd class="key">Arrow Keys (Left, Right, Up, Down)</kbd> | Moves focus among the available values |
+
+In addition to the basic keyboard support above, the day view component implements its own keyboard interactions:
+
+|                             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 first day of the week, tresspassing to previous month if necessary |
+|       <kbd class="key">End</kbd> | Moves focus to last day of the week, tresspassing to next month if necessary      |
+
+### 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 [DateField](/x/react-date-pickers/accessibility/#fields) or [DateCalendar](/x/react-date-pickers/accessibility/#date-calendar) and any changes made to the value will be consistently reflected across both components.
+
+### Date Range Calendar
+
+The Date Range Calendar implements a similar keyboard support as day view of the [DateCalendar](/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 auxiliar arrows.
+
+|                                                      Keys | Description                               |
+| --------------------------------------------------------: | :---------------------------------------- |
+| <kbd class="key">Arrow Keys (Left, Right, Up, Down)</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      |
+|                                <kbd class="key">End</kbd> | Moves focus to last day of the week       |
+
+### Date Range Picker
+
+The [Date Range Picker](/x/react-date-pickers/date-range-picker/) integrates the features of both the Date Range Field and Date Range Calendar components. However it doesn't inherently provides every keyboard support implemented in these components.
+
+To ensure a more fluid and more accessible user experience, Date Range Picker support the same keyboard navigation and interactions of the [Field](/x/react-date-pickers/accessibility/#fields) components, having the changes being consistently displayed on the calendar component.

docs/data/pages.ts

@@ -229,6 +229,7 @@ const pages: MuiPage[] = [
       { pathname: '/x/react-date-pickers', title: 'Overview' },
       { pathname: '/x/react-date-pickers/getting-started' },
       { pathname: '/x/react-date-pickers/base-concepts' },
+      { pathname: '/x/react-date-pickers/accessibility' },
       { pathname: '/x/react-date-pickers/faq', title: 'FAQ' },
       {
         pathname: '/x/react-date-pickers-components',

docs/pages/x/react-date-pickers/accessibility.js

@@ -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} />;
+}