Audit every page the site builds, and state the wire's axis once

scripts/a11y-routes.mjs

@@ -0,0 +1,23 @@
+import site from '../site.config.json' with { type: 'json' };
+
+/**
+ * Which routes the Lighthouse gate audits.
+ *
+ * Derived from site.config.json rather than typed out, because a hand-kept copy
+ * of the route inventory drifts: /code-signing-policy had to be added in a
+ * follow-up commit, and /helper shipped with no audit at all. Adding a page to
+ * the inventory now adds it to the audit, which is the only behaviour that
+ * cannot fall behind.
+ */
+
+/** In the inventory, but not an HTML page a Lighthouse run means anything for. */
+const NOT_A_PAGE = new Set(['/rss.xml']);
+
+/**
+ * Routes built from a template, where auditing every instance would audit the
+ * same markup over and over. One stands for the family: the accessibility of
+ * the 104th post is the accessibility of the first.
+ */
+const TEMPLATE_REPRESENTATIVES = ['/blog/the-tool-goes-to-the-data', '/blog/engine/postgresql'];
+
+export const a11yRoutes = [...site.routes.filter((route) => !NOT_A_PAGE.has(route)), ...TEMPLATE_REPRESENTATIVES];

scripts/lighthouse-gate.mjs

@@ -23,6 +23,7 @@ import { existsSync, statSync } from 'node:fs';
 import { extname, join, resolve as resolvePath, sep } from 'node:path';
 import { launch } from 'chrome-launcher';
 import lighthouse from 'lighthouse';
+import { a11yRoutes } from './a11y-routes.mjs';
 
 const args = process.argv.slice(2);
 const flag = (name, fallback) => {
@@ -32,37 +33,7 @@ const flag = (name, fallback) => {
 
 const MIN = Number(flag('min', 95));
 const DIST = 'dist';
-const ROUTES = args.includes('--route')
-  ? args.filter((a, i) => args[i - 1] === '--route')
-  : [
-      '/',
-      '/blog',
-      '/blog/the-tool-goes-to-the-data',
-      // The engine archives are one template over seventeen routes, so one
-      // stands for all of them the way the post above stands for 104.
-      '/blog/engine/postgresql',
-      '/faq',
-      '/get-started',
-      // Every standalone content page is audited. /playground earns its slot
-      // twice over: it is the only route with an interactive surface built by
-      // script at runtime, so it is the one axe-core findings can appear on
-      // without anyone touching a template.
-      '/playground',
-      '/databases',
-      '/features',
-      '/open-source',
-      '/supporters',
-      '/deploy',
-      '/docker-compose',
-      '/libredb-database',
-      '/security',
-      '/code-signing-policy',
-      '/helper',
-      '/support',
-      '/platform',
-      '/compare',
-      '/privacy-policy',
-    ];
+const ROUTES = args.includes('--route') ? args.filter((a, i) => args[i - 1] === '--route') : a11yRoutes;
 
 if (!existsSync(join(DIST, 'index.html'))) {
   console.error(`No ${DIST}/index.html — run \`bun run build\` first.`);

src/components/home/FlowBand.astro

@@ -164,9 +164,15 @@ const modes = ['out', 'in'] as const;
   }
 
   /* "Tool → data" is the working direction: green wire, Studio lands, specs light */
-  .flow__card[data-switch-active='in'] .diag__line {
-    background-image: repeating-linear-gradient(90deg, var(--success-text) 0 5px, transparent 5px 10px);
-    animation-name: lbDashXR;
+  .flow__card[data-switch-active='in'] .diag {
+    --diag-dash-color: var(--success-text);
+  }
+  /* Running the dashes backwards is a horizontal idea. Below 560px the wire is
+     drawn top-to-bottom, so it keeps the shared vertical animation instead. */
+  @media (min-width: 561px) {
+    .flow__card[data-switch-active='in'] .diag {
+      --diag-dash-anim: lbDashXR;
+    }
   }
   .flow__card[data-switch-active='in'] .diag__chip {
     color: var(--success-text);
@@ -180,15 +186,6 @@ const modes = ['out', 'in'] as const;
     color: var(--success-text);
   }
 
-  /* The stacked layout turns the wire vertical, but the rule above is what sets
-     this state's animation and it outranks the one in diagram.css, so the axis
-     has to be restated here or the green wire stops moving. */
-  @media (max-width: 560px) {
-    .flow__card[data-switch-active='in'] .diag__line {
-      background-image: repeating-linear-gradient(180deg, var(--success-text) 0 5px, transparent 5px 10px);
-      animation-name: lbDashY;
-    }
-  }
   .flow__card[data-switch-active='in'] .flow__spec {
     color: var(--text-brand);
     border-color: var(--primary-600);

src/components/home/WhySection.astro

@@ -163,8 +163,8 @@ import { why } from '../../data/home';
   }
 
   /* step 04 is the one that works: the wire turns green and Studio lands */
-  .why__card[data-switch-active='3'] .diag__line {
-    background-image: repeating-linear-gradient(90deg, var(--success-text) 0 5px, transparent 5px 10px);
+  .why__card[data-switch-active='3'] .diag {
+    --diag-dash-color: var(--success-text);
   }
   .why__card[data-switch-active='3'] .diag__chip {
     color: var(--success-text);
@@ -178,12 +178,6 @@ import { why } from '../../data/home';
     color: var(--success-text);
   }
 
-  @media (max-width: 560px) {
-    .why__card[data-switch-active='3'] .diag__line {
-      background-image: repeating-linear-gradient(180deg, var(--success-text) 0 5px, transparent 5px 10px);
-    }
-  }
-
   .why__status {
     font: var(--weight-regular) 11.5px / 1.5 var(--font-mono);
     color: var(--text-tertiary);

src/styles/diagram.css

@@ -4,7 +4,14 @@
    arrangement, so the base rules live here; each section keeps only its own
    state overrides in its scoped <style>.
    -------------------------------------------------------------------------- */
+/* The wire's axis is one decision, not two: the gradient angle and the keyframes
+   that scroll it have to agree, and when they disagreed the wire sat still while
+   looking alive. It is decided here, on the container, and inherited. A state
+   that only recolours the wire sets --diag-dash-color and touches nothing else. */
 .diag {
+  --diag-dash-angle: 90deg;
+  --diag-dash-anim: lbDashX;
+  --diag-dash-color: var(--error-text);
   display: flex;
   align-items: stretch;
 }
@@ -64,8 +71,12 @@
   top: 50%;
   height: 2px;
   margin-top: -1px;
-  background-image: repeating-linear-gradient(90deg, var(--error-text) 0 5px, transparent 5px 10px);
-  animation: lbDashX 1s linear infinite;
+  background-image: repeating-linear-gradient(
+    var(--diag-dash-angle),
+    var(--diag-dash-color) 0 5px,
+    transparent 5px 10px
+  );
+  animation: var(--diag-dash-anim) 1s linear infinite;
 }
 .diag__chip {
   position: absolute;
@@ -126,6 +137,8 @@
 
 @media (max-width: 560px) {
   .diag {
+    --diag-dash-angle: 180deg;
+    --diag-dash-anim: lbDashY;
     flex-direction: column;
     gap: var(--space-04);
   }
@@ -144,7 +157,5 @@
     width: 2px;
     height: auto;
     margin: 0 0 0 -1px;
-    background-image: repeating-linear-gradient(180deg, var(--error-text) 0 5px, transparent 5px 10px);
-    animation-name: lbDashY;
   }
 }

tests/dist-smoke.test.ts

@@ -265,3 +265,25 @@ describe('hero product tour', () => {
     expect(button?.getAttribute('aria-label')).toBeTruthy();
   });
 });
+
+/**
+ * The diagram wire is drawn by a dashed gradient and scrolled by keyframes, and
+ * the two have to agree on an axis. They were stated together in six places —
+ * base, mobile, and a green override per section per breakpoint — and one of the
+ * six was missed: the working state animated along X while drawn along Y, so the
+ * wire looked alive and sat still. The axis is now set once on .diag and
+ * inherited; a state that recolours the wire must not restate the gradient.
+ */
+describe('the diagram wire states its axis once', () => {
+  it('defines the dashed gradient in exactly one rule', () => {
+    const gradients = styles().match(/repeating-linear-gradient\(var\(--diag-dash-angle\)/g) ?? [];
+    expect(gradients.length, 'the wire gradient is defined more than once').toBe(1);
+  });
+
+  it('leaves no state override spelling the gradient out again', () => {
+    // A literal angle next to a dash colour is the old shape coming back.
+    const literals =
+      styles().match(/repeating-linear-gradient\((?:90|180)deg,\s*var\(--(?:error|success)-text\)/g) ?? [];
+    expect(literals, 'a state restates the gradient instead of setting --diag-dash-color').toEqual([]);
+  });
+});

tests/domain.test.ts

@@ -112,3 +112,45 @@ describe('the test and production deploys stay separate', () => {
     expect(netlify).toMatch(/NETLIFY_AUTH_TOKEN:\s*\$\{\{\s*secrets\.NETLIFY_AUTH_TOKEN\s*\}\}/);
   });
 });
+
+/**
+ * The Lighthouse gate audits a list of routes, and that list used to be typed
+ * out by hand. That is the same second-copy-of-a-list this file exists to
+ * forbid, and it failed the same way: /code-signing-policy had to be added in a
+ * follow-up commit, and /helper plus seventeen engine archives shipped in
+ * v1.3.0 with no audit at all, because adding a page to site.config.json does
+ * not add it to a list that lives somewhere else.
+ *
+ * The list is now derived, so these assert the derivation against dist rather
+ * than against another literal.
+ */
+describe('the accessibility gate audits what the site actually builds', () => {
+  const built: string[] = [];
+  const walk = (dir: string, prefix = '') => {
+    for (const entry of readdirSync(dir, { withFileTypes: true })) {
+      if (entry.isDirectory()) walk(`${dir}/${entry.name}`, `${prefix}/${entry.name}`);
+      else if (entry.name === 'index.html') built.push(prefix || '/');
+      else if (entry.name === '404.html') built.push('/404');
+    }
+  };
+  walk('dist');
+
+  it('covers every standalone page, so a new one cannot ship unaudited', async () => {
+    const { a11yRoutes } = await import('../scripts/a11y-routes.mjs');
+    // Blog posts and engine archives are templates over many routes; they are
+    // covered by a representative below, not one entry per post.
+    const standalone = built.filter((r) => !r.startsWith('/blog/') && !redirectPaths.includes(r));
+    const missing = standalone.filter((r) => !a11yRoutes.includes(r));
+    expect(missing, 'these pages build but are never audited').toEqual([]);
+  });
+
+  it('audits one representative of each templated family', async () => {
+    const { a11yRoutes } = await import('../scripts/a11y-routes.mjs');
+    for (const family of ['/blog/', '/blog/engine/']) {
+      const audited = a11yRoutes.filter((r: string) => r.startsWith(family) && r !== family.replace(/\/$/, ''));
+      expect(audited.length, `no ${family} page is audited`).toBeGreaterThan(0);
+      // A representative that no longer builds audits nothing.
+      for (const route of audited) expect(built, `${route} is audited but not built`).toContain(route);
+    }
+  });
+});