-
-
Notifications
You must be signed in to change notification settings - Fork 6.5k
fix(ui): badge + breadcrumbs color contrast #8494
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(ui): badge + breadcrumbs color contrast #8494
Conversation
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
👋 Codeowner Review RequestThe following codeowners have been identified for the changed files: Team reviewers: @nodejs/nodejs-website Please review the changes when you have a chance. Thank you! 🙏 |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Pull request overview
This PR improves accessibility by addressing color contrast issues on the Previous Releases page. The changes darken background colors for specific UI components to meet WCAG accessibility standards when paired with white text.
- Updated breadcrumb active link background from green-600 to green-800
- Updated neutral badge background from neutral-600 to neutral-800
Reviewed changes
Copilot reviewed 2 out of 2 changed files in this pull request and generated no comments.
| File | Description |
|---|---|
| packages/ui-components/src/Common/Breadcrumbs/BreadcrumbLink/index.module.css | Changes active breadcrumb link background color from green-600 to green-800 to improve contrast with white text |
| packages/ui-components/src/Common/Badge/index.module.css | Changes neutral badge background color from neutral-600 to neutral-800 to improve contrast with white text |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
Codecov Report✅ All modified and coverable lines are covered by tests. Additional details and impacted files@@ Coverage Diff @@
## main #8494 +/- ##
==========================================
+ Coverage 73.70% 74.29% +0.59%
==========================================
Files 108 106 -2
Lines 9210 9112 -98
Branches 313 307 -6
==========================================
- Hits 6788 6770 -18
+ Misses 2420 2340 -80
Partials 2 2 ☔ View full report in Codecov by Sentry. |
Description
This PR addresses color contrast accessibility issues on Previous Releases Page.
Validation
Axe Report:
Before:

After:

Related Issues
Fixes #8464
Check List
pnpm formatto ensure the code follows the style guide.pnpm testto check if all tests are passing.pnpm buildto check if the website builds without errors.