Autocomplete with groups throws accessibility scanner issues

[ArmandRedgate]

Steps to reproduce

Link to live example

Steps:

1. Create an autocomplete component with grouping enabled, same as the official example.

    <Autocomplete
      id="grouped-demo"
      options={options.sort((a, b) => -b.firstLetter.localeCompare(a.firstLetter))}
      groupBy={(option) => option.firstLetter}
      getOptionLabel={(option) => option.title}
      sx={{ width: 300 }}
      renderInput={(params) => <TextField {...params} label="With categories" />}
    />

3. Open the dropdown and scan with an accessibility tool like axe DevTools
   Note: you may need to force the autocomplete to stay open while you scan with open={true}

Current behavior

I get a bunch of errors around incorrect aria roles:

This is because <li /> are not allowed as children of listbox.

The current role structure is:

listbox
  generic <--- the group label
  list
    option
    option
    ...
  generic
  list
    option
    ...

Expected behavior

No accessibility errors.

To achieve this, you should follow the ARIA APG Listbox pattern which forms this role structure:

listbox
  group
    presentation <--- the group label
    option
    option
    ...
  group
    presentation
    option
    ...

This can be achieved in html like this

<div role="listbox">
   <ul role="group">
     <li role="presentation">
       Group 1
     </li>
     <li role="option">
        Option 1
     </li>
     ...
   </ul>
   <ul role="group">
     <li role="presentation">
       Group 2
     </li>
     <li role="option">
       Option 1
     </li>
     ...
   </ul>
</div>

In my case, I achieved this in the Autocomplete component with fully custom rendering (renderOption, renderGroup), but I wouldn't expect most users to do this.

Context

I was trying to create a grouped autocomplete list.

My company is a paying customer, our support key / order number is 65425

Your environment

npx @mui/envinfo

  System:
    OS: Windows 11 10.0.22631
  Binaries:
    Node: 21.5.0 - C:\Program Files\nodejs\node.EXE
    npm: 10.2.4 - C:\Program Files\nodejs\npm.CMD
    pnpm: Not Found
  Browsers:
    Chrome: Not Found
    Edge: Chromium (126.0.2592.68)

Search keywords: autocomplete accessibility roles