fix: Improve color contrast for WCAG AA compliance - #415
Merged
Conversation
There was a problem hiding this comment.
Pull request overview
This PR aims to improve UI color contrast to better meet WCAG AA accessibility guidelines by darkening text colors and adjusting theme color tokens across shared components and screens.
Changes:
- Updated
Badgevariant text colors (including dark mode) to improve contrast while retaining existing backgrounds/borders. - Adjusted review list typography colors for improved readability in light/dark modes.
- Updated global theme color variables (primary/success/warning/error/muted) to higher-contrast shades.
Reviewed changes
Copilot reviewed 4 out of 5 changed files in this pull request and generated 2 comments.
Show a summary per file
| File | Description |
|---|---|
dongle/components/ui/Badge.tsx |
Improves badge text contrast via darker/lighter text utilities per variant (incl. dark mode). |
dongle/components/reviews/ReviewList.tsx |
Improves review list text/icon contrast; vote button markup currently includes syntax-breaking corruption that needs fixing. |
dongle/components/projects/VerificationBadge.tsx |
No functional change (formatting/whitespace only). |
dongle/components/projects/ProjectCard.tsx |
Improves some text contrast, but introduces multiple syntax-breaking corruptions in aria-labels, className, and Link href. |
dongle/app/globals.css |
Updates global theme color tokens to higher-contrast values. |
Suppressed comments (3)
dongle/components/reviews/ReviewList.tsx:95
- The
classNameandaria-labelprops for the unhelpful vote button are currently invalid (contain escaped backslashes) and remove the conditional styling + dynamic count. This will break rendering/TypeScript parsing and regress accessibility labeling.
<button
onClick={() => onVoteUnhelpful?.(review.id)}
className={\inline-flex items-center gap-1 text-xs font-semibold px-2.5 py-1 rounded-full transition-all border \\}
aria-label={\Mark as unhelpful, current count \\}
>
dongle/components/projects/ProjectCard.tsx:82
- The compare toggle button has multiple syntax errors: the
aria-labelbranches are missing template literals (project name removed) andclassNameis corrupted (contains escape/control characters). This will not compile and will regress the intended selected/disabled styling.
aria-label={
selected
? Remove from comparison
: !canAddMore
? Cannot add : maximum 4 projects
: Add to comparison
}
size="md"
className={\�bsolute left-4 top-4 z-10 rounded-full \\}
dongle/components/projects/ProjectCard.tsx:95
- The
Linkhrefprop is corrupted (href={\/projects/\\}) instead of interpolatingproject.id. This is a syntax error and will break navigation to the project detail page.
<Link href={\/projects/\\} prefetch={getPrefetchValue("project-detail")} className="flex h-full flex-col">
💡 Add a code-review agent skill or configure MCP servers for context-aware, tailored reviews. Learn more in the docs.
Comment on lines
82
to
86
| <button | ||
| onClick={() => onVoteHelpful?.(review.id)} | ||
| className={`inline-flex items-center gap-1 text-xs font-semibold px-2.5 py-1 rounded-full transition-all border ${ | ||
| review.helpfulVotes?.includes(currentUserAddress || "") | ||
| ? "bg-green-50 border-green-200 text-green-700 dark:bg-green-900/20 dark:border-green-800 dark:text-green-500" | ||
| : "bg-zinc-50 border-zinc-200 text-zinc-600 hover:bg-zinc-100 hover:text-black dark:bg-zinc-800 dark:border-zinc-850 dark:text-zinc-400 dark:hover:bg-zinc-700/50" | ||
| }`} | ||
| aria-label={`Mark as helpful, current count ${review.helpfulVotes?.length || 0}`} | ||
| className={\inline-flex items-center gap-1 text-xs font-semibold px-2.5 py-1 rounded-full transition-all border \\} | ||
| aria-label={\Mark as helpful, current count \\} | ||
| > |
Comment on lines
56
to
60
| aria-label={ | ||
| isSaved | ||
| ? `Remove ${project.name} from saved projects` | ||
| : `Save ${project.name}` | ||
| ? Remove from saved projects | ||
| : Save | ||
| } |
SamuelStave
force-pushed
the
fix/color-contrast-a11y-358
branch
from
August 25, 2026 11:56
54e3cac to
b0830d6
Compare
|
@SamuelStave Great news! 🎉 Based on an automated assessment of this PR, the linked Wave issue(s) no longer count against your application limits. You can now already apply to more issues while waiting for a review of this PR. Keep up the great work! 🚀 |
SamuelStave
force-pushed
the
fix/color-contrast-a11y-358
branch
from
August 28, 2026 16:28
b0830d6 to
4c6c667
Compare
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.
Closes #358