search

mui / material-ui

Material UI: Ready-to-use foundational React components, free forever. It includes Material UI, which implements Google's Material Design.
https://mui.com/material-ui/
MIT License
93.01k stars 32.04k forks source link

[Select] VoiceOver & Chrome on native select is not announcing the newly chosen option when the select menu is closed #19563

Open ahayes91 opened 4 years ago

ahayes91 commented 4 years ago

Current Behavior 😯

When using the native select and I'm closing any of the dropdowns, I'm hearing the previous selection being announced rather than what's being shown currently. If I navigate away with tab, and back again, the announcement is correct. This doesn't seem to be an issue with VoiceOver on Safari (Mac OS) or ChromeVox on Chrome (Acer Chromebook 14).

Expected Behavior 🤔

I would expect the new selection to be announced when I closed the select menu, as per https://www.w3schools.com/tags/tryit.asp?filename=tryhtml_select.

Steps to Reproduce 🕹

Steps:

  1. Turn on VoiceOver and open https://material-ui.com/components/selects/#native-select in Chrome.
  2. Tab navigate to the first example.
  3. "Age, collapsed, button" will be announced.
  4. Press Space, "menu 4 items tick" will be announced.
  5. Arrow key down to "Ten" and press Space key - "Ten, Age, collapsed, button" will be announced.
  6. Open the menu with Space, arrow key down, choose another option "Twenty". "Closing menu, Ten, Age, collapsed, button" will be announced.
  7. Open the menu with Space, arrow key down, choose another option "Thirty". "Closing menu, Twenty, Age, collapsed, button" will be announced.

Context 🔦

It's misleading for a screenreader user to announce the old selection after interacting with the select.

Your Environment 🌎

Tech Version
Material-UI v4.9.1
MacOS Catalina 10.15.3
Chrome Version 79.0.3945.130 (Official Build) (64-bit)
eps1lon commented 4 years ago

As usual thank you very much for the high quality issue.

Is everything working as expected with the "just" react: https://codesandbox.io/s/react-select-nce90 ?

ahayes91 commented 4 years ago

As usual thank you very much for the high quality issue.

Is everything working as expected with the "just" react: https://codesandbox.io/s/react-select-nce90 ?

Just tested https://codesandbox.io/s/react-select-nce90, thanks for setting that up - the same issue is not present there.

  1. Turn on VoiceOver and open https://material-ui.com/components/selects/#native-select in Chrome.
  2. Tab navigate to the Age select example.
  3. "Age, collapsed, button" will be announced.
  4. Press Space, "menu 4 items tick" will be announced.
  5. Arrow key down to "Ten" and press Space key - "Closing menu, Ten, Age, collapsed, button" will be announced.
  6. Open the menu with Space, arrow key down, choose another option "Twenty". "Closing menu, Twenty, Age, collapsed, button" will be announced.
  7. Open the menu with Space, arrow key down, choose another option "Thirty". "Closing menu, Thirty, Age, collapsed, button" will be announced.