From 6bbbb02ad7a9298e92e2250b9a576aeaeebb7c07 Mon Sep 17 00:00:00 2001
From: engineer <engineer@solidstate.cc>
Date: Thu, 4 Jun 2026 00:37:26 +0200
Subject: [PATCH] a11y: restore AA contrast + fix form-label/link semantics on
 skills pages
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The monochrome pass (665413c) reintroduced sub-AA grays the earlier a11y
commit had fixed, and the browse filters were never programmatically labeled.

- SkillCard / Leaderboard: replace #555/#444/#333/#666 body text with the
  AA-passing #a3a3a3 / #8a8a8a values (use literal hex, not var(--muted) —
  CSS custom props don't resolve in inline styles during the CSS-load window
  and fall back to the default link color).
- SkillsBrowser: associate search/category/platform <label>s via htmlFor+id
  (fixes select-name), name the price radiogroup, add aria-label to the sort
  <select>, and aria-pressed/aria-label to the view-toggle buttons.
- Footer: underline the inline "Visionaire Labs" links so they're
  distinguishable from surrounding text without relying on color
  (fixes link-in-text-block).

Lighthouse (desktop, prod build): listing a11y 88→100, detail 92→100.
Performance 100 and CLS 0 were already optimal (pages are static SSG).

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Co-authored-by: multica-agent <github@multica.ai>
---
 app/skills/SkillsBrowser.tsx | 20 +++++++++++++-------
 app/skills/[slug]/page.tsx   |  4 ++--
 components/Footer.tsx        |  4 ++--
 components/Leaderboard.tsx   | 10 +++++-----
 components/SkillCard.tsx     |  8 ++++----
 5 files changed, 26 insertions(+), 20 deletions(-)

diff --git a/app/skills/SkillsBrowser.tsx b/app/skills/SkillsBrowser.tsx
index 797de05..169c14a 100644
--- a/app/skills/SkillsBrowser.tsx
+++ b/app/skills/SkillsBrowser.tsx
@@ -150,8 +150,9 @@ export function SkillsBrowser({ skills, categories, platforms }: SkillsBrowserPr
       <aside style={{ position: "sticky", top: "72px" }}>
         {/* Search */}
         <div style={{ marginBottom: "24px" }}>
-          <label style={labelStyle}>Search</label>
+          <label style={labelStyle} htmlFor="skills-search">Search</label>
           <input
+            id="skills-search"
             type="text"
             placeholder="skill name, tag, author…"
             value={search}
@@ -162,8 +163,9 @@ export function SkillsBrowser({ skills, categories, platforms }: SkillsBrowserPr
 
         {/* Category */}
         <div style={{ marginBottom: "24px" }}>
-          <label style={labelStyle}>Category</label>
+          <label style={labelStyle} htmlFor="skills-category">Category</label>
           <select
+            id="skills-category"
             value={selectedCategory}
             onChange={(e) => setSelectedCategory(e.target.value)}
             style={{ ...inputStyle, cursor: "pointer" }}
@@ -179,8 +181,9 @@ export function SkillsBrowser({ skills, categories, platforms }: SkillsBrowserPr
 
         {/* Platform */}
         <div style={{ marginBottom: "24px" }}>
-          <label style={labelStyle}>Platform</label>
+          <label style={labelStyle} htmlFor="skills-platform">Platform</label>
           <select
+            id="skills-platform"
             value={selectedPlatform}
             onChange={(e) => setSelectedPlatform(e.target.value)}
             style={{ ...inputStyle, cursor: "pointer" }}
@@ -196,8 +199,8 @@ export function SkillsBrowser({ skills, categories, platforms }: SkillsBrowserPr
 
         {/* Price */}
         <div style={{ marginBottom: "24px" }}>
-          <label style={labelStyle}>Price</label>
-          <div style={{ display: "flex", flexDirection: "column", gap: "6px" }}>
+          <span style={labelStyle} id="price-filter-label">Price</span>
+          <div role="radiogroup" aria-labelledby="price-filter-label" style={{ display: "flex", flexDirection: "column", gap: "6px" }}>
             {[
               { value: "", label: "Any price" },
               { value: "free", label: "Free only" },
@@ -319,17 +322,19 @@ export function SkillsBrowser({ skills, categories, platforms }: SkillsBrowserPr
             }}
           >
             {filtered.length} results
-            <span style={{ fontSize: "10px", color: "#666666" }}>
+            <span style={{ fontSize: "10px", color: "#8a8a8a" }}>
               Install &amp; star counts are periodic snapshots, not live
             </span>
           </span>
           <div style={{ display: "flex", alignItems: "center", gap: "14px" }}>
             {/* View toggle */}
-            <div style={{ display: "flex", border: "1px solid #222222", borderRadius: "4px", overflow: "hidden" }}>
+            <div role="group" aria-label="View layout" style={{ display: "flex", border: "1px solid #222222", borderRadius: "4px", overflow: "hidden" }}>
               {(["leaderboard", "grid"] as const).map((v) => (
                 <button
                   key={v}
                   onClick={() => setView(v)}
+                  aria-pressed={view === v}
+                  aria-label={v === "leaderboard" ? "Board view" : "Grid view"}
                   style={{
                     fontFamily: "var(--font-jetbrains-mono), monospace",
                     fontSize: "10px",
@@ -359,6 +364,7 @@ export function SkillsBrowser({ skills, categories, platforms }: SkillsBrowserPr
                 SORT
               </span>
               <select
+                aria-label="Sort skills by"
                 value={sortBy}
                 onChange={(e) => setSortBy(e.target.value)}
                 style={{
diff --git a/app/skills/[slug]/page.tsx b/app/skills/[slug]/page.tsx
index 277cd43..ebf5c01 100644
--- a/app/skills/[slug]/page.tsx
+++ b/app/skills/[slug]/page.tsx
@@ -47,7 +47,7 @@ export default async function SkillDetailPage({ params }: Props) {
   const isFreeLabel = priceLabel === "Free"
   const isUnpricedLabel = priceLabel === "—"
   const priceDisplayLabel = isFreeLabel ? "FREE" : priceLabel
-  const priceColor = isUnpricedLabel ? "#666666" : "#ffffff"
+  const priceColor = isUnpricedLabel ? "#8a8a8a" : "#ffffff"
   const isPaidLabel = !isFreeLabel && !isUnpricedLabel
   // Only paid skills go to Agentic Market. Free + indexed listings link to the
   // real source (repo, then ClawHub listing) — never the payment marketplace.
@@ -552,7 +552,7 @@ export default async function SkillDetailPage({ params }: Props) {
                   marginTop: "10px",
                   fontFamily: "var(--font-jetbrains-mono), monospace",
                   fontSize: "9px",
-                  color: "#666666",
+                  color: "#8a8a8a",
                   letterSpacing: "0.04em",
                 }}
               >
diff --git a/components/Footer.tsx b/components/Footer.tsx
index ffe99c9..44ccdb0 100644
--- a/components/Footer.tsx
+++ b/components/Footer.tsx
@@ -93,7 +93,7 @@ export function Footer() {
                 href="https://visionaire.co"
                 target="_blank"
                 rel="noopener noreferrer"
-                style={{ color: "#ffffff", textDecoration: "none" }}
+                style={{ color: "#ffffff", textDecoration: "underline" }}
               >
                 Visionaire Labs
               </a>.
@@ -156,7 +156,7 @@ export function Footer() {
               href="https://visionaire.co"
               target="_blank"
               rel="noopener noreferrer"
-              style={{ color: "inherit", textDecoration: "none" }}
+              style={{ color: "inherit", textDecoration: "underline" }}
             >
               Visionaire Labs ↗
             </a>
diff --git a/components/Leaderboard.tsx b/components/Leaderboard.tsx
index 36fe1e9..99922d8 100644
--- a/components/Leaderboard.tsx
+++ b/components/Leaderboard.tsx
@@ -25,7 +25,7 @@ export function Leaderboard({ skills }: { skills: Skill[] }) {
           fontSize: "10px",
           letterSpacing: "0.08em",
           textTransform: "uppercase",
-          color: "#666666",
+          color: "#8a8a8a",
         }}
       >
         <span>#</span>
@@ -59,7 +59,7 @@ export function Leaderboard({ skills }: { skills: Skill[] }) {
               style={{
                 fontFamily: "var(--font-jetbrains-mono), monospace",
                 fontSize: "12px",
-                color: i < 3 ? "#ffffff" : "#555555",
+                color: i < 3 ? "#ffffff" : "#a3a3a3",
                 fontWeight: i < 3 ? 700 : 400,
               }}
             >
@@ -86,7 +86,7 @@ export function Leaderboard({ skills }: { skills: Skill[] }) {
                   display: "block",
                   fontFamily: "var(--font-jetbrains-mono), monospace",
                   fontSize: "11px",
-                  color: "#666666",
+                  color: "#8a8a8a",
                   overflow: "hidden",
                   textOverflow: "ellipsis",
                   whiteSpace: "nowrap",
@@ -113,7 +113,7 @@ export function Leaderboard({ skills }: { skills: Skill[] }) {
                   ↑<span className="ss-lb-trendword"> Trending</span>
                 </span>
               ) : (
-                <span style={{ color: "#333333", fontSize: "11px" }}>—</span>
+                <span style={{ color: "#8a8a8a", fontSize: "11px" }}>—</span>
               )}
             </span>
 
@@ -121,7 +121,7 @@ export function Leaderboard({ skills }: { skills: Skill[] }) {
               style={{
                 fontFamily: "var(--font-jetbrains-mono), monospace",
                 fontSize: "13px",
-                color: installs ? "#ffffff" : "#444444",
+                color: installs ? "#ffffff" : "#8a8a8a",
                 textAlign: "right",
                 fontVariantNumeric: "tabular-nums",
               }}
diff --git a/components/SkillCard.tsx b/components/SkillCard.tsx
index 5d45d2e..5619d1a 100644
--- a/components/SkillCard.tsx
+++ b/components/SkillCard.tsx
@@ -37,7 +37,7 @@ export function SkillCard({ skill }: { skill: Skill }) {
         <span style={{
           fontFamily: "monospace",
           fontSize: "11px",
-          color: isFree ? "#ffffff" : unpriced ? "#333333" : "#555555",
+          color: isFree ? "#ffffff" : unpriced ? "#8a8a8a" : "#a3a3a3",
           letterSpacing: "0.06em",
           textTransform: "uppercase",
           marginLeft: "12px",
@@ -59,7 +59,7 @@ export function SkillCard({ skill }: { skill: Skill }) {
 
       <p style={{
         fontSize: "13px",
-        color: "#555555",
+        color: "#a3a3a3",
         lineHeight: 1.6,
         marginBottom: "20px",
       }}>
@@ -69,7 +69,7 @@ export function SkillCard({ skill }: { skill: Skill }) {
       <div style={{
         fontFamily: "monospace",
         fontSize: "11px",
-        color: "#333333",
+        color: "#a3a3a3",
         backgroundColor: "#080808",
         padding: "7px 10px",
         overflow: "hidden",
@@ -89,7 +89,7 @@ export function SkillCard({ skill }: { skill: Skill }) {
           <span key={p} style={{
             fontFamily: "monospace",
             fontSize: "10px",
-            color: "#444444",
+            color: "#8a8a8a",
             letterSpacing: "0.04em",
             textTransform: "uppercase",
           }}>