search

mui / material-ui

Material UI: Comprehensive React component library that implements Google's Material Design. Free forever.
https://mui.com/material-ui/
MIT License
93.97k stars 32.28k forks source link

Setting Select to be readOnly does not have proper setup for Accessibility #36524

Open marcusjwhelan opened 1 year ago

marcusjwhelan commented 1 year ago

Duplicates

Latest version

Steps to reproduce 🕹

Link to live example:

Steps:

  1. Set readOnly in InputProps for the Select
  2. Use Jaws 2023 to hear that the select field is "Read Only"
  3. Jaws does not announce read only for the field. This is the case in the documents on the mui website as well.

Current behavior 😯

No response

Expected behavior 🤔

Jaws 2023 does not read off "read only" for the field. I have tried several different ways and posted this Issue after enough searching online for a solution.

Context 🔦

For the Select component to announce read only when set to read only in some capacity.

Your environment 🌎

npx @mui/envinfo ``` Don't forget to mention which browser you used. Output from `npx @mui/envinfo` goes here. ```
michaldudak commented 1 year ago

I don't have access to JAWS currently, but it seems that both NVDA and VoiceOver ignore the aria-readonly attribute on a combobox. Have you seen any examples of custom select components that have this working properly?

marcusjwhelan commented 1 year ago

@michaldudak no, I have not, I searched many search engines and stackoverflow for any solutions but what comes up is just setting the select field to disabled. Which screen readers normally do not even announce they exist. As I have seen with all Mui components. If "disabled" they are not in the tab order anymore. So setting "readOnly" is really important to work on all input components so that the field is at least announced, with "read only" preferably.

michaldudak commented 1 year ago

We could set their aria-disabled instead so they still are focusable and should be announced by screen readers.

marcusjwhelan commented 1 year ago

@michaldudak That is an option which we do implement so we can focus but the the main issue that I think needs solving is hearing "read only" when somehow setting the "select" component to "readOnly". I tried doing it through many prop options of Select. I was thinking maybe an example of providing our own "Input" element that possible has readonly on it? I have gone into the html and directly edited everything and adding different attributes but was unable to get jaws to announce any kind of "read only" statement. I think something with the component composition might be off, the order in which the select component is created via many components.

michaldudak commented 1 year ago

Another option would be to dynamically change aria-label based on the read-only state - this could be done in userland.

According to the spec, aria-readonly should work with role=combobox. I'd suggest reporting a problem to screen readers' authors so it's implemented correctly.

marcusjwhelan commented 1 year ago

I would agree, but the thing is material ui breaks the rules of html as far as screen readers are concerned. The input is not noticed by the screen reader because it is hidden with a negative tab index. https://ux.stackexchange.com/a/34083