如何使用 chrome WAVE 工具修复 Material UI Select 中的“缺少表单标签”错误答案

【问题标题】：How to fix 'missing form label' error in Material UI Select using chrome WAVE tool如何使用 chrome WAVE 工具修复 Material UI Select 中的“缺少表单标签”错误
【发布时间】：2021-02-23 15:09:51
【问题描述】：

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

波形工具：https://chrome.google.com/webstore/detail/wave-evaluation-tool/jbbplnpkjmmeebjpijfedlgcdilocofh

代码：

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

截图：

【问题讨论】：

标签： material-ui accessibility

【解决方案1】：

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

【讨论】：

【解决方案2】：

错误提示输入元素，顺便说一下aria-hidden="true"，没有标签。

我认为这是一个类似于the one reported about TablePagination answered here 和the one about TextareaAutosize discussed here 的问题。该元素始终对屏幕阅读器隐藏，并且选择行为是使用 javascript 实现的。

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

【讨论】：