How to fix 'missing form label' error in Material UI Select using chrome WAVE tool

Question

I am using material UI Select and we are using chrome WAVE tool to fix ADA issues. An error of 'Missing form label' is coming on material UI Select like in the below screenshot. Can anyone help me to solve this issue. Thanks in advance.

wave tool: https://chrome.google.com/webstore/detail/wave-evaluation-tool/jbbplnpkjmmeebjpijfedlgcdilocofh

code:

import React from 'react';
import { makeStyles } from '@material-ui/core/styles';
import InputLabel from '@material-ui/core/InputLabel';
import MenuItem from '@material-ui/core/MenuItem';
import FormHelperText from '@material-ui/core/FormHelperText';
import FormControl from '@material-ui/core/FormControl';
import Select from '@material-ui/core/Select';

const useStyles = makeStyles((theme) => ({
formControl: {
margin: theme.spacing(1),
minWidth: 120,
},
selectEmpty: {
marginTop: theme.spacing(2),
},
}));

export default function SimpleSelect() {
const classes = useStyles();
const [age, setAge] = React.useState('');

 const handleChange = (event) => {
 setAge(event.target.value);
 };

  return (
  <div>
  <FormControl className={classes.formControl}>
    <InputLabel id="demo-simple-select-label">Age</InputLabel>
    <Select
      labelId="demo-simple-select-label"
      id="demo-simple-select"
      value={age}
      onChange={handleChange}
    >
      <MenuItem value={10}>Ten</MenuItem>
      <MenuItem value={20}>Twenty</MenuItem>
      <MenuItem value={30}>Thirty</MenuItem>
    </Select>
  </FormControl>
  </div>
 );
  }

screenshot:

Answer 1

The error says that the input element, which by the way is aria-hidden="true", has no label.

I think it's a problem similar to the one reported about TablePagination answered here, and to the one about TextareaAutosize discussed here. The element is always hidden to screen readers and the select behavior is implemented with javascript.

WAVE plugin is reporting the error because they prefer report more than less, in case the hidden element is shown at some point like they explain here.

Answer 2

I have found one solution for it. Just add htmlFor="demo-simple-select-placeholder-label" in InputLabel tag to rmove the 'missing form label' error.

Answer 3

I was able to get the warning to go away by adding htmlFor={'input-id'} to the InputLabel, and adding inputProps={{id: 'input-id'}} to the Select.