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

Success/alert notification link text fails contrast check #1955

Closed
chosak opened this issue Apr 17, 2024 · 1 comment · Fixed by #1957
Closed

Success/alert notification link text fails contrast check #1955

chosak opened this issue Apr 17, 2024 · 1 comment · Fixed by #1957

Comments

@chosak
Copy link
Member

chosak commented Apr 17, 2024

Describe the bug
Our "success" and "error" notification link texts fail the Lighthouse accessibility check for foreground / background contrast.

To Reproduce
Steps to reproduce the behavior:

  1. Go to https://cfpb.github.io/design-system/components/alerts
  2. In Chrome developer tools, run a Lighthouse audit

Expected behavior
Link text contrast should pass accessibility checks.

Screenshots
image

Additional context
Discovered via automated GitHub Action here. See failing Lighthouse report here.

Success text is #0072ce (pacific) on #f0f8eb (green-10), which is 4.49:1.
Error text is #0072ce (pacific) on #fbefec (red-10), which is 4.34:1.

WCAG AA requirement is 4.5:1.

See previous related report at #1943; @anselmbradford tried to fix in #1944 but it seems this broke somewhere, maybe in #1919?

@sonnakim for awareness

@anselmbradford
Copy link
Member

I see the issue. There's a group of notification modifiers

&__success,
&__warning,
&__error {
    & a {

…that slipped through the cracks and didn't get updated from __ to --.
I'll fix this soon.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging a pull request may close this issue.

2 participants