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
重现步骤:
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)
| 归档时间: |
|
| 查看次数: |
743 次 |
| 最近记录: |