Skip to content

[material-next][Chip] Implement slots pattern and improve focus state #39171

@DiegoAndai

Description

@DiegoAndai

Implement slots pattern in material-next's Chip, deprecating avatar, icon, and deleteIcon 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:

  1. Land on the entire deletable chip and be deleted with backspace/delete (this is how v5 works)
  2. Land only on the delete icon and be deleted with space/enter
  3. Land only on the delete icon and be deleted with space/enter/backspace/delete
  4. Land on both, deleting with backspace/delete if the focus is on the entire chip and with space/enter if the focus is on the delete icon

And 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

Metadata

Metadata

Assignees

Labels

design: material youscope: chipChanges related to the chip.type: enhancementIt’s an improvement, but we can’t make up our mind whether it's a bug fix or a new feature.

Projects

Status

Backlog

Status

No status

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions