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

[shreevidya-ibm]

Package

@carbon/react

Browser

Chrome

Operating System

MacOS

Package version

v1.62.1

React version

v18.2.0

Automated testing tool and ruleset

IBM Equal Access Accessibility Checker - latest deployment

Assistive technology

MacOS VoiceOver

Description

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

Recommended fix:
Interactive elements (e.g., < Button role="button" >) should be allowed and functional inside a DefinitionTooltip 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
• Analyze 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

[guidari]

Hey @shreevidya-ibm
Tooltips do not support interactive elements. You can use Toggletip instead.
Docs: https://carbondesignsystem.com/components/tooltip/usage/#overview

[shreevidya-ibm]

Hi @guidari , I find the same issue with Toggletip component as well. Please advise

[shreevidya-ibm]

Created a similar issue for Toggletip: #18499