[a11y]: MultiSelect - Accesibility checker reports an issue with nested buttons for selected options

[matas-at-ibm]

Package

carbon-components-react

Browser

Chrome, Firefox

Operating System

MacOS

Package version

v7.59.4

React version

v17.0.2

Automated testing tool and ruleset

IBM Equal Access Accessibility Checker - Latest Deployment

Assistive technology

No response

Description

The list box component is a button, and the tag component (a descendant of the list box) that allows the clearance of selected options is also a button which causes the nested button issue(4.1.2)

WCAG 2.1 Violation

4.1.2

Reproduction/example

https://stackblitz.com/edit/github-verpba?file=src/App.jsx

Steps to reproduce

1. Visit carbon dropdown usage examples:
   • in the official documentation
   • or in storybook
2. Select MultiSelect variant in the example
3. Select a couple of options inside the multi-select input
4. Run the IBM Equal Access Accessibility Checker scan

Code of Conduct

• I agree to follow this project's Code of Conduct
• I checked the current issues for duplicate problems

[tw15egan]

This is resolved with #13173, which was merged recently. It will be included in @carbon/[email protected] which will be released in the next week