Material ui 如何使用chrome WAVE工具修复材质UI选择中的“缺少表单标签”错误

我正在使用MaterialUI选择，我们正在使用chrome WAVE工具修复ADA问题。“缺少表单标签”错误出现在物料UI选择上，如下面的屏幕截图所示。谁能帮我解决这个问题。提前谢谢

波浪工具：

代码：

---

屏幕截图：

错误表明输入元素没有标签，顺便说一下，输入元素是aria hidden=true

我认为这是一个类似于和的问题。元素对于屏幕阅读器总是隐藏的，选择行为是用javascript实现的

---

WAVE插件报告错误是因为他们更喜欢报告，而不是报告更少，以防隐藏元素在某个点显示。

我找到了一个解决方案。只需在InputLabel标记中添加htmlFor=demo simple select placeholder label，即可消除“缺少表单标签”错误

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>
 );
  }