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.95k stars 32.27k forks source link

[Textfield] A select is not accessible, its missing the names #44319

Open BennyAlex opened 1 week ago

BennyAlex commented 1 week ago

Steps to reproduce

image

Link to live example: (required)

The input is marked as aria-hidden so it is not visible to the screenreader. This causes the input not having a name or label.

Current behavior

No response

Expected behavior

Inputs & Selects are named and labeled correctly for screenreaders

Context

No response

Your environment

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

Search keywords: accessible

BennyAlex commented 1 week ago

This could also be an issue of having the wrong id targeting:

the label id is: "demo-simple-select-label" where as the div has aria-labelledby="demo-simple-select-label demo-simple-select" image

mnajdova commented 5 hours ago

I am testing with Voice Over and it reads correctly,

Screenshot 2024-11-15 at 12 02 48

Can you expend on what you would expect, or what's not working as expected?