[docs] Improve a11y for checkbox lists - #49111
Conversation
silviuaavram
added
docs
Deploy previewBundle size
Check out the code infra dashboard for more information about this PR. |
4aa14a0 to
e39b344
Compare
There was a problem hiding this comment.
🟡 Changes recommended
The Transfer List demos now render role="menu" containers without accessible names, making it hard for assistive tech users to distinguish the two menus.
Once you've addressed the issues Copilot identified, you can request another Copilot review.
Pull request overview
Improves accessibility of the Lists “Checkbox” demo and Transfer List demos by ensuring the interactive rows expose their checked state via ARIA and by updating the docs text to describe the new interaction model.
Changes:
- Replace nested
<Checkbox />controls inside list rows with row-levelrole="checkbox"/role="menuitemcheckbox"+aria-checked, using checked/unchecked icons as the visual indicator. - Update Transfer List demos to use menu semantics for keyboard navigation and to expose selection state on each row.
- Update Lists documentation copy to describe the new a11y behavior and interaction (row toggles on click/Space).
File summaries
| File | Description |
|---|---|
| docs/data/material/components/transfer-list/TransferList.tsx | Uses menuitemcheckbox semantics and icons for selection state in the Transfer List demo. |
| docs/data/material/components/transfer-list/TransferList.js | JS version of the same Transfer List a11y updates. |
| docs/data/material/components/transfer-list/SelectAllTransferList.tsx | Uses menuitemcheckbox semantics and icons for selection state in the “Select All” Transfer List demo. |
| docs/data/material/components/transfer-list/SelectAllTransferList.js | JS version of the same “Select All” Transfer List a11y updates. |
| docs/data/material/components/lists/lists.md | Updates documentation text explaining the primary-action checkbox row behavior. |
| docs/data/material/components/lists/CheckboxList.tsx | Converts the row to an ARIA checkbox and improves the comment button labeling. |
| docs/data/material/components/lists/CheckboxList.js | JS version of the same Checkbox List demo updates. |
Review details
- Files reviewed: 7/7 changed files
- Comments generated: 4
- Review effort level: Lite
💡 Add a code-review agent skill or configure MCP servers for context-aware, tailored reviews. Learn more in the docs.
d6bd0f7 to
adf384e
Compare
mnajdova
left a comment
mnajdova
left a comment
There was a problem hiding this comment.
The Checkbox example is narrated much better 👌
On the transfer list, when checking/unchecking there is no announcement, also it's kind a funny that it narrates to close the menu press escape, but nothing happens. Is there a better aria role we could use there?
There was a problem hiding this comment.
🟡 Changes recommended
The advertised ARIA model conflicts with the implementation, and the enhanced demo passes two unused accessibility props.
Once you've addressed the issues Copilot identified, you can request another Copilot review.
Review details
Suppressed comments (1)
docs/data/material/components/transfer-list/SelectAllTransferList.tsx:202
- This second
aria-labelis also discarded byCustomList, so it has no effect on the rendered listbox. Remove it (and regenerate the JavaScript demo), or add and consume a corresponding prop inCustomList.
aria-label="select all chosen"
- Files reviewed: 8/8 changed files
- Comments generated: 2
- Review effort level: Balanced
4f76e08 to
6028de2
Compare
There was a problem hiding this comment.
🟡 Changes recommended
Transfer actions focus listbox containers without identifying an active option, and the generated enhanced demo contains dead props absent from its TypeScript source.
Once you've addressed the issues Copilot identified, you can request another Copilot review.
Review details
Suppressed comments (1)
docs/data/material/components/transfer-list/SelectAllTransferList.js:199
- This second
aria-labelis also ignored byCustomListand has no TypeScript counterpart. Remove the dead prop so the generated JavaScript demo matches its TypeScript source (AGENTS.md:59-65).
aria-label="select all chosen"
- Files reviewed: 8/8 changed files
- Comments generated: 3
- Review effort level: Balanced
There was a problem hiding this comment.
🟡 Changes recommended
Both transfer-list demos fail to restore focus when items are moved into an empty destination.
Once you've addressed the issues Copilot identified, you can request another Copilot review.
Review details
- Files reviewed: 8/8 changed files
- Comments generated: 2
- Review effort level: Balanced
b495d46 to
902f20e
Compare
902f20e to
1418596
Compare
Fixes #34427.
Improve accessibility in the Checkbox List, Basic Transfer List, and Enhanced Transfer List demos by exposing each item's state on the focusable element.
role="checkbox"andaria-checked, and give comment buttons item-specific labels.listbox,option,aria-multiselectable, andaria-selectedto expose selection.Replace nested item checkboxes with decorative icons in all three demos. Update the documentation to explain checkbox interaction and transfer list accessibility, including the ARIA reference pattern, labeling, and focus management.