[chip] Interactive chips

[mj12albert]

Experiment: https://deploy-preview-47890--material-ui.netlify.app/experiments/material-ui-interactive-chips/

#20470

• I have followed (at least) the PR section of the contributing guide.

[mui-bot]

Netlify deploy preview

https://deploy-preview-47890--material-ui.netlify.app/

Bundle size report

Bundle size will be reported once CircleCI build #899662 finishes.

Generated by 🚫 dangerJS against 1a87081

[mj12albert]

@silviuaavram @siriwatknp what do you think about splitting up Chip?

Splitting off from the "static" chip gives the "interactive" chip a stable slots structure, which ensures both the "action" slot (button or link) and "delete button" slot are exposed to AT correctly as buttons, which solves the main a11y problem (nested button structure)

The current Material UI and mui-joy derives "interactive vs static" (and "interactive-ness") from various props like onClick and onDelete, causing the "action" slot to be dependent on props at runtime which doesn't seem ideal

[siriwatknp]

If my understanding is correct, your intention is:

• non-breaking change and may be deprecated some props on the Chip component?

My concerns:

• ChipButton does not render button as root element, this might be confusing for user to pass other button related props or handler like onKeyDown, etc. like this <ChipButton slotProps={{ button: { onKeyDown: … } }} /> which is not intuitive.
• ChipLink kinda break from the pattern where we tell people to use <Button component={NextLink} /> if they want to get the same styles as Button but with link functionality. Since ChipLink does not have different styles than ChipButton, why don't we use the existing pattern? do I miss any extra feature of ChipLink?

With that said, how about this structure from user perspective:

<Chip>
  <ChipButton />
  <ChipDelete />
</Chip>

Also, now that we can fully utilize :has() so styles can be achieved in the structure above.

The above still using the same Chip which can be non-breaking change since the v7 version does not support children prop.