bug(mat-chip): Accessibility issue: Interactive controls must not be nested

[tek-moglykisvergad]

Is this a regression?

• [ ] Yes, this behavior used to work in the previous version

The previous version in which this bug was not present was

No response

Description

When running the axe DevTools extension, any mat-chip that contains a button with matChipRemove has the following accessibility issue Interactive controls must not be nested.

The following screenshot gives more details on the issue:

Suggested solution:

Reproduction

Steps to reproduce:

1. Download the axe DevTools extension: https://chrome.google.com/webstore/detail/axe-devtools-web-accessib/lhdoppojpmngadmnindnejefpokejbdd?hl=en-US
2. Navigate to the angular material chips' examples: https://material.angular.io/components/chips/examples
3. Run the axe DevTools on the entire page

Expected Behavior

No accessibility issues for mat-chip under "Serious"

Actual Behavior

"Interactive controls must not be nested" accessibility issue

Environment

• Angular: 13
• CDK/Material: 13
• Browser(s): Google Chrome Version 98.0.4758.102 (Official Build) (64-bit)
• Operating System (e.g. Windows, macOS, Ubuntu): Windows

[jelbourn]

This issue should be addressed in the MDC-based version of the chips, which splits the chips components into three variants: role="grid", role="listbox", and no role. The remove button should only be used with the role="grid" pattern in the new implementation.

[egarkavy]

Any update on this? Mabe some lifehacks which can take off the button in button and put them together instead of parent > child in the container?

[jelbourn]

The MDC-based chips will be promoted to stable in v15

[amysorto]

Closing this issue since the MDC based chips are going to be in v15 which will be released soon

[angular-automatic-lock-bot[bot]]

This issue has been automatically locked due to inactivity. Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}