Блог

Я использую material UI Select, и мы используем chrome WAVE tool для устранения проблем с ADA. При выборе материала в пользовательском интерфейсе появляется ошибка «Отсутствует метка формы», как показано на скриншоте ниже. Кто-нибудь может помочь мне решить эту проблему. Заранее спасибо.

инструмент 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>
 );
  }
 

скриншот:

Ошибка говорит о том, что входной элемент, который, кстати, есть aria-hidden="true" , не имеет метки.

Я думаю, что это проблема, аналогичная той, о которой сообщалось о TablePagination, отвеченной здесь, и о TextareaAutosize, обсуждаемой здесь . Элемент всегда скрыт для программ чтения с экрана, а поведение выбора реализовано с помощью javascript.

Плагин WAVE сообщает об ошибке, потому что они предпочитают сообщать больше, чем меньше, в случае, если скрытый элемент отображается в какой-то момент, как они объясняют здесь .

Я нашел для этого одно решение. Просто добавьте htmlFor="demo-simple-select-placeholder-label" InputLabel тег, чтобы исправить ошибку «отсутствующая метка формы».

Я смог убрать предупреждение, добавив htmlFor={'input-id'} к InputLabel , и добавив inputProps={{id: 'input-id'}} к Select .