[Select] Required and Error states not correctly configured for screen readers

[ben-pomelo]

Steps to reproduce

Steps:

1. Open the url https://mui.com/material-ui/react-select/
2. Inspect the code in browser
3. Try navigation with screen reader and observe the following two issues:

Error state is not set on the div with role="combobox". It should have aria-invalid="true". See the MDN Aria docs for more details.

Required state is not set on the div with role="combobox". It should have aria-required="true". See the MDN Aria docs for more details.

Current behavior

Error state is not set on the div with role="combobox". It is set on the input component, but since this is aria-hidden="true", screen readers do not report this to users.

<div tabindex="0" role="combobox" aria-controls=":Rilaalap9l6kud6:" aria-expanded="false" aria-haspopup="listbox" aria-labelledby="demo-simple-select-error-label demo-simple-select-error" id="demo-simple-select-error" class="MuiSelect-select MuiSelect-outlined Mui-error MuiInputBase-input MuiOutlinedInput-input css-mp9f0v"><span class="notranslate" aria-hidden="true">​</span></div>

Required state is not set on the div with role="combobox". It is set on the input component, but since this is aria-hidden="true", screen readers do not report this to users.

<div tabindex="0" role="combobox" aria-controls=":Rilailap9l6kud6:" aria-expanded="false" aria-haspopup="listbox" aria-labelledby="demo-simple-select-required-label demo-simple-select-required" id="demo-simple-select-required" class="MuiSelect-select MuiSelect-outlined MuiInputBase-input MuiOutlinedInput-input css-mp9f0v"><span class="notranslate" aria-hidden="true">​</span></div>

Note that other MUI form fields do both of these correctly by having the standard required or the aria-invalid="true" properties on the correct input component which is NOT aria-hidden="true". This is only a problem with the Select component.

Expected behavior

Error state is set on the div with role="combobox".

<div aria-invalid="true" tabindex="0" role="combobox" aria-controls=":Rilaalap9l6kud6:" aria-expanded="false" aria-haspopup="listbox" aria-labelledby="demo-simple-select-error-label demo-simple-select-error" id="demo-simple-select-error" class="MuiSelect-select MuiSelect-outlined Mui-error MuiInputBase-input MuiOutlinedInput-input css-mp9f0v"><span class="notranslate" aria-hidden="true">​</span></div>

Required state is set on the div with role="combobox".

<div aria-required="true" tabindex="0" role="combobox" aria-controls=":Rilailap9l6kud6:" aria-expanded="false" aria-haspopup="listbox" aria-labelledby="demo-simple-select-required-label demo-simple-select-required" id="demo-simple-select-required" class="MuiSelect-select MuiSelect-outlined MuiInputBase-input MuiOutlinedInput-input css-mp9f0v"><span class="notranslate" aria-hidden="true">​</span></div>

Context

This is important for screen readers to read and interact with Select components. It's necessary to pass an accessibility audit.

Your environment

npx @mui/envinfo

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

Search keywords: accessibility aria-required aria-invalid select

[github-actions]

This issue has been closed. If you have a similar problem but not exactly the same, please open a new issue.
Now, if you have additional information related to this issue or things that could help future readers, feel free to leave a comment.

Note

@ben-pomelo How did we do? Your experience with our support team matters to us. If you have a moment, please share your thoughts in this short Support Satisfaction survey.