We read every piece of feedback, and take your input very seriously.
To see all available qualifiers, see our documentation.
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
@carbon/react
Chrome
MacOS
v1.50.0
v17.0.2
Manual
No response
All fields should have visible text lables for easy user understanding
Even in disabled state, the text content should be visible.
https://stackblitz.com/edit/github-lu2ax9?file=src%2FApp.jsx
Run the code Observe the color difference for the disabled input field
The text was updated successfully, but these errors were encountered:
Hey @Vinodbs the Stackblitz is not working for me.
Sorry, something went wrong.
@Vinodbs Looks like your code sample is broken, however something to note is that disabled states are not subject to color contrast a11y rules. https://carbondesignsystem.com/elements/color/overview/#disabled
This might be what you were trying to show?
<TextInput placeholder="placeholder text" labelText="Text input label" disabled />
We purposely have the disabled state with low-contrast text. If you need this text to be readable, we recommend using the read-only state.
No branches or pull requests
Package
@carbon/react
Browser
Chrome
Operating System
MacOS
Package version
v1.50.0
React version
v17.0.2
Automated testing tool and ruleset
Manual
Assistive technology
No response
Description
All fields should have visible text lables for easy user understanding
Even in disabled state, the text content should be visible.
WCAG 2.1 Violation
No response
Reproduction/example
https://stackblitz.com/edit/github-lu2ax9?file=src%2FApp.jsx
Steps to reproduce
Run the code
Observe the color difference for the disabled input field
Code of Conduct
The text was updated successfully, but these errors were encountered: