Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
DiegoAndai opened this issue Sep 26, 2023 · 0 comments
Open
Assignees
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

Comments

@DiegoAndai
Copy link
Member

DiegoAndai commented Sep 26, 2023

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

@DiegoAndai DiegoAndai added component: chip This is the name of the generic UI component, not the React module! enhancement This is not a bug, nor a new feature design: material you labels Sep 26, 2023
@DiegoAndai DiegoAndai added this to the v6 milestone Sep 26, 2023
@DiegoAndai DiegoAndai self-assigned this Sep 26, 2023
@DiegoAndai DiegoAndai moved this to Backlog in Joy UI Sep 26, 2023
@danilo-leal danilo-leal moved this to Backlog in Material UI Dec 1, 2023
@danilo-leal danilo-leal removed this from the Material UI v6 milestone Dec 1, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
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
Projects
Status: Backlog
Status: Backlog
Development

No branches or pull requests

2 participants