Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[Select] Implement WAI-ARIA dropdown without label #16739

Merged
merged 7 commits into from
Jul 25, 2019

Conversation

eps1lon
Copy link
Member

@eps1lon eps1lon commented Jul 24, 2019

Fixes part of #16409

Implements https://www.w3.org/TR/wai-aria-practices/examples/listbox/listbox-collapsible.html

Labeling logic isn't included since this requires a broader scope. I think this might be fully implementable within the TextField. Maybe with a separate component. Shouldn't block this change though.

@eps1lon eps1lon added accessibility a11y component: select This is the name of the generic UI component, not the React module! labels Jul 24, 2019
@@ -264,11 +265,11 @@ const SelectInput = React.forwardRef(function SelectInput(props, ref) {
)}
ref={displayRef}
data-mui-test="SelectDisplay"
aria-pressed={open ? 'true' : 'false'}
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

aria-pressed is for toggle buttons:

aria-pressed="false" | a | Identifies the button as a toggle button.Indicates the toggle button is not pressed.
aria-pressed="true" | a | Identifies the button as a toggle button.Indicates the toggle button is pressed.

-- https://www.w3.org/TR/wai-aria-practices/examples/button/button.html

@eps1lon eps1lon force-pushed the fix/Select/wai-aria branch from 6bffe39 to 1b0a7ef Compare July 24, 2019 19:04
@mui-pr-bot
Copy link

Details of bundle changes.

Comparing: 4d8206d...1b0a7ef

bundle parsed diff gzip diff prev parsed current parsed prev gzip current gzip
@material-ui/core +0.01% 🔺 +0.01% 🔺 327,244 327,279 90,300 90,305
@material-ui/core/Paper 0.00% 0.00% 68,218 68,218 20,410 20,410
@material-ui/core/Paper.esm 0.00% 0.00% 61,994 61,994 19,220 19,220
@material-ui/core/Popper 0.00% 0.00% 28,963 28,963 10,428 10,428
@material-ui/core/Textarea 0.00% 0.00% 5,541 5,541 2,371 2,371
@material-ui/core/TrapFocus 0.00% 0.00% 3,808 3,808 1,600 1,600
@material-ui/core/styles/createMuiTheme 0.00% 0.00% 16,161 16,161 5,814 5,814
@material-ui/core/useMediaQuery 0.00% 0.00% 3,101 3,101 1,317 1,317
@material-ui/lab 0.00% 0.00% 141,941 141,941 43,685 43,685
@material-ui/styles 0.00% 0.00% 51,628 51,628 15,408 15,408
@material-ui/system 0.00% 0.00% 15,573 15,573 4,439 4,439
Button 0.00% 0.00% 79,805 79,805 24,362 24,362
Modal 0.00% 0.00% 14,643 14,643 5,230 5,230
Portal 0.00% 0.00% 3,484 3,484 1,565 1,565
Rating 0.00% 0.00% 70,558 70,558 22,099 22,099
Slider 0.00% 0.00% 75,332 75,332 23,344 23,344
colorManipulator 0.00% 0.00% 3,904 3,904 1,543 1,543
docs.landing 0.00% 0.00% 51,801 51,801 13,783 13,783
docs.main 0.00% 0.00% 604,195 604,195 193,848 193,848
packages/material-ui/build/umd/material-ui.production.min.js +0.01% 🔺 0.00% 301,579 301,614 86,719 86,723
docs: / 0.00% 0.00% 55,800 55,800 -1 -1
docs: /_app 0.00% 0.00% 137,000 137,000 -1 -1
docs: /_error 0.00% 0.00% 2,110 2,110 -1 -1
docs: /blog/2019-developer-survey-results 0.00% 0.00% 13,600 13,600 -1 -1
docs: /blog/april-2019-update 0.00% 0.00% 4,620 4,620 -1 -1
docs: /blog/june-2019-update 0.00% 0.00% 2,200 2,200 -1 -1
docs: /blog/march-2019-update 0.00% 0.00% 3,180 3,180 -1 -1
docs: /blog/material-ui-v4-is-out 0.00% 0.00% 22,600 22,600 -1 -1
docs: /blog/may-2019-update 0.00% 0.00% 2,750 2,750 -1 -1
docs: /components/about-the-lab 0.00% 0.00% 6,370 6,370 -1 -1
docs: /components/app-bar 0.00% 0.00% 135,000 135,000 -1 -1
docs: /components/autocomplete 0.00% 0.00% 291,000 291,000 -1 -1
docs: /components/avatars 0.00% 0.00% 27,000 27,000 -1 -1
docs: /components/badges 0.00% 0.00% 61,500 61,500 -1 -1
docs: /components/bottom-navigation 0.00% 0.00% 26,900 26,900 -1 -1
docs: /components/box 0.00% 0.00% 32,800 32,800 -1 -1
docs: /components/breadcrumbs 0.00% 0.00% 97,400 97,400 -1 -1
docs: /components/buttons 0.00% 0.00% 236,000 236,000 -1 -1
docs: /components/cards 0.00% 0.00% 72,900 72,900 -1 -1
docs: /components/checkboxes 0.00% 0.00% 69,300 69,300 -1 -1
docs: /components/chips 0.00% 0.00% 115,000 115,000 -1 -1
docs: /components/click-away-listener 0.00% 0.00% 13,300 13,300 -1 -1
docs: /components/container 0.00% 0.00% 13,300 13,300 -1 -1
docs: /components/css-baseline 0.00% 0.00% 20,100 20,100 -1 -1
docs: /components/dialogs 0.00% 0.00% 224,000 224,000 -1 -1
docs: /components/dividers 0.00% 0.00% 51,000 51,000 -1 -1
docs: /components/drawers 0.00% 0.00% 229,000 229,000 -1 -1
docs: /components/expansion-panels 0.00% 0.00% 83,700 83,700 -1 -1
docs: /components/grid 0.00% 0.00% 153,000 153,000 -1 -1
docs: /components/grid-list 0.00% 0.00% 57,300 57,300 -1 -1
docs: /components/hidden 0.00% 0.00% 55,100 55,100 -1 -1
docs: /components/icons 0.00% 0.00% 146,000 146,000 -1 -1
docs: /components/links 0.00% 0.00% 50,500 50,500 -1 -1
docs: /components/lists 0.00% 0.00% 157,000 157,000 -1 -1
docs: /components/menus 0.00% 0.00% 89,400 89,400 -1 -1
docs: /components/modal 0.00% 0.00% 37,300 37,300 -1 -1
docs: /components/no-ssr 0.00% 0.00% 15,800 15,800 -1 -1
docs: /components/paper 0.00% 0.00% 9,510 9,510 -1 -1
docs: /components/pickers 0.00% 0.00% 196,000 196,000 -1 -1
docs: /components/popover 0.00% 0.00% 70,100 70,100 -1 -1
docs: /components/popper 0.00% 0.00% 118,000 118,000 -1 -1
docs: /components/portal 0.00% 0.00% 12,100 12,100 -1 -1
docs: /components/progress 0.00% 0.00% 103,000 103,000 -1 -1
docs: /components/radio-buttons 0.00% 0.00% 58,800 58,800 -1 -1
docs: /components/rating 0.00% 0.00% 51,600 51,600 -1 -1
docs: /components/selects 0.00% 0.00% 170,000 170,000 -1 -1
docs: /components/slider 0.00% 0.00% 80,200 80,200 -1 -1
docs: /components/snackbars 0.00% 0.00% 121,000 121,000 -1 -1
docs: /components/speed-dial 0.00% 0.00% 55,400 55,400 -1 -1
docs: /components/steppers 0.00% 0.00% 208,000 208,000 -1 -1
docs: /components/switches 0.00% 0.00% 77,900 77,900 -1 -1
docs: /components/tables 0.00% 0.00% 756,000 756,000 -1 -1
docs: /components/tabs 0.00% 0.00% 168,000 168,000 -1 -1
docs: /components/text-fields 0.00% 0.00% 313,000 313,000 -1 -1
docs: /components/textarea-autosize 0.00% 0.00% 9,750 9,750 -1 -1
docs: /components/toggle-button 0.00% 0.00% 22,300 22,300 -1 -1
docs: /components/tooltips 0.00% 0.00% 96,000 96,000 -1 -1
docs: /components/transfer-list 0.00% 0.00% 48,800 48,800 -1 -1
docs: /components/transitions 0.00% 0.00% 58,400 58,400 -1 -1
docs: /components/typography 0.00% 0.00% 39,700 39,700 -1 -1
docs: /components/use-media-query 0.00% 0.00% 60,600 60,600 -1 -1
docs: /customization/breakpoints 0.00% 0.00% 80,500 80,500 -1 -1
docs: /customization/color 0.00% 0.00% 99,900 99,900 -1 -1
docs: /customization/components 0.00% 0.00% 165,000 165,000 -1 -1
docs: /customization/default-theme 0.00% 0.00% 55,500 55,500 -1 -1
docs: /customization/density 0.00% 0.00% 39,700 39,700 -1 -1
docs: /customization/globals 0.00% 0.00% 19,800 19,800 -1 -1
docs: /customization/palette 0.00% 0.00% 57,500 57,500 -1 -1
docs: /customization/spacing 0.00% 0.00% 12,600 12,600 -1 -1
docs: /customization/themes 0.00% 0.00% 62,800 62,800 -1 -1
docs: /customization/typography 0.00% 0.00% 428,000 428,000 -1 -1
docs: /customization/z-index 0.00% 0.00% 9,730 9,730 -1 -1
docs: /discover-more/backers 0.00% 0.00% 6,840 6,840 -1 -1
docs: /discover-more/changelog 0.00% 0.00% 3,560 3,560 -1 -1
docs: /discover-more/community 0.00% 0.00% 5,440 5,440 -1 -1
docs: /discover-more/governance 0.00% 0.00% 6,800 6,800 -1 -1
docs: /discover-more/languages 0.00% 0.00% 10,600 10,600 -1 -1
docs: /discover-more/related-projects 0.00% 0.00% 18,800 18,800 -1 -1
docs: /discover-more/roadmap 0.00% 0.00% 6,610 6,610 -1 -1
docs: /discover-more/showcase +0.14% 🔺 0.00% 72,500 72,600 -1 -1
docs: /discover-more/team 0.00% 0.00% 22,800 22,800 -1 -1
docs: /discover-more/vision 0.00% 0.00% 19,100 19,100 -1 -1
docs: /getting-started/example-projects 0.00% 0.00% 24,000 24,000 -1 -1
docs: /getting-started/faq 0.00% 0.00% 154,000 154,000 -1 -1
docs: /getting-started/installation 0.00% 0.00% 31,600 31,600 -1 -1
docs: /getting-started/learn 0.00% 0.00% 37,300 37,300 -1 -1
docs: /getting-started/page-layout-examples 0.00% 0.00% 30,000 30,000 -1 -1
docs: /getting-started/page-layout-examples/album 0.00% 0.00% 10,800 10,800 -1 -1
docs: /getting-started/page-layout-examples/blog 0.00% 0.00% 33,500 33,500 -1 -1
docs: /getting-started/page-layout-examples/checkout +0.19% 🔺 0.00% 51,800 51,900 -1 -1
docs: /getting-started/page-layout-examples/dashboard 0.00% 0.00% 391,000 391,000 -1 -1
docs: /getting-started/page-layout-examples/pricing 0.00% 0.00% 22,500 22,500 -1 -1
docs: /getting-started/page-layout-examples/sign-in 0.00% 0.00% 49,400 49,400 -1 -1
docs: /getting-started/page-layout-examples/sign-in-side 0.00% 0.00% 49,700 49,700 -1 -1
docs: /getting-started/page-layout-examples/sign-up 0.00% 0.00% 49,900 49,900 -1 -1
docs: /getting-started/page-layout-examples/sticky-footer 0.00% 0.00% 2,090 2,090 -1 -1
docs: /getting-started/supported-components 0.00% 0.00% 73,800 73,800 -1 -1
docs: /getting-started/supported-platforms 0.00% 0.00% 23,800 23,800 -1 -1
docs: /getting-started/usage 0.00% 0.00% 32,200 32,200 -1 -1
docs: /guides/api 0.00% 0.00% 62,100 62,100 -1 -1
docs: /guides/composition 0.00% 0.00% 104,000 104,000 -1 -1
docs: /guides/flow 0.00% 0.00% 6,690 6,690 -1 -1
docs: /guides/interoperability 0.00% 0.00% 187,000 187,000 -1 -1
docs: /guides/migration-v0x 0.00% 0.00% 52,300 52,300 -1 -1
docs: /guides/migration-v3 0.00% 0.00% 131,000 131,000 -1 -1
docs: /guides/minimizing-bundle-size 0.00% 0.00% 45,500 45,500 -1 -1
docs: /guides/responsive-ui 0.00% 0.00% 14,400 14,400 -1 -1
docs: /guides/right-to-left 0.00% 0.00% 49,800 49,800 -1 -1
docs: /guides/server-rendering 0.00% 0.00% 58,500 58,500 -1 -1
docs: /guides/testing 0.00% 0.00% 53,900 53,900 -1 -1
docs: /guides/typescript 0.00% 0.00% 80,100 80,100 -1 -1
docs: /performance/table-component 0.00% 0.00% 1,340 1,340 -1 -1
docs: /performance/table-emotion 0.00% 0.00% 25,900 25,900 -1 -1
docs: /performance/table-hook 0.00% 0.00% 1,420 1,420 -1 -1
docs: /performance/table-mui 0.00% 0.00% 6,750 6,750 -1 -1
docs: /performance/table-raw 0.00% 0.00% 1,110 1,110 -1 -1
docs: /performance/table-styled-components 0.00% 0.00% 44,700 44,700 -1 -1
docs: /premium-themes/onepirate +0.18% 🔺 0.00% 55,300 55,400 -1 -1
docs: /premium-themes/onepirate/forgot-password 0.00% 0.00% 83,400 83,400 -1 -1
docs: /premium-themes/onepirate/privacy 0.00% 0.00% 76,200 76,200 -1 -1
docs: /premium-themes/onepirate/sign-in +0.12% 🔺 0.00% 83,700 83,800 -1 -1
docs: /premium-themes/onepirate/sign-up +0.12% 🔺 0.00% 83,900 84,000 -1 -1
docs: /premium-themes/onepirate/terms 0.00% 0.00% 99,000 99,000 -1 -1
docs: /premium-themes/paperbase 0.00% 0.00% 59,600 59,600 -1 -1
docs: /styles/advanced 0.00% 0.00% 241,000 241,000 -1 -1
docs: /styles/api 0.00% 0.00% 126,000 126,000 -1 -1
docs: /styles/basics 0.00% 0.00% 89,700 89,700 -1 -1
docs: /system/api 0.00% 0.00% 77,700 77,700 -1 -1
docs: /system/basics 0.00% 0.00% 191,000 191,000 -1 -1
docs: /system/borders 0.00% 0.00% 40,100 40,100 -1 -1
docs: /system/display 0.00% 0.00% 59,800 59,800 -1 -1
docs: /system/flexbox 0.00% 0.00% 70,100 70,100 -1 -1
docs: /system/palette 0.00% 0.00% 29,400 29,400 -1 -1
docs: /system/positions 0.00% 0.00% 23,800 23,800 -1 -1
docs: /system/shadows 0.00% 0.00% 23,400 23,400 -1 -1
docs: /system/sizing 0.00% 0.00% 31,700 31,700 -1 -1
docs: /system/spacing 0.00% 0.00% 51,500 51,500 -1 -1
docs: /system/typography 0.00% 0.00% 46,900 46,900 -1 -1
docs: /versions 0.00% 0.00% 77,100 77,100 -1 -1

Generated by 🚫 dangerJS against 1b0a7ef

@eps1lon eps1lon marked this pull request as ready for review July 24, 2019 19:24
@oliviertassinari
Copy link
Member

Does the change solve any of the open accessibility issues with the Select component?

@eps1lon
Copy link
Member Author

eps1lon commented Jul 25, 2019

Does the change solve any of the open accessibility issues with the Select component?

Good point. Should improve what screen reader announces by removing the misleading aria-pressed and specifying that it has a listbox as a popup.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
accessibility a11y component: select This is the name of the generic UI component, not the React module!
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants