[a11y]: Toggle component causing Accessibility Requirement 1.31 violation

[odeliap]

Package

@carbon/react

Browser

Chrome

Operating System

MacOS

Package version

^1.40.0

React version

^18.2.0

Automated testing tool and ruleset

IBM Equal Access Accessibility Checker

Assistive technology

N/A

Description

I am seeing the Accessibility Requirement 1.31 violation Element "button" should not be focusable within the subtle of an element with an 'aria-hidden' attribute with value 'true' whenever we create a Toggle with hideLabel and have labelText set to a label with a Tooltip component wrapping a button.

The Toggle component appears to be adding aria-hidden="true" when hideLabel is included, which is causing this error here because the tooltip generates a button, and a button should not be focusable (as it is) within a subtree where 'aria-hidden' is set to "true", as the error describes. But, to keep visual formatting with toggle only having a side-label, we cannot remove hideLabel nor the Tooltip component wrapping a button from the label as we would like to have only a side-label with the tooltip and no top-level label on the toggle.

Requesting the Toggle component be updated to support Tooltip components that wrap buttons in the labelText when hideLabel is set so that we can still have labelText replace the side labels and the toggle not render a top level without causing accessibility issues here.

WCAG 2.1 Violation

Accessibility Requirement 1.31

Reproduction/example

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

Steps to reproduce

Create a Toggle component with hideLabel set to "true" and labelText set to some text with a Tooltip component wrapping a button.

Suggested Severity

Severity 2 = User cannot complete task, and/or no workaround within the user experience of a given component.

Code of Conduct

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

[Gururajj77]

The prop labelText accepts the type string, please refer labelText prop documentation at https://react.carbondesignsystem.com/?path=/story/components-toggle--default.

If you omit labelText, the component internally shifts how it handles the click and toggle events, so that you don't get two events.