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

Question

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

wave 工具：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>
 );
  }

截图：

Answer 1

我可以通过将

htmlFor={'input-id'}

添加到

InputLabel

并将

inputProps={{id: 'input-id'}}

添加到

Select

来让警告消失。

Answer 2

我找到了一种解决方案。只需在

htmlFor="demo-simple-select-placeholder-label"

标签中添加

InputLabel

即可消除“缺少表单标签”错误。

Answer 3

该错误表明输入元素（顺便说一句是

aria-hidden="true"

）没有标签。

我认为这是一个类似于这里回答的关于 TablePagination 的问题，以及这里讨论的关于 TextareaAutosize 的问题。该元素始终对屏幕阅读器隐藏，并且选择行为是使用 javascript 实现的。

WAVE 插件报告错误，因为他们更喜欢报告更多而不是更少，以防隐藏元素在某个时刻显示就像他们在这里解释的那样。

Answer 4

扩展

@mjwrazor

的答案

我在使用 NextJS、@mui、formik 和 tailwind 的

Chrome

浏览器中也面临同样级别的问题。

import {
  Box,
  Button,
  Checkbox,
  FormControl,
  FormHelperText,
  Grid,
  InputLabel,
  MenuItem,
  Select,
  styled,
  TextField,
  Typography,
} from "@mui/material"
import { ErrorMessage, Field, Form, Formik } from "formik"

早些时候我的源代码是-

<FormControl fullWidth className="mb-6">
  <InputLabel htmlFor="topic">
    {t("LABEL_ENQ_CHOOSE_A_TOPIC")}
  </InputLabel>
  <Field
    as={Select}
    id="topic"
    name="topic"
    variant="outlined"
    label={t("LABEL_ENQ_CHOOSE_A_TOPIC")}
  >
    <MenuItem value="Support">
      {t("LABEL_ENQ_SUPPORT")}
    </MenuItem>
    <MenuItem value="Service">
      {t("LABEL_ENQ_SERVICE")}
    </MenuItem>
    ....
    <MenuItem value="Other">{t("LABEL_ENQ_OTHER")}</MenuItem>
  </Field>
  <ErrorMessage name="topic" component={CustomFormHelperText} />
</FormControl>

并且出现错误问题 -

错误使用

<label for=FORM_ELEMENT>

标签的 for 属性通过名称引用表单字段，而不是其字段 ID。这可能会阻止浏览器正确自动填写表单 和辅助工具正常工作。为了解决这个问题， 通过 id 属性引用表单字段。

因此，我浏览了与表单相关的自定义元素是可标记元素，以及这篇SO帖子，上面提到的回复并做了以下更正，从

id

中删除了显式的

Field

属性，并通过

id

添加了

inputProps

属性和其余一切都将相同，这实际上解决了我的问题 -

...
<Field
    as={Select}
    name="topic"
    variant="outlined"
    label={t("LABEL_ENQ_CHOOSE_A_TOPIC")}
    inputProps={{id: "topic"}}
>
...

希望这能帮助很多人解决相关问题。