Accessibility issues with keyboard navigation Autocomplete

[martha]

Steps to reproduce

A) In Autocomplete, the Clear button is not accessible by keyboard. To reproduce:

1. Visit Combo box example
2. Select an option, then press tab

Expected: Focus moves to the now-visible Clear button
Current: Focus moves out of the example

My workaround:

slotProps={{
  clearIndicator: {
    tabIndex: 0,
    // In order to make the Clear Button focusable, disable the default behavior of hiding it except on hover
    sx: {
      visibility: 'visible',
    },
  },
}}

However, with this workaround, the clear button can only be activated with Space. Ideally, it would be activated with either Space or Enter.

B) In Autocomplete with Multi, pressing Enter when focused on a selected dropdown element causes the element to get deleted. To reproduce:

1. Visit Multiple Values example, press Reset Focus button
2. Press Tab then down-arrow to open the combobox
3. Press Enter

Current: The selected option is deleted from the selection.
Expected: My expectation is that the dropdown would close, and the selected option would stay selected. (But perhaps this is intended behavior?)

C) In Autocomplete with Multi, when navigating with Voiceover, after deleting an option, focus returns to the document body. To reproduce:

1. Visit Multiple Values example
2. Enter an option or two.
3. Using VO, ctrl-option(or capslock)-left to select an option and delete.

Current: Focus shifts to the document body
Expected: Focus remains on the autocomplete component. (Perhaps this a bug with VO, not MUI?)

D) In Autocomplete with Multi, users should be able to tab around the selected options. To reproduce:

1. Visit Multiple Values example
2. Select multiple options, then press shift-tab.

Expected: Focus moves to the option chips
Current: Focus moves out of the example. Option chips can only be focused using left-right arrows. Relates to other issues with chip accessibility #20470, but I think this is a separate problem specific to chips within Autocomplete.

Current behavior

No response

Expected behavior

No response

Context

Hi MUI maintainers! While my team was auditing our app's accessibility, we came across a few things that we thought were accessibility problems within the Autocomplete component. Since we couldn't find existing issues for these, we wanted to create an issue to discuss with you. Let us know, which ones of these are desired behavior, which you'd consider bugs, and which may be fixed with the upcoming work on #25365!

I'll add the caveat that we are not screenreader users, ourselves.

This is my first time creating an issue in the MUI repo. Please let me know if anything else would be helpful. Thanks!

Related issues:

• [Autocomplete] Update to ARIA 1.2 #25365
• [RFC] Chip markup #20470

Your environment

Tested using examples in the current MUI docs (see links above), using VoiceOver on Chrome.

Search keywords: accessibility autocomplete