[docs][autocomplete] Add removal and navigation aria descriptions to Chip examples - #49086
Open
silviuaavram wants to merge 1 commit into
Open
[docs][autocomplete] Add removal and navigation aria descriptions to Chip examples#49086silviuaavram wants to merge 1 commit into
silviuaavram wants to merge 1 commit into
Conversation
silviuaavram
requested review from
ZeeshanTamboli and
siriwatknp
and
a lite review from Copilot
September 4, 2026 08:23
silviuaavram
added
docs
silviuaavram
changed the title
Deploy previewBundle size
Check out the code infra dashboard for more information about this PR. |
Contributor
There was a problem hiding this comment.
🟢 Approval recommended
The changes are localized to docs demos and consistently apply the intended aria-description guidance without introducing functional or type issues in the reviewed code.
Pull request overview
This PR improves accessibility in the Material UI Autocomplete “chips/tags” documentation demos by adding screen reader guidance for (1) navigating from the input to selected chips and (2) removing chips via keyboard.
Changes:
- Adds
aria-descriptionto selected chips (viaslotProps.chipor explicit<Chip aria-description=... />) to announce Backspace/Delete removal behavior. - Adds
aria-descriptionto the underlying input (slotProps.htmlInput) to announce Arrow Left navigation to selected items when at least one item is selected. - Updates several demos from
defaultValueto controlledvalue+onChangeso the narrated “N selected” count stays accurate.
File summaries
| File | Description |
|---|---|
| docs/data/material/components/autocomplete/Tags.tsx | Adds input + chip aria-description and controlled state to keep selected-count narration accurate. |
| docs/data/material/components/autocomplete/Tags.js | JS equivalent of the Tags demo a11y + state updates. |
| docs/data/material/components/autocomplete/Sizes.tsx | Adds a11y descriptions to the multi-select “sizes” variants and controls value for accurate narration. |
| docs/data/material/components/autocomplete/Sizes.js | JS equivalent of the Sizes demo a11y + state updates. |
| docs/data/material/components/autocomplete/LimitTags.tsx.preview | Updates preview snippet to match the new controlled-value demo API usage. |
| docs/data/material/components/autocomplete/LimitTags.tsx | Adds chip/input aria-description and controlled state to keep selected-count narration accurate. |
| docs/data/material/components/autocomplete/LimitTags.js | JS equivalent of the LimitTags demo a11y + state updates. |
| docs/data/material/components/autocomplete/FixedTags.tsx | Adds conditional chip removal narration (only for removable chips) plus input selected-count narration. |
| docs/data/material/components/autocomplete/FixedTags.js | JS equivalent of the FixedTags demo a11y updates. |
| docs/data/material/components/autocomplete/CheckboxesTags.tsx | Adds chip/input aria-description and controlled value to support accurate selected-count narration. |
| docs/data/material/components/autocomplete/CheckboxesTags.js | JS equivalent of the CheckboxesTags demo a11y + state updates. |
| docs/data/material/components/autocomplete/autocomplete.md | Documents the recommended aria-description additions and translation guidance. |
Review details
- Files reviewed: 12/12 changed files
- Comments generated: 0
- Review effort level: Lite
💡 Add a code-review agent skill or configure MCP servers for context-aware, tailored reviews. Learn more in the docs.
silviuaavram
force-pushed
the
docs/improve-autocomplete-chips-a11y
branch
from
September 8, 2026 13:38
a5f5334 to
9476763
Compare
Contributor
There was a problem hiding this comment.
🟡 Changes recommended
The FixedTags navigation hint must account for disabled chips and only promise navigation to removable selected items.
Once you've addressed the issues Copilot identified, you can request another Copilot review.
Review details
- Files reviewed: 12/12 changed files
- Comments generated: 2
- Review effort level: Balanced
Comment on lines
+51
to
+54
| 'aria-description': | ||
| value.length > 0 | ||
| ? `${value.length} selected. From the start of the input, press Left Arrow to focus the selected items` | ||
| : undefined, |
Member
There was a problem hiding this comment.
Actually it is not skipped, you can focus, but you can't interact with it anyhow.
Comment on lines
+51
to
+54
| 'aria-description': | ||
| value.length > 0 | ||
| ? `${value.length} selected. From the start of the input, press Left Arrow to focus the selected items` | ||
| : undefined, |
mnajdova
reviewed
Sep 9, 2026
mnajdova
left a comment
mnajdova
left a comment
Member
There was a problem hiding this comment.
In general it looks good, let's just make sure we handled fixed/disabled tags.
Comment on lines
+51
to
+54
| 'aria-description': | ||
| value.length > 0 | ||
| ? `${value.length} selected. From the start of the input, press Left Arrow to focus the selected items` | ||
| : undefined, |
Member
There was a problem hiding this comment.
Actually it is not skipped, you can focus, but you can't interact with it anyhow.
silviuaavram
requested review from
mnajdova
and
a balanced review from Copilot
September 10, 2026 12:44
Contributor
There was a problem hiding this comment.
🟢 Approval recommended
The accessibility hints accurately reflect current keyboard behavior and are consistently applied across the affected demos.
Review details
- Files reviewed: 12/12 changed files
- Comments generated: 0 new
- Review effort level: Balanced
mnajdova
approved these changes
Sep 10, 2026
silviuaavram
force-pushed
the
docs/improve-autocomplete-chips-a11y
branch
from
September 10, 2026 13:08
9476763 to
e1119a9
Compare
silviuaavram
force-pushed
the
docs/improve-autocomplete-chips-a11y
branch
from
September 11, 2026 13:18
e1119a9 to
00a19a5
Compare
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Starting from mui/base-ui#5628, we are applying the same improvements to Material UI's Autocomplete Chips examples.