I am trying to use MUI v5's Autocomplete component. I need to make it accessible.
However, I noticed that the screen reader is not announcing when the dropdown is open / closed.
Is there a way to add the necessary aria-* attributes? The open / closed state is internal to the component so I don't see how I can pry it open and toggle it using something like aria-expanded={open ? "true" : "false"} since open isn't an available property...
Code sandbox link: https://codesandbox.io/s/combobox-material-demo-forked-d9joi
Screen reader: https://chrome.google.com/webstore/detail/screen-reader/kgejglhpjiefppelpmljglcjbhoiplfn?hl=en
Steps to reproduce:
- Turn on screen reader
- Go to codesandbox
- Tab to the select dropdown
- Press arrow down + ESC to open and close the component. The screen reader doesn't announce it
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 },
];