MUI v5:无法访问自动完成组件

big*_*ato 5 reactjs material-ui

我正在尝试使用 MUI v5 的Autocomplete组件。我需要让它变得可访问。

但是,我注意到屏幕阅读器没有宣布下拉菜单打开/关闭的时间。

有没有办法添加必要的aria-*属性?打开/关闭状态是组件内部的,所以我不知道如何撬开它并使用类似的东西来切换它,aria-expanded={open ? "true" : "false"}因为open不是可用的属性...

代码沙箱链接:https://codesandbox.io/s/combobox-material-demo-forked-d9joi

屏幕阅读器:https://chrome.google.com/webstore/detail/screen-reader/kgejglhpjiefppelpmljglcjbhoiplfn?hl =en

重现步骤:

  1. 打开屏幕阅读器
  2. 前往代码和盒子
  3. Tab 到选择下拉列表
  4. 按向下箭头 + ESC 打开和关闭组件。屏幕阅读器不会宣布它
import * as React from "react";
import TextField from "@mui/material/TextField";
import Autocomplete from "@mui/material/Autocomplete";

export default function ComboBox() {
  return (
    <Autocomplete
      disablePortal
      id="combo-box-demo"
      options={top100Films}
      openOnFocus={true}
      sx={{ width: 300 }}
      renderInput={(params) => <TextField {...params} label="Movie" />}
    />
  );
}

const top100Films = [
  { label: "The Shawshank Redemption", year: 1994 },
];
Run Code Online (Sandbox Code Playgroud)