[a11y]: Unable to have an interactive element with role="button" inside Toggletip

[shreevidya-ibm]

Package

@carbon/react

Browser

Chrome

Operating System

MacOS

Package version

v1.62.1

React version

No response

Automated testing tool and ruleset

IBM Equal Access Accessibility Checker - latest deployment

Assistive technology

No response

Description

There is an accessibility issue when attempting to use an interactive element, such as a button with role="button", inside the Toggletip component. The Toggletip implementation does not not seem to support or accommodate interactive child elements.

Recommended fix:
Interactive elements (e.g., < Button role="button" >) should be allowed and functional inside the Toggletip component.

WCAG 2.1 Violation

No response

Reproduction/example

https://stackblitz.com/edit/github-qktfqi5o?file=src%2FApp.jsx

Steps to reproduce

• Open the Target Web Page
• Open Developer Tools
• Navigate to the Accessibility Assessment Tab
• Run the IBM Equal Access Accessibility Checker
• Analyse the Violation stating 'The element with role "button" contains descendants with roles "button" which are ignored by browsers'

Suggested Severity

None

Code of Conduct

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