MUI v5: Autocomplete component is not accessible

Viewed 312

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:

  1. Turn on screen reader
  2. Go to codesandbox
  3. Tab to the select dropdown
  4. 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 },
];
0 Answers
Related