[docs] Create Pickers accessibility page #13274

arthurbalduini · 2024-05-28T06:54:47Z

This PR introduces the accessibility content for Date Pickers and its components.
It's part of the issue #6451

Another PR with content about Time Pickers will be opened afterwards.

I have followed (at least) the PR section of the contributing guide.

mui-bot · 2024-05-28T07:01:03Z

Deploy preview: https://deploy-preview-13274--material-ui-x.netlify.app/

Updated pages:

Generated by 🚫 dangerJS against 392a46d

michelengelen

A few suggestions! 👍🏻

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

LukasTy

Great work!
Leaving some suggestions and discussions points. 😉

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

Co-authored-by: Lukas <llukas.tyla@gmail.com> Signed-off-by: Arthur Suh Balduini <34691066+arthurbalduini@users.noreply.github.com>

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

samuelsycamore

great addition to the docs @arthurbalduini ! I really appreciate that you've applied the style guide consistently. 🙌😁 This review is mostly copyediting.

samuelsycamore · 2024-05-31T14:13:13Z

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

+
+## Guidelines
+
+The most commonly encountered conformance guidelines for accessibility are:


copyediting

Suggested change

The most commonly encountered conformance guidelines for accessibility are:

Common conformance guidelines for accessibility include:

Nitpick: This section is a copy and paste from Data Grid and Tree View a11y pages.
If we apply this change, it would be nice to replicate it on those pages as well. 👍

@arthurbalduini do you plan on applying these changes?
Or are you leaving that for a separate PR?

After discussing with @samuelsycamore, I will apply these changes and also replicate them to the other pages where they appear on this PR

samuelsycamore · 2024-05-31T14:21:25Z

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

+Level AA meets the most commonly encountered conformance guidelines.
+This is the most common target for organizations so it is what we aim to support.


I like describing this as "exceeding the basic criteria" because it sounds more reassuring if you're not deeply informed about this stuff.

Suggested change

Level AA meets the most commonly encountered conformance guidelines.

This is the most common target for organizations so it is what we aim to support.

Level AA exceeds the basic criteria for accessibility and is a common target for most organizations, so this is what we aim to support.

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

samuelsycamore · 2024-05-31T14:31:58Z

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

+
+### Date Range Picker
+
+The [Date Range Picker](/x/react-date-pickers/date-range-picker/) keeps the focus on the field all the time and thus has the same keyboard navigation as Date Range [Field](/x/react-date-pickers/accessibility/#fields).


I would use more than one word for link text whenever possible—three is the ideal minimum. I don't fully understand what's meant by "all the time"—I would reword this as "at all times" if I understood the meaning correctly. Can you elaborate on what this means or implies for the UX?

Suggested change

The [Date Range Picker](/x/react-date-pickers/date-range-picker/) keeps the focus on the field all the time and thus has the same keyboard navigation as Date Range [Field](/x/react-date-pickers/accessibility/#fields).

The [Date Range Picker](/x/react-date-pickers/date-range-picker/) keeps the focus on the field at all times and thus has the same keyboard navigation as the [Date Range Field](/x/react-date-pickers/accessibility/#fields).

This references the current Date Range Picker UX pattern, where the focus is returned to the input after selection in an open Picker view as compared to Date Picker, where the focus is kept in the Popper until the complete selection is made.

I have rewritten this part on #c10ee9f. Would appreciate your opinion ! :)

Co-authored-by: Sycamore <71297412+samuelsycamore@users.noreply.github.com> Co-authored-by: Lukas <llukas.tyla@gmail.com> Signed-off-by: Arthur Suh Balduini <34691066+arthurbalduini@users.noreply.github.com>

…eCalendar

LukasTy

Great work! 💯
A few final nitpicks. 😉

LukasTy · 2024-06-06T06:39:34Z

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

+
+## Guidelines
+
+The most commonly encountered conformance guidelines for accessibility are:


@arthurbalduini do you plan on applying these changes?
Or are you leaving that for a separate PR?

LukasTy · 2024-06-06T06:47:23Z

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

+
+### Date Range Picker
+
+When interacting with the keyboard, the [Date Range Picker](/x/react-date-pickers/date-range-picker/) keep the focus on the Field component, thereby offering the same keyboard navigation support as the [Date Range Field](/x/react-date-pickers/accessibility/#fields).


Suggested change

When interacting with the keyboard, the [Date Range Picker](/x/react-date-pickers/date-range-picker/) keep the focus on the Field component, thereby offering the same keyboard navigation support as the [Date Range Field](/x/react-date-pickers/accessibility/#fields).

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).

P.S. WDYT about removing the Date Range Field or the Field link below on L84? 🤔
They point to the same section and are too close to one another IMHO. 🙈

I agree, and actually I think L82 and L84 are redundant

Introduces a11y page with content for date pickers

ec8277b

arthurbalduini added docs Improvements or additions to the documentation accessibility a11y component: date picker This is the name of the generic UI component, not the React module! component: date range picker This is the name of the generic UI component, not the React module! labels May 28, 2024

arthurbalduini requested a review from a team May 28, 2024 06:54

Fixes introduced by prettier

a17bbff

michelengelen reviewed May 28, 2024

View reviewed changes

danilo-leal requested a review from samuelsycamore May 28, 2024 15:13

Corrections and improvements suggested on comments

8e2b7e3

LukasTy changed the title ~~[docs] Creates accessibility page with content for date pickers~~ [docs] Create Pickers accessibility page May 29, 2024

LukasTy reviewed May 29, 2024

View reviewed changes

arthurbalduini and others added 4 commits May 30, 2024 14:48

Apply suggestions from code review

d1282db

Co-authored-by: Lukas <llukas.tyla@gmail.com> Signed-off-by: Arthur Suh Balduini <34691066+arthurbalduini@users.noreply.github.com>

combines arrow keys mentions

9d6e753

Apply suggestions from code review

7befdbe

Co-authored-by: Lukas <llukas.tyla@gmail.com> Signed-off-by: Arthur Suh Balduini <34691066+arthurbalduini@users.noreply.github.com>

Apply suggestions from code review

eb0d436

LukasTy reviewed May 30, 2024

View reviewed changes

docs/data/date-pickers/accessibility/accessibility.md Outdated Show resolved Hide resolved

docs/data/date-pickers/accessibility/accessibility.md Outdated Show resolved Hide resolved

arthurbalduini linked an issue May 31, 2024 that may be closed by this pull request

[docs][pickers] Add a11y/keyboard navigation documentation #6451

Closed

samuelsycamore reviewed May 31, 2024

View reviewed changes

arthurbalduini and others added 5 commits June 5, 2024 14:54

Apply suggestions from code review

31a9b9b

Co-authored-by: Sycamore <71297412+samuelsycamore@users.noreply.github.com> Co-authored-by: Lukas <llukas.tyla@gmail.com> Signed-off-by: Arthur Suh Balduini <34691066+arthurbalduini@users.noreply.github.com>

improvement on dateRangePicker a11y description

c10ee9f

fixes End and Home buttons descriptions for DateCalendar and DateRang…

7415401

…eCalendar

rewrites 'day' view keyboard support

206e723

prettier fix

cb092b1

LukasTy removed component: date picker This is the name of the generic UI component, not the React module! component: date range picker This is the name of the generic UI component, not the React module! labels Jun 6, 2024

LukasTy approved these changes Jun 6, 2024

View reviewed changes

apply small guidelines content changes for x documents

392a46d

arthurbalduini merged commit 3247869 into mui:master Jun 6, 2024
15 checks passed

michelengelen added a commit to michelengelen/mui-x that referenced this pull request Jun 6, 2024

added an entry for mui#13274

38178e0

This was referenced Jul 12, 2024

[Snyk] Upgrade @mui/x-date-pickers from 7.6.2 to 7.7.0 DMPatod/wallet-manager-app#2

Merged

[Snyk] Upgrade @mui/x-data-grid from 7.6.2 to 7.7.0 DMPatod/wallet-manager-app#3

Merged

alhabib5565 mentioned this pull request Jul 14, 2024

[Snyk] Upgrade @mui/x-data-grid from 7.3.0 to 7.7.1 alhabib5565/quick-shop-client#5

Open

KotoneZQ mentioned this pull request Jul 18, 2024

[Snyk] Upgrade @mui/x-date-pickers from 7.5.1 to 7.7.1 KotoneZQ/ICT2216-RoomBooker-test#1

Open

DungTiger pushed a commit to DungTiger/mui-x that referenced this pull request Jul 23, 2024

[docs] Create Pickers accessibility page (mui#13274)

c3a664b

oliviertassinari added the component: pickers This is the name of the generic UI component, not the React module! label Jul 24, 2024

thomasmoon pushed a commit to thomasmoon/mui-x that referenced this pull request Sep 9, 2024

[docs] Create Pickers accessibility page (mui#13274)

5ec9733

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[docs] Create Pickers accessibility page #13274

[docs] Create Pickers accessibility page #13274

arthurbalduini commented May 28, 2024

mui-bot commented May 28, 2024 •

edited

Loading

michelengelen left a comment

LukasTy left a comment

samuelsycamore left a comment

samuelsycamore May 31, 2024

LukasTy Jun 3, 2024

LukasTy Jun 6, 2024

arthurbalduini Jun 6, 2024

samuelsycamore May 31, 2024 •

edited

Loading

samuelsycamore May 31, 2024

LukasTy Jun 3, 2024

arthurbalduini Jun 5, 2024

LukasTy left a comment

LukasTy Jun 6, 2024

LukasTy Jun 6, 2024

arthurbalduini Jun 6, 2024


		## Guidelines

		The most commonly encountered conformance guidelines for accessibility are:

	The most commonly encountered conformance guidelines for accessibility are:
	Common conformance guidelines for accessibility include:

		Level AA meets the most commonly encountered conformance guidelines.
		This is the most common target for organizations so it is what we aim to support.

	Level AA meets the most commonly encountered conformance guidelines.
	This is the most common target for organizations so it is what we aim to support.
	Level AA exceeds the basic criteria for accessibility and is a common target for most organizations, so this is what we aim to support.


		### Date Range Picker

		The [Date Range Picker](/x/react-date-pickers/date-range-picker/) keeps the focus on the field all the time and thus has the same keyboard navigation as Date Range [Field](/x/react-date-pickers/accessibility/#fields).


		### Date Range Picker

		When interacting with the keyboard, the [Date Range Picker](/x/react-date-pickers/date-range-picker/) keep the focus on the Field component, thereby offering the same keyboard navigation support as the [Date Range Field](/x/react-date-pickers/accessibility/#fields).

[docs] Create Pickers accessibility page #13274

[docs] Create Pickers accessibility page #13274

Conversation

arthurbalduini commented May 28, 2024

mui-bot commented May 28, 2024 • edited Loading

michelengelen left a comment

Choose a reason for hiding this comment

LukasTy left a comment

Choose a reason for hiding this comment

samuelsycamore left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

samuelsycamore May 31, 2024 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

LukasTy left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

mui-bot commented May 28, 2024 •

edited

Loading

samuelsycamore May 31, 2024 •

edited

Loading