[RFC] Chip markup

Regarding https://material-ui.com/components/chips/#chip-2

Problem

Chips currently have both a bad a11y and UX story:

• delete action is inaccessible on iOS devices (and requires knowledge of keyboard shortcuts in any other screen reader)
• deleteable Chips are announced as buttons
• clicking the delete icon triggers the same ripple as clicking the Chip itself. The ripple shouldn’t bubble to elements that are not activated.
• a deleteable button is by default selectable but not a basic Chip. Why?
• demos illustrates a trailing icon that is not used as the delete action. Having it trigger onDelete is misleading (adressed in #16097)

Current implementation

This uses terminology from the accessibility tree. A <button> does not necessarily represent a HTMLButtonElement

• Basic: <generic tabindex="-1">Basic</generic>
• clickable: <button>Clickable</button>
• deleteable: <button>Deleteable <SVGRoot aria-hidden="true" focusable="false">...</SVGRoot></button>
• deletable + clickable: <button tabindex="0">Clickable deleteable <SVGRoot aria-hidden="true" focusable="false">...</SVGRoot></button>

Proposal

• don’t nest interactive elements
• whether the delete action should be in tab order is a hard question. I lean towards having it in tab order and making it easily customizale (for grid-like implementations or Autocomplete)

Basic

-<generic tabindex="-1">Basic</generic>
+<generic>Basic</generic>

Clickable

These are fine.

deleteable

-<button>Deleteable <SVGRoot aria-hidden="true" focusable="false">...</SVGRoot></button>
+<generic>Deleteable<button><SVGRoot>...</SVGRoot></button></generic>

deletable + clickable

-<button tabindex="0">Clickable deleteable <SVGRoot aria-hidden="true" focusable="false">...</SVGRoot></button>
+<generic><button tabindex="0">Clickable deleteable</button><button tabindex="0"><SVGRoot aria-hidden="true" focusable="false">...</SVGRoot></button></generic>

Context

#17708 Closes #19468

[siriwatknp]

@eps1lon What do you think if we introduce ChipButton specifically for the clickable chips? Because at any point, it is either non-clickable or clickable (it reminds me of the <ListItem button> case)

<Chip>text</Chip> // simple chip, renders `div`
<ChipButton>text</ChipButton> // clickable chip, renders `button`
<ChipButton component={Link}>text</ChipButton> // renders `a`

Also get rid of the deletable prop in favor of start/endDecorator + ChipDelete component (A small component that provides the built-in close icon which developers can change the icon via theming).

<Chip endDecorator={<DeleteIcon />}>text</Chip> // simple chip with icon
<Chip endDecorator={<ChipDelete />}>text</Chip> // simple chip with delete button
<Chip endDecorator={<ChipDelete icon={<Trash />} />}>text</Chip> // simple chip with delete button (custom delete icon)

For clickable + deletable chip, use Chip that contains a button inside:

<Chip endDecorator={<ChipDelete onClick={...} />}><button>Text</button></Chip>

This will match the markup in your comment

[marcosvega91]

I’m running into this when I see that delete button is really tricky to test with testing-library. The new implementation seams very interesting 💯