fix: contrast, focus and screen reader gaps across the site

src/components/DistroTabs.astro

@@ -12,18 +12,22 @@ const { current } = Astro.props;
   {
     tabOrder().map((d) => (
       <a
-        class:list={[
-          "distro",
-          {
-            "distro--active": d.name === current,
-            "distro--eol": d.status === "eol",
-          },
-        ]}
+        class:list={["distro", { "distro--active": d.name === current }]}
         href={`/${d.name}.html`}
         aria-current={d.name === current ? "page" : undefined}
-        title={d.status === "eol" ? "End of life" : undefined}
       >
         {d.name}
+        {d.status === "eol" && (
+          <Fragment>
+            {/* 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. */}
+            <span class="distro__eol" aria-hidden="true" title="End of life">
+              EOL
+            </span>
+            <span class="sr-only"> (end of life)</span>
+          </Fragment>
+        )}
       </a>
     ))
   }
@@ -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);

src/components/Header.astro

@@ -31,7 +31,7 @@ const pathname = Astro.url.pathname;
   <div class="title-wrapper sl-flex">
     <SiteTitle />
   </div>
-  <nav class="top-nav print:hidden" aria-label="Main">
+  <nav class="top-nav print:hidden" aria-label="Sections">
     {
       tabs.map((tab) => (
         <a

src/components/home/QuickStart.astro

@@ -31,7 +31,16 @@ const commands = [
         <span class="copy-label">Copy</span>
       </button>
     </div>
-    <div class="term-body">
+    {
+      /* Scrolls sideways once the commands outrun the card, so it takes
+        focus: without it the overflow is reachable by pointer only. */
+    }
+    <div
+      class="term-body"
+      tabindex="0"
+      role="group"
+      aria-label="Quick start commands"
+    >
       {
         commands.map((command) => (
           <div>
@@ -113,6 +122,12 @@ const commands = [
     line-height: 1.7;
     overflow-x: auto;
   }
+  /* Fixed light ring for the same reason the prompt colour is fixed: the
+     accent is a dark blue in light mode and would vanish on the charcoal. */
+  .term-body:focus-visible {
+    outline: 2px solid #e8eaed;
+    outline-offset: -2px;
+  }
   .term-body div {
     white-space: pre;
     color: #e8eaed;

src/components/package-table/PackageTable.svelte

@@ -354,7 +354,13 @@
         <p class="rs-mutex">
           <label>
             Built against
-            <select aria-label="ROS distro mutex version" bind:value={mutex}>
+            <!-- The label wraps the select, but the aria-label overrides it, so
+                 it opens with the same words the label shows: speech control
+                 matches on what the user can read. -->
+            <select
+              aria-label="Built against ROS distro mutex version"
+              bind:value={mutex}
+            >
               {#each mutexes as version, i (version)}
                 <option value={i}>
                   {mutexPackage}
@@ -617,8 +623,17 @@
                         class:rs-det--no={!on}
                         title="{p.id}: {on ? 'available' : 'not on channel'}"
                       >
+                        <!--
+                          Narrow screens drop the platform columns, so this
+                          list is the only place the per-platform state
+                          appears: it carries the same visually hidden text
+                          those cells do rather than leaving the glyph and
+                          the title attribute to speak for it.
+                        -->
                         {@render iconSpan(meta.icon, 12)}{meta.arch}
-                        {on ? "✓" : "·"}
+                        {on ? "✓" : "·"}<span class="sr-only"
+                          >{p.id}: {on ? "available" : "not on channel"}</span
+                        >
                       </span>
                     {/each}
                   </span>
@@ -669,7 +684,7 @@
     --rs-yes-bg: #e7f4d6;
     --rs-yes-fg: #3f7a12;
     --rs-no-bg: var(--sl-color-gray-6);
-    --rs-no-fg: var(--sl-color-gray-4);
+    --rs-no-fg: var(--sl-color-gray-3);
     /* Orange, not amber: a warning must not share a hue with the gold brand. */
     --rs-warn-bg: hsl(28, 85%, 92%);
     --rs-warn-fg: hsl(25, 85%, 34%);
@@ -847,12 +862,20 @@
     gap: 0.6rem;
     min-width: 0;
   }
+  /* The accent border tracks focus for the pointer, but on its own it was
+     the entire keyboard focus signal, and a 1px edge is under the thickness
+     a focus indicator needs to carry that alone. The ring does that job. */
   .rs-tools input:focus,
   .rs-tools select:focus,
   .rs-mutex select:focus {
-    outline: none;
     border-color: var(--sl-color-accent);
   }
+  .rs-tools input:focus-visible,
+  .rs-tools select:focus-visible,
+  .rs-mutex select:focus-visible {
+    outline: 2px solid var(--sl-color-accent);
+    outline-offset: 1px;
+  }
 
   .rs-filters {
     display: flex;
@@ -1154,7 +1177,7 @@
     display: inline-flex;
     padding: 0.2rem;
     border-radius: 0.125rem;
-    color: var(--sl-color-gray-4);
+    color: var(--sl-color-gray-3);
     transition:
       color 125ms,
       background-color 125ms;
@@ -1312,7 +1335,7 @@
       color: var(--rs-yes-fg);
     }
     .rs-det--no {
-      color: var(--sl-color-gray-4);
+      color: var(--sl-color-gray-3);
     }
   }
 

src/pages/index.astro

@@ -39,7 +39,12 @@ const packagesHref = `/${newestRelease().name}.html`;
     <section class="section section--hero">
       <div class="hero">
         <div>
-          <h1>Manage ROS with ease</h1>
+          {
+            /* Starlight's splash template drops the page title it normally
+              anchors the "Skip to content" link to, so the id rides along
+              with the heading this page brings itself. */
+          }
+          <h1 id="_top">Manage ROS with ease</h1>
           <p class="hero-lead">
             Run any ROS distro in an isolated, per-project environment. On
             Linux, macOS and Windows.