Duplicates
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:
- Go to Select component model example page
- 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.
Duplicates
Latest version
Current behavior 😯
Using wave on the Select component examples has the error on all select fields
Missing form labelA form control does not have a corresponding label.I was finally able to fix the issue like this
Where I needed to add an
htmlForto the label and add the associatedidto theinputPropsof theSelectThe only select examples that do not have this error are the native examples because they have
aria-labelon 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:
Context 🔦
Proper examples for accessibility
Your environment 🌎
`npx @mui/envinfo`