bug(mdc-chips): there is no correct way to implement aria button interaction pattern

[zarend]

trafficstars

Description

With the mdc-based chips component there is no way to correctly implement chips that follow the aria button interaction pattern. For example, I would like to make a chip that performs an action when clicked (e.g. increment a counter on click). I would expect this chip to be a native <button/> element or an element with role="button".

Possible Solutions Considered

listbox

<mat-chip-listbox/> is not an appropriate choice because it is for the ARIA listbox interaction pattern, which is not appropriate for chips that perform an action when clicked.

grid

<mat-chip-grid> is also no an appropriate choice because it is part of chips that are a free form input.

<mat-chip-set> and <mat-chip>

<mat-chip-set> and <mat-chip> allow the developer to set the aria role. Although, they are not designed to be interactive. This is the a solution that gets close to implementing ARIA button from my Stackblitz Components Issue #25633

<mat-chip-set role="group">
  <mat-chip role="button" tabindex="0" (click)="count = count + 1">
    Increment Count
  </mat-chip>
  <mat-chip role="button" tabindex="0" (click)="count = count - 1" disabled>
    Decrement Count
  </mat-chip>
</mat-chip-set>

This implementation has issues with strong focus not being available and disabled attribute not being present in the DOM.

Work-Around

For a work-around, we suggest using a native button element and adding styles to give it the chip appearance (e.g. border-radius and other styles).

<button class="example-button-with-chip-appearance">Increment Count</button>

[zarend]

cc @mmalerba @crisbeto