From 8abee5480b00523735b7b64feab1da893d19c31c Mon Sep 17 00:00:00 2001
From: Matt McKay <mmcky@users.noreply.github.com>
Date: Tue, 29 Sep 2026 08:42:10 +1000
Subject: [PATCH] a11y: fix tag-pill contrast and make the news-card focus ring
 visible

- 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>
---
 README.md          |  4 ++--
 _layouts/home.html |  2 +-
 assets/main.scss   | 43 ++++++++++++++++++++++++++++++++++---------
 3 files changed, 37 insertions(+), 12 deletions(-)

diff --git a/README.md b/README.md
index 9cf7379..e061e6d 100644
--- a/README.md
+++ b/README.md
@@ -16,8 +16,8 @@ Posts in `_posts/` use a `tag` frontmatter field with coloured pill badges on th
 |---|---|---|
 | `news` | Blue | `#0072bc` |
 | `lectures` | Dark blue | `#306998` |
-| `workshop` | Green | `#6EAC5B` |
-| `books` | Red | `#D25663` |
+| `workshop` | Green | `#4a7c3c` |
+| `books` | Red | `#b83d4b` |
 | `tools` | Yellow | `#FCC837` |
 | `announcement` | Dark grey | `#283039` |
 
diff --git a/_layouts/home.html b/_layouts/home.html
index d71af0a..f45396e 100755
--- a/_layouts/home.html
+++ b/_layouts/home.html
@@ -233,7 +233,7 @@ <h2 class="qe-section-title">Latest News</h2>
           <div class="qe-card">
             <a href="{{ post.url | relative_url }}">
               {% assign date_format = site.minima.date_format | default: "%-d %b %Y" %}
-              <p style="margin: 0 0 0.5rem 0; font-size: 0.8rem; color: #888;">{{ post.date | date: date_format }}
+              <p style="margin: 0 0 0.5rem 0; font-size: 0.8rem; color: #666;">{{ post.date | date: date_format }}
                 {% if post.tag %}
                   {% for tag in post.tag %}
                     <span class="qe-badge qe-badge--{{ tag | downcase | replace: ' ', '-' }}">{{ tag }}</span>
diff --git a/assets/main.scss b/assets/main.scss
index ee68397..d00b466 100755
--- a/assets/main.scss
+++ b/assets/main.scss
@@ -625,7 +625,7 @@ img {
     color: #fff;
   }
   &--new {
-    background: #e94560;
+    background: #d0344f; // darkened from #e94560 to pass WCAG AA (4.90:1) with white text
     color: #fff;
   }
   // News post tag pills
@@ -638,11 +638,11 @@ img {
     color: #fff;
   }
   &--workshop {
-    background: $qe-green;
+    background: #4a7c3c; // darker than $qe-green (#6EAC5B) to pass WCAG AA (4.95:1) with white text
     color: #fff;
   }
   &--books {
-    background: $qe-red;
+    background: #b83d4b; // darker than $qe-red (#D25663) to pass WCAG AA (5.52:1) with white text
     color: #fff;
   }
   &--website {
@@ -939,7 +939,7 @@ section {
       }
       .badge-new {
         display: inline-block;
-        background-color: #e94560;
+        background-color: #d0344f;
         color: #fff;
         font-size: 0.65rem;
         font-weight: 700;
@@ -1346,15 +1346,27 @@ section {
       transform: rotate(180deg);
     }
   }
+  // .news-card has overflow: hidden, which clips an outline drawn outside the
+  // button. Draw the ring inside the button by default...
   &:focus-visible {
     outline: 2px solid $color-link;
-    outline-offset: 2px;
+    outline-offset: -4px;
   }
 }
 
+// ...and, where :has() is supported, around the whole card instead. Browsers
+// without :has() drop both rules and keep the inset ring above.
+.news-card:has(> .news-card-header:focus-visible) {
+  outline: 2px solid $color-link;
+  outline-offset: 2px;
+}
+.news-card:has(> .news-card-header:focus-visible) > .news-card-header:focus-visible {
+  outline: none;
+}
+
 .news-card-date {
   font-size: 0.8rem;
-  color: #888;
+  color: #666;
   text-transform: uppercase;
   letter-spacing: 0.03em;
   margin-bottom: 0.25rem;
@@ -1384,7 +1396,7 @@ section {
   position: absolute;
   top: 1.25rem;
   right: 1.25rem;
-  color: #aaa;
+  color: #64748b;
   i {
     transition: transform 0.2s;
     font-size: 1.1rem;
@@ -1404,7 +1416,7 @@ section {
 
 .news-card-author {
   font-size: 0.8rem;
-  color: #999;
+  color: #666;
   margin-top: 1rem;
 }
 
@@ -1459,7 +1471,7 @@ section {
     width: 4rem;
     font-size: 0.8rem;
     font-weight: normal;
-    color: #999;
+    color: #666;
   }
   .qe-badge {
     display: inline-block;
@@ -1668,3 +1680,16 @@ body.sponsor-bar-visible.internal main {
     font-size: 1.3rem;
   }
 }
+
+/* Respect a reduced-motion preference for the card and button transitions */
+@media (prefers-reduced-motion: reduce) {
+  .qe-card,
+  .qe-btn,
+  .news-card,
+  .news-card-toggle i {
+    transition: none;
+  }
+  .qe-card:hover {
+    transform: none;
+  }
+}