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

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 🌎

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