Fix tag-pill contrast and make the news-card focus ring visible - #269
Merged
Merged
Conversation
- Tag pills: workshop #6EAC5B -> #4a7c3c (4.95:1) and books #D25663 -> #b83d4b (5.52:1), so white text passes WCAG AA. The brand $qe-green / $qe-red variables are unchanged. - "NEW" badge (Books page and the home Books section): #e94560 -> #d0344f (4.90:1). - News page meta text: card dates, "Published by" lines and the Older Posts dates move from #888/#999 to #666 (5.74:1); the card chevron from #aaa to #64748b (4.76:1). Home news-card dates also move to #666. - News cards: .news-card has overflow: hidden, which clipped the header button's focus ring, so keyboard focus was invisible. The ring now goes around the card via :has(), with an inset ring on the button as the fallback for browsers without :has(). - Respect prefers-reduced-motion for the card and button transitions. Part of #266. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
✅ Deploy Preview for grand-swan-ca5201 ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
Contributor
There was a problem hiding this comment.
Copilot review overview
🟢 Approval recommended
The changes are small, well-scoped, presentational-only accessibility fixes whose selectors, colours, and fallbacks I verified as correct and consistent with the codebase.
Review effort: Balanced
Findings: None
What changed in this PR
This PR resolves colour-contrast (WCAG AA) and keyboard-focus accessibility issues on the News/Activity and home pages, following the design review tracked in #266. It darkens several tag-pill and badge colours, lightens low-contrast meta-text greys, and fixes a focus ring that was being clipped by the news card's overflow: hidden. It is purely presentational and touches no logic.
Changes:
- Darken
workshop,books, andNEWbadge colours and raise News meta-text greys to#666so text meets AA contrast with white/background. - Make the news-card keyboard focus ring visible: an inset ring on the header button by default, and a full-card ring via
:has()where supported (older browsers keep the inset fallback). - Add a
prefers-reduced-motionblock that disables card/button transitions and the card-lift transform, and update the README tag-colour table.
| File | Description |
|---|---|
assets/main.scss |
Core changes: AA-compliant pill/badge colours, #666 meta text, :has()-based focus ring with inset fallback, and reduced-motion media query. |
README.md |
Updates the tag colour reference table to the new workshop/books hex values. |
_layouts/home.html |
Raises the "Latest News" card date colour from #888 to #666 for contrast. |
💡 Add a code-review agent skill or configure MCP servers for context-aware, tailored reviews. Learn more in the docs.
4 tasks done
4 tasks
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.
This PR fixes the colour-contrast and keyboard-focus problems that the News/Activity design review turned up on the existing pages (#266). It doesn't depend on #265 and merges cleanly with it in either order.
Changes
workshoptag pill (white text)#6EAC5B, 2.72:1, fails AA#4a7c3c, 4.95:1bookstag pill (white text)#D25663, 4.00:1, fails AA#b83d4b, 5.52:1NEWbadge on the Books page and the home Books section#e94560, 3.83:1, fails AA#d0344f, 4.90:1#888/#999(3.54:1 / 2.85:1)#666, 5.74:1#888#666#aaa, 2.32:1#64748b, 4.76:1.news-cardhasoverflow: hidden, which clipped the header button's focus ring, so tabbing onto a card showed nothing.:has().:has()get an inset ring on the button instead.#0072bcring.The brand variables
$qe-greenand$qe-redare unchanged, because other parts of the site use them. Only the pill rules change.On the preview, check:
NEWbadge on/books/;/news/to see the ring around each card.🤖 Generated with Claude Code