[a11y]: Icon in Small Toggle Causing Violation (Doesn't use aria-hidden or aria-label)

[RachelGHogan]

Package

@carbon/react

Browser

No response

Operating System

MacOS

Package version

1.66.0

React version

No response

Automated testing tool and ruleset

IBM Equal Access Accessibility Checker v3.1.75.9999

Assistive technology

No response

Description

When a small toggle is clicked, a checkmark icon appears on the toggle which is setting off the accessibility scanner, as it doesn't have a label or aria-hidden set to true like the rest of the carbon icons. Violation shown below in storybook and stackblitz:

WCAG 2.1 Violation

No response

Reproduction/example

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

Steps to reproduce

1. Open the stackblitz link from the above reproduction section
2. Open preview in a new tab (the accessibility scanner doesn't work well otherwise)
3. Toggle the button to the on position so the checkmark becomes visible
4. Run the accessibility scanner

Suggested Severity

None

Code of Conduct

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

[alina-jacob]

Duplicate issue: #17223

[2nikhiltom]

Hey! It seems you'll need to open the component in a separate iframe and run an accessibility scan. This ensures only the component is tested. I didn't encounter the issue during my scan. The violations you're seeing might be caused by testing it directly in Storybook.

Screen.Recording.2024-10-07.at.20.11.24.mov