From 32478694c7fb4537c266b315d7c7a77982d10a6d Mon Sep 17 00:00:00 2001 From: Arthur Suh Balduini <34691066+arthurbalduini@users.noreply.github.com> Date: Thu, 6 Jun 2024 11:49:28 +0200 Subject: [PATCH] [docs] Create Pickers accessibility page (#13274) --- .../data-grid/accessibility/accessibility.md | 5 +- .../accessibility/accessibility.md | 81 +++++++++++++++++++ docs/data/pages.ts | 1 + .../tree-view/accessibility/accessibility.md | 5 +- .../x/react-date-pickers/accessibility.js | 7 ++ 5 files changed, 93 insertions(+), 6 deletions(-) create mode 100644 docs/data/date-pickers/accessibility/accessibility.md create mode 100644 docs/pages/x/react-date-pickers/accessibility.js diff --git a/docs/data/data-grid/accessibility/accessibility.md b/docs/data/data-grid/accessibility/accessibility.md index 689140b4dd4d..b52b8c3bcbd5 100644 --- a/docs/data/data-grid/accessibility/accessibility.md +++ b/docs/data/data-grid/accessibility/accessibility.md @@ -4,7 +4,7 @@ ## Guidelines -The most commonly encountered conformance guidelines for accessibility are: +Common conformance guidelines for accessibility include: - Globally accepted standard: [WCAG](https://www.w3.org/WAI/standards-guidelines/wcag/) - US: @@ -13,8 +13,7 @@ The most commonly encountered conformance guidelines for accessibility are: - 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. +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](https://www.w3.org/WAI/ARIA/apg/patterns/grid/) provide valuable information on how to optimize the accessibility of a data grid. diff --git a/docs/data/date-pickers/accessibility/accessibility.md b/docs/data/date-pickers/accessibility/accessibility.md new file mode 100644 index 000000000000..d71df6970323 --- /dev/null +++ b/docs/data/date-pickers/accessibility/accessibility.md @@ -0,0 +1,81 @@ +--- +productId: x-date-pickers +title: Date and Time Pickers - Accessibility +githubLabel: 'component: pickers' +packageName: '@mui/x-date-pickers' +--- + +# Accessibility + +

The Date and Time Pickers have complete accessibility support, including built-in keyboard navigation that follows international standards.

+ +## 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 | +| --------------------------------------------------------------------: | :------------------------------------------- | +| Arrow Left, Arrow Right | Moves focus among date/time sections | +| Arrow Up | Increases focused section value by 1 | +| Arrow Down | Decreases focused section value section by 1 | +| Page Up | Increases focused section value section by 5 | +| Page Down | Decreases focused section value section by 5 | +| Home | Sets focused section to the minimal value | +| End | 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 | +| -------------------------------: | :-------------------------------------------------------------- | +| Page Up | Moves calendar to next month, keeping focus on the same day | +| Page Down | Moves calendar to previous month, keeping focus on the same day | +| Home | Moves focus to the first day of the week | +| End | 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 | +| --------------------------------------------------------------------------------------------------------------------------------------------: | :------------------------------------------------------------ | +| Arrow Up, Arrow Down,
Arrow Left, Arrow Right | Moves focus among the available values | +| Page Up | Moves focus to the last day of the month | +| Page Down | Moves focus to the first day of the month | +| Home | Moves focus to first day of the week within the current month | +| End | 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. diff --git a/docs/data/pages.ts b/docs/data/pages.ts index ee4684125d36..b9b9e91b240e 100644 --- a/docs/data/pages.ts +++ b/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', diff --git a/docs/data/tree-view/accessibility/accessibility.md b/docs/data/tree-view/accessibility/accessibility.md index 4c6b9f32aa75..9c0b466412f0 100644 --- a/docs/data/tree-view/accessibility/accessibility.md +++ b/docs/data/tree-view/accessibility/accessibility.md @@ -12,7 +12,7 @@ packageName: '@mui/x-tree-view' ## Guidelines -The most commonly encountered conformance guidelines for accessibility are: +Common conformance guidelines for accessibility include: - Globally accepted standard: [WCAG](https://www.w3.org/WAI/standards-guidelines/wcag/) - US: @@ -21,8 +21,7 @@ The most commonly encountered conformance guidelines for accessibility are: - 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 we aim to support it very well. +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](https://www.w3.org/WAI/ARIA/apg/patterns/treeview/) provide valuable information on how to optimize the accessibility of a Tree View. diff --git a/docs/pages/x/react-date-pickers/accessibility.js b/docs/pages/x/react-date-pickers/accessibility.js new file mode 100644 index 000000000000..a3890966ee74 --- /dev/null +++ b/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 ; +}