[a11y]: disabled TextInput's helper text not programmatically linked

[dakahn]

Package

carbon-components-react

Browser

No response

Operating System

No response

Package version

latest

Automated testing tool and ruleset

Accessibility Checker (IBM)

Assistive technology

No response

Description

TextInput's helper text is not programmatically linked to the input causing an accessibility violation for color contrast on the helper text when the input is disabled

WCAG 2.1 Violation

No response

CodeSandbox example

https://codesandbox.io/s/github/carbon-design-system/carbon/tree/main/packages/react/examples/codesandbox

Steps to reproduce

Go to the Carbon TextInput(and potentially others) and make sure it's disabled. Then run A11y Checker on it to see the error

Code of Conduct

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

[tombrunet]

@dakahn I don't think the CodeSandbox example is what you intended. If this is related to our prior discussion, the net of the issue is for any TextInput with helper text and not just disabled ones. You just don't see an error unless it's disabled. All text inputs with helper text should have the helper text associated via aria-describedby.

[tombrunet]

I started to look into doing a PR for this, but not sure what to do with one bit of the code:
https://github.com/tombrunet/carbon/blob/issue-9630/packages/react/src/components/TextInput/util.js

If I add aria-describedby for helpertext, it would conflict with invalid / warn. Not sure how you want to handle that. I assume concatenate, but, would leave that to you.

Otherwise, I'd add a helperId to https://github.com/tombrunet/carbon/blob/issue-9630/packages/react/src/internal/useNormalizedInputProps.js and then add the helperId to the helper text in https://github.com/tombrunet/carbon/edit/issue-9630/packages/react/src/components/TextInput/TextInput.js .

[dakahn]

I'm taking a look at this this sprint @tombrunet so thanks for the headstart! And yeah I just had the default codesandbox example -- my bad