Skip to content

[autocomplete] Fix item removal when it receives focus from VoiceOver before using Backspace#48572

Merged
silviuaavram merged 6 commits into
mui:masterfrom
silviuaavram:fix/autocomomplete-voiceover-remove-item
Jun 1, 2026
Merged

[autocomplete] Fix item removal when it receives focus from VoiceOver before using Backspace#48572
silviuaavram merged 6 commits into
mui:masterfrom
silviuaavram:fix/autocomomplete-voiceover-remove-item

Conversation

@silviuaavram

@silviuaavram silviuaavram commented May 26, 2026

Copy link
Copy Markdown
Member

When focus on the selected items, in a multiple selection autocomplete, comes from a non native keyboard event, we are not updating the state with the focused item. In the issue case, the focus comes from VoiceOver navigation. Also, VoiceOver is sending another Backspace event on the input immediately after it sent one to the Chip.

Consequently, instead of deleting the one focused item, we were deleting 3 items: focused one (actually a Chip delete handler), and 2 from the end, one because focusedItem was -1 (not updating according to VoiceOver focus) and one because of the extra input backspace event.

Fixes:

  • on item focus, sync the focusedItem state.
  • when we delete a chip with backspace, keep the deletion information in ref, and when the second Backspace event on the input happens, exit and restore the ref info. This is not ideal, but I can't figure anything better.

Added tests for the focusedItem sync only. The second case, related to VoiceOver sending another Backspace event on top of the Chip one, is impossible to unit test.

Fixes #44936

@silviuaavram silviuaavram added accessibility a11y scope: autocomplete Changes related to the autocomplete. This includes ComboBox. labels May 26, 2026
@silviuaavram silviuaavram changed the title Fix/autocomomplete voiceover remove item [autocomplete] Fix item removal when it receives focus from VoiceOver before using Backspace May 26, 2026
@code-infra-dashboard

code-infra-dashboard Bot commented May 26, 2026

Copy link
Copy Markdown

Deploy preview

https://deploy-preview-48572--material-ui.netlify.app/

Bundle size

Bundle Parsed size Gzip size
@mui/material 🔺+177B(+0.03%) 🔺+53B(+0.04%)
@mui/lab 0B(0.00%) 0B(0.00%)
@mui/private-theming 0B(0.00%) 0B(0.00%)
@mui/system 0B(0.00%) 0B(0.00%)
@mui/utils 0B(0.00%) 0B(0.00%)

Details of bundle changes


Check out the code infra dashboard for more information about this PR.

Copilot AI left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Pull request overview

This PR addresses an accessibility-related Autocomplete (multiple) regression where VoiceOver-driven focus/backspace interactions could cause extra chip removals by syncing focused chip state on focus and attempting to suppress a VoiceOver-specific synthetic Backspace.

Changes:

  • Add onFocus to tag/chip props to keep focusedItem in sync when focus comes from non-keyboard sources (e.g. VoiceOver navigation).
  • Add a ignoreNextBackspaceRef mechanism intended to suppress a synthetic Backspace event that VoiceOver dispatches to the input after chip deletion.
  • Update existing tag-navigation tests to use user.keyboard and add new tests to validate focused-chip removal behavior.

Reviewed changes

Copilot reviewed 2 out of 2 changed files in this pull request and generated 2 comments.

File Description
packages/mui-material/src/useAutocomplete/useAutocomplete.js Adds focused chip sync on focus and introduces a ref-based suppression for VoiceOver’s extra Backspace event.
packages/mui-material/src/Autocomplete/Autocomplete.test.js Migrates relevant tests to user.keyboard and adds assertions for removing only the focused chip.

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

Comment thread packages/mui-material/src/useAutocomplete/useAutocomplete.js
Comment thread packages/mui-material/src/Autocomplete/Autocomplete.test.js

Copilot AI left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Pull request overview

Copilot reviewed 2 out of 2 changed files in this pull request and generated 4 comments.

Comment thread packages/mui-material/src/useAutocomplete/useAutocomplete.js Outdated
Comment thread packages/mui-material/src/useAutocomplete/useAutocomplete.js Outdated
Comment thread packages/mui-material/src/useAutocomplete/useAutocomplete.js Outdated
Comment thread packages/mui-material/src/useAutocomplete/useAutocomplete.js
Comment thread packages/mui-material/src/useAutocomplete/useAutocomplete.js

Copilot AI left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Pull request overview

Copilot reviewed 2 out of 2 changed files in this pull request and generated 1 comment.

Comment thread packages/mui-material/src/useAutocomplete/useAutocomplete.js Outdated

@mj12albert mj12albert left a comment

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Looks good, tested the fix with VO+Chrome/Safari

@silviuaavram silviuaavram merged commit 8abcabf into mui:master Jun 1, 2026
18 checks passed
@silviuaavram silviuaavram deleted the fix/autocomomplete-voiceover-remove-item branch June 1, 2026 07:56
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

accessibility a11y scope: autocomplete Changes related to the autocomplete. This includes ComboBox.

Projects

None yet

Development

Successfully merging this pull request may close these issues.

[autocomplete] Accessibility issues with keyboard navigation

3 participants