[a11y]: AILabel has a11y Violation - Accessible name does not match or contain the visible label text

[2nikhiltom]

Package

@carbon/react

Browser

No response

Operating System

No response

Package version

1.72.0

React version

No response

Automated testing tool and ruleset

IBM Accessibility Checker version 3.1.75 onwards till latest deployment

Assistive technology

No response

Description

Checker throws Accessible name does not match or contain the visible label text Violation on [AILabel component ]

Violation only seen on IBM Accessibility Checker version 3.1.75 and later versions (seen on latest deployment as well )
(Here)

Visually, the button displays two spans: "AI" and "Text goes here"
The aria-label on button is set to "AI Text goes here" (with a space)

The space between "AI" and "Text goes here" creates a discrepancy between the visual text and the accessible name.
aria-label="AI Text goes here" -> removing the space in label fixes the violation

https://deploy-preview-17351--v11-carbon-react.netlify.app/iframe.html?args=&globals=&id=components-ailabel--default&viewMode=story

WCAG 2.1 Violation

No response

Reproduction/example

https://deploy-preview-17351--v11-carbon-react.netlify.app/iframe.html?args=&globals=&id=components-ailabel--default&viewMode=story

https://react.carbondesignsystem.com/iframe.html?args=&globals=&id=components-ailabel--default&viewMode=story

Steps to reproduce

visit expandable AILabel storybook - https://react.carbondesignsystem.com/iframe.html?args=&globals=&id=components-ailabel--default&viewMode=story
run Accessibility Checker with 3.1.75 and later versions

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]

I'm not Yes I'm able to reproduce using the following:

• Page tested: https://react.carbondesignsystem.com/?path=/story/components-tabs--playground **
• Page tested: https://react.carbondesignsystem.com/iframe.html?args=&globals=&id=components-ailabel--default&viewMode=story
• Browser: Chrome
• Checker: v 3.1.78 (not 3.1.75 as reported above)
• Settings: Preview Rules and IBM Accessibility 7.3

** I had previously tested the wrong page

[philljenkins]

my concern was why the aria-label= was being redundantly used?
The text is already visible and set as the "accessible name" on the button for everyone without the attribute.