From aaa3366346c7071b337fe7ab4aad03c1e4512473 Mon Sep 17 00:00:00 2001 From: Julian Hofer Date: Mon, 24 Aug 2026 09:24:43 +0000 Subject: [PATCH] fix: contrast, focus and screen reader gaps across the site I ran axe-core over all 18 built pages at 1600px and 390px, in light and dark, and fixed everything it reported in our own code. --- src/components/DistroTabs.astro | 36 +++++++++++++------ src/components/Header.astro | 2 +- src/components/home/QuickStart.astro | 17 ++++++++- .../package-table/PackageTable.svelte | 35 ++++++++++++++---- src/pages/index.astro | 7 +++- 5 files changed, 77 insertions(+), 20 deletions(-) diff --git a/src/components/DistroTabs.astro b/src/components/DistroTabs.astro index d9c8d1fa..a3738cc3 100644 --- a/src/components/DistroTabs.astro +++ b/src/components/DistroTabs.astro @@ -12,18 +12,22 @@ const { current } = Astro.props; { tabOrder().map((d) => ( {d.name} + {d.status === "eol" && ( + + {/* The mark is the abbreviation sighted readers see; the words + behind it go to assistive tech, and the tooltip expands it + for anyone who does not know the initials. */} + + (end of life) + + )} )) } @@ -42,6 +46,10 @@ const { current } = Astro.props; } .distro { flex-shrink: 0; + /* Anchor for the visually hidden span: an absolutely positioned box with + no positioned ancestor sits at its static position inside this + sideways-scrolling strip and stretches the page with it. */ + position: relative; border-bottom: 2px solid transparent; border-radius: 0.125rem 0.125rem 0 0; color: var(--sl-color-gray-3); @@ -57,9 +65,15 @@ const { current } = Astro.props; .distro:hover { color: var(--sl-color-white); } - /* End-of-life releases stay reachable but recede; the active tab wins. */ - .distro--eol:not(.distro--active) { - color: var(--sl-color-gray-4); + /* End-of-life releases stay reachable, and say so in words rather than by + receding: every grey dim enough to read as muted against gray-3 falls + under 4.5:1 on this background, and weight alone was too quiet. */ + .distro__eol { + margin-left: 0.4em; + font-size: 0.6rem; + font-weight: 700; + letter-spacing: 0.06em; + vertical-align: 0.35em; } .distro--active { color: var(--sl-color-white); diff --git a/src/components/Header.astro b/src/components/Header.astro index 5d168a82..79bc22fa 100644 --- a/src/components/Header.astro +++ b/src/components/Header.astro @@ -31,7 +31,7 @@ const pathname = Astro.url.pathname;
-