fix(components): improve dark-mode error message contrast#2489
Open
amir-ba wants to merge 1 commit into
Open
Conversation
Introduces a shared dark-mode token alias for danger/error text colors across helper-text, checkbox, radio-button, combobox, input, text-field, and textarea components, meeting WCAG 1.4.11 non-text contrast requirements. Additionally fixes counter error colors in input, text-field, and textarea to use the same token, ensuring consistent error text appearance in dark mode. Closes #2093 Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
Contributor
There was a problem hiding this comment.
Pull request overview
This PR improves dark-mode accessibility by introducing a shared CSS custom property for form error message text color and migrating multiple components to use it, with added E2E coverage to prevent regressions.
Changes:
- Adds global token
--scl-color-form-error-messagewith light/dark (andprefers-color-scheme) mappings. - Updates affected component styles to consume
--scl-color-form-error-message(with fallbacks) for error/helper text coloring. - Adds E2E assertions for dark-mode error/helper text colors in
helper-textandcheckbox.
Reviewed changes
Copilot reviewed 11 out of 11 changed files in this pull request and generated 5 comments.
Show a summary per file
| File | Description |
|---|---|
| packages/components/src/global/scale.css | Introduces --scl-color-form-error-message and defines its light/dark + OS-preference behavior. |
| packages/components/src/components/textarea/textarea.css | Switches meta error color token to the shared error-message variable. |
| packages/components/src/components/text-field/text-field.css | Switches meta/helper error colors to the shared error-message variable and reformats some selectors. |
| packages/components/src/components/radio-button/radio-button.css | Uses the shared error-message variable for helper-text error color. |
| packages/components/src/components/radio-button-group/radio-button-group.css | Uses the shared error-message variable for error helper text color. |
| packages/components/src/components/input/input.css | Uses the shared error-message variable for helper text/counter error color; minor formatting changes. |
| packages/components/src/components/helper-text/helper-text.css | Uses the shared error-message variable for danger variant color. |
| packages/components/src/components/combobox/combobox.css | Uses the shared error-message variable for danger color; minor formatting changes. |
| packages/components/src/components/helper-text/helper-text.e2e.ts | Adds E2E assertion for dark-mode danger color. |
| packages/components/src/components/checkbox/checkbox.css | Uses the shared error-message variable for helper-text and error icon color. |
| packages/components/src/components/checkbox/checkbox.e2e.ts | Adds E2E assertion for dark-mode helper-text error color. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
Comment on lines
+28
to
+33
| const color = await page.$eval( | ||
| 'scale-helper-text', | ||
| (element: HTMLElement) => | ||
| getComputedStyle( | ||
| element.shadowRoot.querySelector('.helper-text') as HTMLElement | ||
| ).color |
Comment on lines
+28
to
+36
| const color = await page.$eval( | ||
| 'scale-helper-text', | ||
| (element: HTMLElement) => | ||
| getComputedStyle( | ||
| element.shadowRoot.querySelector('.helper-text') as HTMLElement | ||
| ).color | ||
| ); | ||
|
|
||
| expect(color).toBe('rgb(251, 106, 85)'); |
Comment on lines
+23
to
+31
| const page = await newE2EPage(); | ||
| await page.setContent( | ||
| '<div data-mode="dark"><scale-checkbox label="Label" helper-text="This is the error message" invalid></scale-checkbox></div>' | ||
| ); | ||
|
|
||
| const color = await page.$eval( | ||
| 'scale-checkbox [part="helper-text"]', | ||
| (element: HTMLElement) => getComputedStyle(element).color | ||
| ); |
| (element: HTMLElement) => getComputedStyle(element).color | ||
| ); | ||
|
|
||
| expect(color).toBe('rgb(251, 106, 85)'); |
Comment on lines
+73
to
+76
| --color-helper-text-error: var( | ||
| --scl-color-form-error-message, | ||
| var(--color-meta-error) | ||
| ); |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Problem
In dark mode, error message text has insufficient contrast (WCAG 1.4.11). Introduces shared token
--scl-color-form-error-messagethat switches to a higher-contrast color in dark mode.Affected Components
helper-text, checkbox, radio-button, radio-button-group, combobox, input, text-field, textarea
Tests
E2E tests added for helper-text and checkbox dark-mode colors. All 404 component tests pass.
Closes #2093