Skip to content
New issue

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

fix(a11y): control label text color #120

Merged
merged 1 commit into from
May 8, 2024

Conversation

huyenltnguyen
Copy link
Member

Checklist:

The ControlLabel component doesn't have text color set, so it has been using the default color (black), which makes the text unreadable in dark theme:

Screenshot 2024-05-07 at 23 41 07

The issue can be seen here: https://opensource.freecodecamp.org/ui/?path=/story/components-formgroup--default&globals=backgrounds.value:!hex(0a0a23).

This PR adds a default text color to the component.


The root cause is actually a little deeper.

We are removing global-element-styles.css as part of #61 so I don't bother updating the file.

Also, the issue luckily doesn't affect /learn. The element does need to fall back to the body text color, which is also secondary-color, but this token exists there: https://github.com/freeCodeCamp/freeCodeCamp/blob/50d7f03763e7d64690391bc7a004eccbdd75156d/client/src/components/layouts/variables.css#L43.

Screenshot

Light Dark
Screenshot 2024-05-07 at 23 40 39 Screenshot 2024-05-07 at 23 40 33

@huyenltnguyen huyenltnguyen requested a review from a team as a code owner May 7, 2024 16:57
@huyenltnguyen huyenltnguyen merged commit bbe314b into freeCodeCamp:main May 8, 2024
5 checks passed
@huyenltnguyen huyenltnguyen deleted the fix/control-label branch May 8, 2024 03:47
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

2 participants