[a11y]: cds-text-input shadow <label> is not formally associated with the internal <input>, causing axe/WCAG "form element has no label" failures

Package

@carbon/web-components

Browser

Chrome

Operating System

No response

Package version

v2.6.0

React version

No response

Automated testing tool and ruleset

Axe dev tools

Assistive technology

No response

Description

The cds-text-input component renders a element inside its shadow root, but does not add a for="input" attribute to that label, and does not add aria-labelledby (or aria-label) to the internal . The two elements are therefore never formally associated in the accessibility tree. Axe reports a critical "Ensure every form element has a label" violation (WCAG 1.3.1 / 4.1.2).

Report state:

To solve this problem, you need to fix at least (1) of the following: Element does not have an implicit (wrapped) Element does not have an explicit aria-label attribute does not exist or is empty aria-labelledby attribute does not exist, references elements that do not exist or references elements that are empty Element has no title attribute Element has no placeholder attribute Element's default semantics were not overridden with role="none" or role="presentation"

WCAG 2.1 Violation

No response

Reproduction/example

https://stackblitz.com/edit/github-5vlzjbdy?file=index.html,src%2Findex.js,.sassrc

Steps to reproduce

Run axe on any page containing this component. The violation is particularly reproducible on readonly fields.

Suggested Severity

Medium (Severity 3) = User can complete task, and/or has a 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