[material-next][Chip] Implement slots pattern and improve focus state #39171
Labels
component: chip
This is the name of the generic UI component, not the React module!
design: material you
enhancement
This is not a bug, nor a new feature
Implement slots pattern in
material-next
's Chip, deprecatingavatar
,icon
, anddeleteIcon
props (but still supporting these). It should follow Joy UI's Chip slot implementation as closely as possible.It might also be worth looking into following Joy's action slot implementation, which would help us improve the Material UI Chip's focus management. Before starting this work, we should design how the focus should work on deletable and clickable-and-deletable chips. This is a gap we need to fill as Material You's specs are not really specific: https://m3.material.io/components/chips/accessibility#ac07be63-3071-41fe-aef3-ccce6bdaf7a4.
For deletable Chips, should the focus:
backspace
/delete
(this is how v5 works)space
/enter
space
/enter
/backspace
/delete
backspace
/delete
if the focus is on the entire chip and withspace
/enter
if the focus is on the delete iconAnd with that in mind, how should the clickable-and-deletable chips focus work?
This issue includes both the slots and focus work, as they're closely related in the API, UI, and UX design phase, but maybe after that, we can split it.
Implementing Joy's chip architecture could also help with accessibility issues: #20470
The text was updated successfully, but these errors were encountered: