import Ad from '_shared/Ad';
import Example from '_shared/Example';
import PageMeta from '_shared/PageMeta';
import * as Accessibility from './Accessibility.example';

<PageMeta title="Accessiblity" description="Accessibility guideline for @material-ui/pickers" />

## Accessibility

<Ad />

Pickers accessibility is highly important, because this control is becoming completely unusable for disabled people
if there is no appropriate focus managment and keyboard control.

The dialog contains a calendar that uses the [grid](https://www.w3.org/TR/wai-aria-practices/#grid)
pattern to present buttons that enable the user to choose a day from the calendar.
Choosing a date from the calendar closes the dialog and populates the date input field. When the dialog is opened,
if the input field is empty, or does not contain a valid date, then the current date is focused in the calendar.
Otherwise, the focus is placed on the day in the calendar that matches the value of the date input field.
It is possible to navigate throught the calendar, year selection and clock with only keyboard.

#### Limitations

- `placeholder` with helper text is completely important to be set for people with disabilities.
- `disableCloseOnSelect` prop makes picker less acessible for Desktop users because it will not be closed by `Enter` or `Space`.
- `allowKeyboardControl` is required for proper a11y. **Important**: It is by default disabled for **all Static** components.
  It's necessary to pass it manually if you are rendering datepicker in custom popper/popover or modal in order to enable focus managment and keyboard control:

```jsx
<StaticDatePicker
  allowKeyboardControl
  ...
/>
```

### Test accessibility

Here is working accessible example, compare it to the [wia-aria datepicker dialog example](https://www.w3.org/TR/wai-aria-practices/examples/dialog-modal/datepicker-dialog.html)

<Example source={Accessibility} />

### Keyboard shortcuts

Here is the list of avaialble keyboard shortcuts allows to control the date and time pickers with only keyboard.

#### DatePicker

| Shortcut     | Action                                                                                |
| ------------ | ------------------------------------------------------------------------------------- |
| ArrowUp      | Moves focus to the same day of the previous week.                                     |
| ArrowDown    | Moves focus to the same day of the next week.                                         |
| ArrowRight   | Moves focus to the next day.                                                          |
| ArrowLeft    | Moves focus to the previous day.                                                      |
| Home         | Moves focus to the first day (e.g Monday) of the current week.                        |
| End          | Moves focus to the last day (e.g. Sunday) of the current week.                        |
| Esc          | Close dialog or popover                                                               |
| Space, Enter | Choose currently focused year or date. Closing picker if current view is the last one |

#### TimePicker

| Shortcut     | Action                                                                                  |
| ------------ | --------------------------------------------------------------------------------------- |
| ArrowUp      | Incrment (hours/minutes/seconds) according to the used step                             |
| ArrowDown    | Decrmeent (hours/minutes/seconds) according to the used step                            |
| Home         | Select maximal value of current clock type (hours/minutes/seconds)                      |
| End          | Select minimal value of current clock type (hours/minutes/seconds)                      |
| Esc          | Close dialog or popover                                                                 |
| Space, Enter | Accept currently selected selected value, move to the next view or close popover/dialog |