[Select] Form Control examples that contain Select do not pass WAVE accessibility for labels

[marcusjwhelan]

Duplicates

• I have searched the existing issues

Latest version

• I have tested the latest version

Current behavior 😯

Using wave on the Select component examples has the error on all select fields

Missing form label

A form control does not have a corresponding label.

I was finally able to fix the issue like this

<FormControl sx={{ minWidth: 120 }}>
  <InputLabel id={'label-for-category'} htmlFor={'category-select-input-id'}>Category</InputLabel>
  <Select
    label={'Category'}
    labelId={'label-for-category'}
    id={'category-select'}
    value={state.category}
    inputProps={{'id': 'category-select-input-id'}}
    onChange={(event) => handleChange(event, 'category')}
  >
    <MenuItem value={''}>
      <em>None</em>
    </MenuItem>
    <MenuItem value={10}>School</MenuItem>
    <MenuItem value={20}>Work</MenuItem>
    <MenuItem value={30}>Vacation</MenuItem>
  </Select>
</FormControl>

Where I needed to add an htmlFor to the label and add the associated id to the inputProps of the Select

The only select examples that do not have this error are the native examples because they have aria-label on them.

Expected behavior 🤔

Examples to pass WAVE when on the bottom of the page there are directions on how to pass accessibility but these in fact don't work for the form Control label. Removing them actually doesn't add any errors.

Steps to reproduce 🕹

Steps:

1. Go to Select component model example page
2. Run Wave

Context 🔦

Proper examples for accessibility

Your environment 🌎

`npx @mui/envinfo`

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

[luchn49]

The reason is that the id prop isn't broadcasted down to InputComponent (from here).

When using the native prop, the id would be broadcasted down to the select element and associated with the label. But it might lead to other issues:

• The list items are rendered as a li with menuitem role instead of option element —> not able to open the menu 🤦🏽‍♂️
• There’re new issues that are kind of similar to the original issue...

---

BTW, not sure if anyone is already working on a fix. If not, I'd be happy to make a contribution.

[dharshi1614]

Hi

[dharshi1614]

I would like to solve multi line input error any suggestions on this

[dharshi1614]

Iam trying to contact the participants but couldn’t do it.please share ur email id so that I can connect n discuss

[nate-summercook]

How come there hasn't been any movement on this issue? Does the mui project not care about accessibility?
Judging from @luchn49 's comment it doesn't seem to be a documentation issue only, but a fundamental design problem.

As my project wants (and needs) to take accessibility seriously, such issues really cause a big pain for us, as we rely heavily on mui components.

[PenghaiZhang]

Any update on this issue in July 2024 ?? The product I am working on also needs to address this accessibility issue.

[guillenjs]

Are there any updates on this issue? I am still encountering this problem in MUI V6.1.6. This is also an issue on the documentation on your website. https://mui.com/material-ui/react-select/

When tested with WAVE there are 20 missing labels and 16 orphaned labels.

[fetters5]

I agree would love to know how to fix this so we can get make our compliance office happy

[guillenjs]

I think I have found a solution that is not included in the documentation.

For example this is the basic select provided in the documentation. If you use WAVE to test you will get the alert of Missin form label and orphaned label.

<FormControl fullWidth>
  <InputLabel id="demo-simple-select-label">Age</InputLabel>
  <Select
    labelId="demo-simple-select-label"
    id="demo-simple-select"
    value={age}
    label="Age"
    onChange={handleChange}
  >
    <MenuItem value={10}>Ten</MenuItem>
    <MenuItem value={20}>Twenty</MenuItem>
    <MenuItem value={30}>Thirty</MenuItem>
  </Select>
</FormControl>

Instead of adding the id as stated in the documentation you can use inputProps to add the
inputProps="demo-simple-select"
and on the inputLabel component add the following
htmlFor="demo-simple-select"

The final component looks like the following and it seems to make WAVE happen. Let me know if anyone has any thoughts.

<FormControl fullWidth>
   <InputLabel htmlFor="demo-simple-select" id="demo-simple-select-label"> Age </InputLabel>
     <Select
       labelId="demo-simple-select-label"
       value={age}
       label="Age"
       inputProps={{ id: "demo-simple-select" }}
       onChange={handleChange}
    >
       <MenuItem value={10}>Ten</MenuItem>
       <MenuItem value={20}>Twenty</MenuItem>
       <MenuItem value={30}>Thirty</MenuItem>
    </Select>
</FormControl>;