[Select][material-ui] Missing aria-multiselectable attribute on multiple Select component #38855
Conversation
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
Co-authored-by: AsiwajuDev <[email protected]>
Netlify deploy previewhttps://deploy-preview-38855--material-ui.netlify.app/ Bundle size reportDetails of bundle changes (Toolpad) |
|
@mj12albert this PR is ready for review |
danilo-leal
changed the title
danilo-leal
added
accessibility
mj12albert
requested changes
Sep 8, 2023
There was a problem hiding this comment.
Let's also add a simple test (I suppose here) to check for this ~
Co-authored-by: AsiwajuDev <[email protected]>
Co-authored-by: AsiwajuDev <[email protected]>
Co-authored-by: AsiwajuDev <[email protected]>
|
@mj12albert the test has been added, thanks for the review. |
christophermorin
pushed a commit
to christophermorin/material-ui
that referenced
this pull request
Sep 21, 2023
…ple Select component (mui#38855) Co-authored-by: AsiwajuDev <[email protected]>
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Description
Missing aria-multiselectable attribute on multiple Select component
Steps to reproduce 🕹
Link to live example: https://codesandbox.io/s/nhnkzh?file=/Demo.tsx Steps:
doesn't have the aria-multiselectable attribute set to true
Steps with JAWS screen reader:
Current behavior 😯
The Select component is missing the aria-multiselectable attribute when using the multiple prop. Screen readers read the Select listbox as a standard listbox.
Expected behavior 🤔
If the listbox supports selection of more than one option, the element with role listbox has aria-multiselectable set to true. Otherwise, aria-multiselectable is either set to false or the default value of false is implied.
(Source)
With this attribute set to true - the JAWS screen reader will read the Select as "extended selection list box".
As stated on MDN Web Docs "The aria-multiselectable attribute is the way to inform assistive technology users that they may select more than one item from the current selectable items if they so choose."
Reference to JAWS documentation "Multiple Selection List Boxes": https://www.freedomscientific.com/SurfsUp/Forms.htm
See Example 2 Multi-Select Listbox on w3.org: https://www.w3.org/WAI/ARIA/apg/patterns/listbox/examples/listbox-rearrangeable/
Code example of working model: https://codepen.io/pen?&prefill_data_id=63e06758-0048-4774-a720-87cddb15147e
Context 🔦
When a screen reader user interacts with the Select component they are not informed that multiple options can be selected if the Select is using the multiple prop.
closes #38631
This code was written and reviewed by GitStart Community. Growing great engineers, one PR at a time.