Accessibility Issue - Switch Control Missing Associated Label

[parul-26]

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

No response

Description

the error we are getting :

In the Carbon Design System, the toggle control with the switch role is missing an associated label. This causes a accessibility violation, as it makes the control unusable for screen reader users.

WCAG 2.1 Violation

No response

Reproduction/example

Component: Toggle (With Accessible Labels) URL:https://react.carbondesignsystem.com/?path=/story/components-toggle--with-accessible-labels

Steps to reproduce

1. Open the Carbon Design System documentation for the Toggle component.
2. Navigate to the "With Accessible Labels" section.
3. Inspect the toggle control with the switch role.
4. Observe that the control lacks an associated label, resulting in an accessibility violation.

Suggested Severity

None

Code of Conduct

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

[philljenkins]

The 3rd toggle button is being flagged as missing a label:
Code from the DOM that is being flagged

<div>
   <div id="toggle-6-label" style="margin-block-end: 0.5rem;">Internal aria-label toggle</div>
   <div class="cds--toggle">
      <button aria-label="Internal aria-label toggle" 
         id="toggle-6" class="cds--toggle__button" role="switch" type="button" aria-checked="false"></button>
      <div id="toggle-6_label" for="toggle-6" class="cds--toggle__label">
         <div class="cds--toggle__appearance">
            <div class="cds--toggle__switch"></div>
         </div>
      </div>
   </div>
</div>

JAWS correctly reads the label (only once) for each toggle-button and whether"on" or "off".