Docs site: fix two landing-page accessibility nits (color-contrast + label/name mismatch)

[marcusrbrown]

The docs landing page (https://mrbro.dev/dev-like/) scores 95 on Lighthouse accessibility — two audits are dinging it, both on the root page:

1. color-contrast — an element's foreground/background contrast is below the WCAG AA threshold.
2. label-content-name-mismatch — an element's visible text label doesn't match its accessible name.

Registry pages score 100; this is landing-page-only. Neither blocks launch, but they're cheap to close and worth doing before the page gets traffic.

Verified 2026-07-16 via Lighthouse mobile (root: performance/SEO/best-practices 100, accessibility 95). Reproduce with a Lighthouse run against the root URL and read the two failing audits for the exact offending nodes.

[fro-bot]

Triage

Reproduced both audits by inspecting the landing page source (docs/src/content/docs/index.mdx, docs/src/components/BeforeAfter.astro, docs/src/styles/custom.css) and computing WCAG contrast ratios for the theme's OKLCH color tokens. Both findings trace back to the same component, BeforeAfter.astro, which is only rendered on the landing page's proof section — consistent with the issue's note that registry pages score 100.

1. color-contrast — --accent-highlighter fails AA in light mode

custom.css:16 sets --accent-highlighter: oklch(0.6 0.2 250), which renders as rgb(0, 129, 241) against the light-mode background rgb(245, 249, 250).

Computed contrast ratio: 3.67:1 — below the 4.5:1 AA threshold for normal-weight text.

This variable is used as static (non-hover) text color in two places, both inside BeforeAfter.astro:

• .panel-header.highlighter-accent (custom.css:356-359) — "With Every profile" label, 0.85rem, not bold.
• .provenance-link (custom.css:366-376) — the [1] [2] [3] footnote links, 0.75rem.

The .provenance-link case is actually worse than the raw ratio suggests: it also has opacity: 0.6 by default (full opacity only on hover/focus), which further blends the already-failing color into the background. Blending that in, the effective rendered contrast is closer to ~2.2:1.

(Dark mode's --accent-highlighter: oklch(0.75 0.18 190) computes to 9.67:1 — fine, not the offender.)

2. label-content-name-mismatch — .provenance-link accessible name doesn't contain its visible text

Same elements, BeforeAfter.astro:22-24:

<a ... class="provenance-link" aria-label="Source: EveryInc compound-engineering-plugin">[1]</a>
<a ... class="provenance-link" aria-label="Source: every.to guides compound-engineering">[2]</a>
<a ... class="provenance-link" aria-label="Source: sfruby.com">[3]</a>

Visible text is [1]/[2]/[3], but the aria-label replaces it entirely with unrelated text that doesn't contain the visible string — triggering the mismatch audit. (For comparison, the hero copy button's aria-label="Copy command: ..." does contain its visible text as a substring, so it's not implicated here.)

Proposed fix

Both fixes are scoped to docs/src/components/BeforeAfter.astro and docs/src/styles/custom.css, no other pages affected:

1. Contrast: darken --accent-highlighter in light mode (e.g. oklch(0.52 0.2 250) gets ~5:1) and/or drop .provenance-link's default opacity: 0.6 (or raise it enough that the blended color still clears 4.5:1 — at L=0.6 even full opacity only hits 3.67:1, so the base lightness needs to move regardless).
2. Label mismatch: keep the descriptive source info but don't hide the visible text from the accessible name — e.g. use aria-label="[1] Source: EveryInc compound-engineering-plugin", or drop aria-label and add a visually-hidden <span> after the visible [1] instead.

Next steps

• Not launch-blocking (per issue), but cheap — recommend a small PR touching only those two files.
• After fixing, re-run Lighthouse against the deployed root URL to confirm 100 and check no regression on /registry/ or /ethics/.
• No related open PR or prior fro-bot session found for this issue.

---

Run Summary

Field	Value
Event	issues
Repository	marcusrbrown/dev-like
Run ID	29718405397
Cache	hit
Session	ses_08213226affekssFbK50UQEnJU