ferst-core 0.9.3 → 0.9.4

package/components/recipes/LatestPosts.astro

@@ -242,7 +242,7 @@ const isNew = (date: Date | string) => isRecent(date, newWithinDays, nowMs);
     padding: 0.12rem 0.45rem;
     border-radius: var(--radius-pill);
     background: var(--gold);
-    color: var(--text-light);
+    color: var(--on-brand);
     font-family: var(--font-heading);
     font-size: 0.62rem;
     font-weight: 700;

package/components/recipes/LinkRow.astro

@@ -20,7 +20,7 @@ const external = (href: string) => /^https?:\/\//i.test(href);
 ---
 
 <section class="b-linkrow">
-  {title && <Heading text={title} level={3} />}
+  {title && <Heading text={title} level={2} />}
   {intro && <p class="b-linkrow__intro" set:html={inlineMarkdown(intro)} />}
   <ul class="b-linkrow__links">
     {links.map((l) => (
@@ -36,6 +36,8 @@ const external = (href: string) => /^https?:\/\//i.test(href);
 </section>
 
 <style>
+  /* Its title is the block's heading (h2, so headings stay in order) at the h3 size it always had. */
+  .b-linkrow > :global(h2) { font-size: clamp(1.375rem, 1.2rem + 0.55vw, 1.625rem); }
   .b-linkrow {
     display: flex;
     flex-direction: column;

package/components/recipes/Locations.astro

@@ -126,7 +126,7 @@ const cols = Math.min(columns, Math.max(items.length, 1)) as 1 | 2;
   .b-loc-map__load {
     font: inherit; font-family: var(--font-heading); font-weight: 600; font-size: 0.9rem;
     padding: 0.5rem 1.1rem; border: none; border-radius: var(--radius-sm);
-    background: var(--gold); color: var(--text-light); cursor: pointer;
+    background: var(--gold); color: var(--on-brand); cursor: pointer;
     transition: filter 0.15s ease;
   }
   .b-loc-map__load:hover { filter: brightness(0.94); }

package/components/recipes/MapEmbed.astro

@@ -150,7 +150,7 @@ const safe = isSafeEmbedUrl(embedUrl);
     border: none;
     border-radius: var(--radius-sm);
     background: var(--gold);
-    color: var(--text-light);
+    color: var(--on-brand);
     cursor: pointer;
     transition: filter 0.15s ease;
   }

package/components/recipes/Pricing.astro

@@ -111,7 +111,7 @@ const headAlign = headingAlign ?? blockAlign ?? 'center';
     font-weight: 700;
     letter-spacing: 0.08em;
     text-transform: uppercase;
-    color: var(--text-light);
+    color: var(--on-brand);
     background: var(--gold);
     padding: 0.2rem 0.6rem;
     border-radius: var(--radius-pill);

package/components/recipes/Steps.astro

@@ -81,7 +81,7 @@ const headAlign = headingAlign ?? blockAlign ?? 'center';
     justify-content: center;
     border-radius: var(--radius-pill);
     background: var(--gold);
-    color: var(--text-light);
+    color: var(--on-brand);
     font-family: var(--font-heading);
     font-weight: 700;
     font-size: 1.05rem;

package/components/recipes/Tiles.astro

@@ -36,6 +36,8 @@ interface Props {
   tiles?: Tile[];
 }
 const { title, intro, columns = 3, variant = 'elevated', spotlight = false, tiles = [] } = Astro.props;
+// Headings stay in order: items sit one level under the block's title, or take its place.
+const ItemHeading = title ? 'h3' : 'h2';
 // Alignment overrides (BlockLayout): the title + intro default to centred; the block's
 // own `align`, or `headingAlign` for the title alone, overrides it from the page data.
 const { align: blockAlign, headingAlign } = Astro.props as { align?: 'start' | 'center' | 'end'; headingAlign?: 'start' | 'center' | 'end' };
@@ -73,7 +75,7 @@ const cols = Math.min(columns, Math.max(tiles.length, 1)) as 1 | 2 | 3 | 4;
             <span class="b-tile__icon"><Icon name={tile.icon} size={26} /></span>
           )}
           {tile.eyebrow && <span class="b-tile__eyebrow">{tile.eyebrow}</span>}
-          {tile.title && <h3 class="b-tile__title">{tile.title}</h3>}
+          {tile.title && <ItemHeading class="b-tile__title">{tile.title}</ItemHeading>}
           {/* A linked tile is one big link: its text keeps breaks and emphasis, no inner links. */}
           {tile.text && <p class="b-tile__text" set:html={tile.href ? inlineMarkdownNoLinks(tile.text) : inlineMarkdown(tile.text)} />}
           {tile.href && !plain && <span class="b-tile__more" aria-hidden="true">{tile.linkLabel ?? 'Learn more'} &rarr;</span>}
@@ -151,7 +153,7 @@ const cols = Math.min(columns, Math.max(tiles.length, 1)) as 1 | 2 | 3 | 4;
   }
   .b-tiles__grid[data-variant='gradient'] .b-tile {
     background: linear-gradient(135deg, var(--gold), var(--accent-2, var(--gold)));
-    color: var(--text-light);
+    color: var(--on-brand);
   }
   .b-tiles__grid[data-variant='image'] .b-tile {
     color: #fff;

package/components/recipes/Video.astro

@@ -141,7 +141,7 @@ const safeLink = /^https:\/\//i.test(url) ? url : undefined;
     border: none;
     border-radius: var(--radius-sm);
     background: var(--gold);
-    color: var(--text-light);
+    color: var(--on-brand);
     cursor: pointer;
   }
   .b-video__load:hover {

package/content/accessibility.ts

@@ -0,0 +1,62 @@
+/**
+ * The accessibility statement (`/accessibility`), generated for every site like the cookie
+ * policy: what the site does for people using keyboards, screen readers or magnification,
+ * where it falls short, and how to report a problem. Pure, so it's unit-testable; the route
+ * (routes/accessibility.astro) renders it with the site's name and contact details.
+ */
+export interface StatementSection {
+  heading: string;
+  paragraphs: string[];
+  items?: string[];
+  /** On the "reporting a problem" section, when the site has contact details. */
+  contact?: { email?: string; phone?: string };
+}
+
+export interface AccessibilityStatement {
+  title: string;
+  intro: string;
+  sections: StatementSection[];
+}
+
+export function accessibilityStatement({ siteName, email, phone }: { siteName: string; email?: string; phone?: string }): AccessibilityStatement {
+  const contact = email || phone ? { ...(email ? { email } : {}), ...(phone ? { phone } : {}) } : undefined;
+  return {
+    title: 'Accessibility',
+    intro: `${siteName} wants everyone to be able to use this website, including people who use a keyboard instead of a mouse, a screen reader, or magnification.`,
+    sections: [
+      {
+        heading: 'What you can do on this site',
+        paragraphs: ['The site is built so that you can:'],
+        items: [
+          'move around it using only a keyboard, starting with a "Skip to content" link',
+          'use it with a screen reader: pages have headings in order, landmarks and descriptions for meaningful pictures',
+          'zoom in up to 400% without text spilling off the screen, and read it on a phone',
+          'read text that stands out clearly from its background, in light and dark mode',
+          'stop moving backgrounds; they stay still if your device asks for reduced motion',
+        ],
+      },
+      {
+        heading: 'The standard we aim for',
+        paragraphs: [
+          'The site aims to meet the Web Content Accessibility Guidelines version 2.2 (WCAG 2.2) at level AA. Its layout, navigation and controls are tested for accessibility before every release of the software it runs on.',
+        ],
+      },
+      {
+        heading: 'What may not be fully accessible',
+        paragraphs: ['We know of some things that may be harder to use:'],
+        items: [
+          'some documents, such as PDF newsletters and older uploads, were not written with accessibility in mind',
+          'videos shown from other sites, such as YouTube, rely on that site for their captions',
+          'some older pictures may not have a description yet',
+        ],
+      },
+      {
+        heading: 'Reporting a problem',
+        paragraphs: contact
+          ? ['If something on this site is hard to use, or you need information in another format, please tell us. We will do our best to help.']
+          : ['If something on this site is hard to use, or you need information in another format, please get in touch through the contact page. We will do our best to help.'],
+        ...(contact ? { contact } : {}),
+      },
+    ],
+  };
+}

package/integration.mjs

@@ -22,6 +22,9 @@
  * @param {boolean} [options.calendar=true] Inject the `/calendar` route.
  * @param {boolean} [options.blog=true] Inject the blog routes (`/posts`,
  *   `/posts/[...slug]`, `/posts/tag/[...tag]`).
+ * @param {boolean} [options.accessibility=true] Inject `/accessibility`, the accessibility statement
+ *   every footer links to (content/accessibility.ts). Skipped when the site has its own
+ *   `src/pages/accessibility.astro`.
  * @param {boolean} [options.cookiePolicy=true] Inject `/cookie-policy` (the page the cookie
  *   banner links to), generated from the blocks the site uses. Skipped automatically when
  *   the site has its own `src/pages/cookie-policy.astro`.
@@ -109,7 +112,7 @@ function readSiteMeta(root) {
 const hasPublicFile = (root, name) => Boolean(root) && existsSync(new URL(`public/${name}`, root));
 
 export default function ferst(options = {}) {
-  const { calendar = true, blog = true, cookiePolicy = true, notFound = true, icons = true, seo = true } = options;
+  const { calendar = true, blog = true, cookiePolicy = true, accessibility = true, notFound = true, icons = true, seo = true } = options;
   const fonts = ferstFonts().hooks;
   /** This build's search context, decided at setup and used again when the build is done. */
   let search = null;
@@ -162,6 +165,11 @@ export default function ferst(options = {}) {
             entrypoint: 'ferst-core/routes/cookie-policy.astro',
           });
         }
+        // Every footer links to the accessibility statement. The site's own page wins.
+        const ownStatement = config?.root && existsSync(new URL('src/pages/accessibility.astro', config.root));
+        if (accessibility && !ownStatement) {
+          injectRoute({ pattern: '/accessibility', entrypoint: 'ferst-core/routes/accessibility.astro' });
+        }
         // A missing address must answer 404, not the home page (Cloudflare Pages serves the
         // home page with a 200 when a build has no 404.html). The site's own page wins.
         const ownNotFound = config?.root && existsSync(new URL('src/pages/404.astro', config.root));
@@ -175,6 +183,7 @@ export default function ferst(options = {}) {
             define: {
               'import.meta.env.FERST_ROUTES_BLOG': JSON.stringify(blog),
               'import.meta.env.FERST_ROUTES_CALENDAR': JSON.stringify(calendar),
+              'import.meta.env.FERST_ROUTES_ACCESSIBILITY': JSON.stringify(accessibility),
             },
           },
         });

package/layouts/Base.astro

@@ -256,6 +256,8 @@ const hasFeed = Boolean(siteUrl) && import.meta.env.FERST_ROUTES_BLOG !== false;
     </script>
   </head>
   <body>
+    <!-- The first thing a keyboard reaches: straight past the header to the page. -->
+    <a class="skip-link" href="#main">Skip to content</a>
     <SiteHeader
       path={path}
       headerClass={headerClass}
@@ -267,7 +269,7 @@ const hasFeed = Boolean(siteUrl) && import.meta.env.FERST_ROUTES_BLOG !== false;
       cta={navigation.cta}
     />
 
-    <main class:list={['site-main', mainClass]} data-content-align={align}>
+    <main id="main" tabindex="-1" class:list={['site-main', mainClass]} data-content-align={align}>
       <slot name="hero" />
       <slot />
       {showSecondaryLogo && (secondaryLogoLight || secondaryLogoDark) && (
@@ -301,6 +303,14 @@ const hasFeed = Boolean(siteUrl) && import.meta.env.FERST_ROUTES_BLOG !== false;
          all flow from the same variables — no per-mode hex overrides here.
       */
       * { box-sizing: border-box; }
+      /* Skip link: hidden until a keyboard reaches it, then shown at the top left. */
+      .skip-link {
+        position: absolute; left: 0.75rem; top: -100%; z-index: 1000;
+        padding: 0.6rem 1rem; border-radius: 0.375rem;
+        background: var(--fg); color: var(--bg); font-weight: 600; text-decoration: none;
+      }
+      .skip-link:focus { top: 0.75rem; outline: 2px solid var(--bg); outline-offset: 2px; }
+      #main:focus { outline: none; }
       html, body { margin: 0; padding: 0; }
       html {
         height: 100%;

package/lib/contrast.ts

@@ -0,0 +1,146 @@
+/**
+ * Colour contrast for a theme (WCAG 2.2 AA): every text and brand colour the token builder
+ * (lib/themeTokens.ts) derives, measured against the ground it sits on, in light and dark
+ * mode. Theme Studio warns before saving a theme that fails; the tests hold the neutral
+ * defaults to it. Pure, so it's unit-testable.
+ *
+ * The derivations mirror themeTokens.ts: light mode mixes in sRGB (CSS `color-mix(in srgb)`),
+ * dark mode moves the same three colours in OKLCH. A colour that isn't hex (a CSS variable or
+ * function in an override) is skipped, never guessed.
+ */
+import type { ThemeSettings } from '../content/schemas';
+import { DARK_DEFAULTS, NEUTRAL_SOURCE } from './themeDefaults';
+
+type RGB = [number, number, number]; // 0..1, gamma-encoded sRGB
+
+function parseHex(hex: string): RGB | null {
+  const m = /^#?([0-9a-f]{3}|[0-9a-f]{6})$/i.exec(String(hex ?? '').trim());
+  if (!m) return null;
+  const h = m[1].length === 3 ? m[1].split('').map((c) => c + c).join('') : m[1];
+  return [0, 2, 4].map((i) => parseInt(h.slice(i, i + 2), 16) / 255) as RGB;
+}
+
+const toLinear = (c: number) => (c <= 0.04045 ? c / 12.92 : ((c + 0.055) / 1.055) ** 2.4);
+const toGamma = (c: number) => (c <= 0.0031308 ? 12.92 * c : 1.055 * c ** (1 / 2.4) - 0.055);
+const clamp01 = (n: number) => Math.min(1, Math.max(0, n));
+
+function luminance([r, g, b]: RGB): number {
+  return 0.2126 * toLinear(r) + 0.7152 * toLinear(g) + 0.0722 * toLinear(b);
+}
+
+function ratio(a: RGB, b: RGB): number {
+  const [hi, lo] = [luminance(a), luminance(b)].sort((x, y) => y - x);
+  return (hi + 0.05) / (lo + 0.05);
+}
+
+/** WCAG contrast ratio between two hex colours (1 to 21). */
+export function contrastRatio(a: string, b: string): number {
+  const ra = parseHex(a);
+  const rb = parseHex(b);
+  if (!ra || !rb) throw new Error(`not a hex colour: ${!ra ? a : b}`);
+  return ratio(ra, rb);
+}
+
+const rgbHex = (c: RGB) => '#' + c.map((v) => Math.round(v * 255).toString(16).padStart(2, '0')).join('');
+
+/** CSS `color-mix(in srgb, a p, b)`. */
+const mix = (a: RGB, b: RGB, p: number): RGB => a.map((v, i) => v * p + b[i] * (1 - p)) as RGB;
+
+// OKLCH ⇄ sRGB (Björn Ottosson's OKLab).
+function toOklch([r, g, b]: RGB): [number, number, number] {
+  const [lr, lg, lb] = [r, g, b].map(toLinear);
+  const l = Math.cbrt(0.4122214708 * lr + 0.5363325363 * lg + 0.0514459929 * lb);
+  const m = Math.cbrt(0.2119034982 * lr + 0.6806995451 * lg + 0.1073969566 * lb);
+  const s = Math.cbrt(0.0883024619 * lr + 0.2817188376 * lg + 0.6299787005 * lb);
+  const L = 0.2104542553 * l + 0.793617785 * m - 0.0040720468 * s;
+  const A = 1.9779984951 * l - 2.428592205 * m + 0.4505937099 * s;
+  const B = 0.0259040371 * l + 0.7827717662 * m - 0.808675766 * s;
+  return [L, Math.hypot(A, B), Math.atan2(B, A)];
+}
+
+function fromOklch(L: number, C: number, h: number): RGB {
+  const A = C * Math.cos(h);
+  const B = C * Math.sin(h);
+  const l = (L + 0.3963377774 * A + 0.2158037573 * B) ** 3;
+  const m = (L - 0.1055613458 * A - 0.0638541728 * B) ** 3;
+  const s = (L - 0.0894841775 * A - 1.291485548 * B) ** 3;
+  const lin = [
+    4.0767416621 * l - 3.3077115913 * m + 0.2309699292 * s,
+    -1.2684380046 * l + 2.6097574011 * m - 0.3413193965 * s,
+    -0.0041960863 * l - 0.7034186147 * m + 1.707614701 * s,
+  ];
+  return lin.map((c) => clamp01(toGamma(clamp01(c)))) as RGB;
+}
+
+export type ContrastPair = 'text' | 'secondary-text' | 'links' | 'button-text';
+
+export interface ContrastIssue {
+  mode: 'light' | 'dark';
+  pair: ContrastPair;
+  /** What a person sees fail, in plain words. */
+  label: string;
+  ratio: number;
+  needs: number;
+}
+
+const LABELS: Record<ContrastPair, string> = {
+  text: 'Text on the page background',
+  'secondary-text': 'Secondary text (dates, captions) on the page background',
+  links: 'Links and brand-coloured text on the page background',
+  'button-text': 'Text on brand-coloured buttons',
+};
+
+/**
+ * Text on brand fills in light mode (`--on-brand`): white, or the theme's ink when that reads
+ * better on the brand (a pale brand such as a gold). In dark mode it's the dark ground. Null
+ * when either colour isn't hex.
+ */
+export function onBrandColour(brand: string, ink: string): string | null {
+  const b = parseHex(brand);
+  const i = parseHex(ink);
+  if (!b || !i) return null;
+  return ratio(i, b) > ratio([1, 1, 1], b) ? ink.trim() : '#FFFFFF';
+}
+const AA = 4.5;
+
+/**
+ * Every pair in `theme` that falls below WCAG AA (4.5:1), light mode then dark. Empty when the
+ * theme passes.
+ */
+export function contrastIssues(theme: ThemeSettings): ContrastIssue[] {
+  const brand = parseHex(theme.brand || NEUTRAL_SOURCE.brand) ?? parseHex(NEUTRAL_SOURCE.brand)!;
+  const ink = parseHex(theme.ink || NEUTRAL_SOURCE.ink) ?? parseHex(NEUTRAL_SOURCE.ink)!;
+  const surface = parseHex(theme.surface || NEUTRAL_SOURCE.surface) ?? parseHex(NEUTRAL_SOURCE.surface)!;
+
+  // Dark mode: the same three colours moved in OKLCH (themeTokens.ts DARK_DERIVATION), or the
+  // site's own overrides when they're hex.
+  const depth = typeof theme.darkDepth === 'number' ? theme.darkDepth : DARK_DEFAULTS.depth;
+  const cap = typeof theme.darkChroma === 'number' ? theme.darkChroma : DARK_DEFAULTS.chroma;
+  const [, sc, sh] = toOklch(surface);
+  const [, ic, ih] = toOklch(ink);
+  const [, bc, bh] = toOklch(brand);
+  const ov = theme.darkOverrides ?? { ground: '', text: '', accent: '' };
+  const override = (v: string | undefined) => (v ? parseHex(v) : undefined);
+  const ground = override(ov.ground) ?? (ov.ground ? null : fromOklch(depth, Math.min(Math.max(sc * 3.5, 0), cap), sh));
+  const text = override(ov.text) ?? (ov.text ? null : fromOklch(0.94, ic * 0.3, ih));
+  const accent = override(ov.accent) ?? (ov.accent ? null : fromOklch(0.78, bc * 0.9, bh));
+  const muted = text ? (() => { const [l, c, h] = toOklch(text); return fromOklch(l - 0.2, c, h); })() : null;
+
+  const checks: Array<[ContrastIssue['mode'], ContrastPair, RGB | null, RGB | null]> = [
+    ['light', 'text', ink, surface],
+    ['light', 'secondary-text', mix(ink, surface, 0.72), surface],
+    ['light', 'links', brand, surface],
+    ['light', 'button-text', parseHex(onBrandColour(rgbHex(brand), rgbHex(ink)) ?? '#FFFFFF'), brand],
+    ['dark', 'text', text, ground],
+    ['dark', 'secondary-text', muted, ground],
+    ['dark', 'links', accent, ground],
+    ['dark', 'button-text', ground, accent],
+  ];
+  const issues: ContrastIssue[] = [];
+  for (const [mode, pair, fg, bg] of checks) {
+    if (!fg || !bg) continue; // a colour we can't read: skipped, never guessed
+    const r = ratio(fg, bg);
+    if (r < AA) issues.push({ mode, pair, label: LABELS[pair], ratio: Math.round(r * 100) / 100, needs: AA });
+  }
+  return issues;
+}

package/lib/themeDefaults.ts

@@ -0,0 +1,15 @@
+/**
+ * The theme's fallbacks, shared by the token builder (themeTokens.ts) and the contrast check
+ * (contrast.ts) so both derive the same palette.
+ */
+
+/** The neutral source triple — used to fill any colour a client leaves blank so
+ *  the derivation is always self-contained (mirrors `styles/theme.css`). */
+export const NEUTRAL_SOURCE = {
+  brand: '#4F46E5',
+  ink: '#1F2937',
+  surface: '#F1F5F9',
+} as const;
+
+/** Defaults for the dark-formula knobs (also the CMS/schema defaults). */
+export const DARK_DEFAULTS = { depth: 0.21, chroma: 0.05 } as const;

package/lib/themeTokens.ts

@@ -25,14 +25,11 @@
  * Pure + framework-free so it is unit-testable without a render.
  */
 import type { ThemeSettings } from '../content/schemas';
+import { DARK_DEFAULTS, NEUTRAL_SOURCE } from './themeDefaults';
+import { onBrandColour } from './contrast';
+
+export { DARK_DEFAULTS, NEUTRAL_SOURCE };
 
-/** The neutral source triple — used to fill any colour a client leaves blank so
- *  the derivation is always self-contained (mirrors `styles/theme.css`). */
-export const NEUTRAL_SOURCE = {
-  brand: '#4F46E5',
-  ink: '#1F2937',
-  surface: '#F1F5F9',
-} as const;
 
 /** Corner-knob vocabulary → the `--radius` value every surface reads. */
 export const CORNERS_PX: Record<ThemeSettings['corners'], string> = {
@@ -111,10 +108,11 @@ const DARK_DOWNSTREAM = [
   '--gold-light:oklch(from var(--dark-accent) calc(l - 0.46) calc(c * 0.6) h)',
   '--accent-2:oklch(from var(--dark-accent) calc(l - 0.08) c calc(h + 26))',
   '--text-footer-link:var(--dark-accent)',
+  // Text on brand fills: the accent is light in dark mode, so its text is the dark ground
+  // (light text on it fell to ~1.9:1; lib/contrast.ts checks it).
+  '--on-brand:var(--dark-ground)',
 ].join(';');
 
-/** Defaults for the dark-formula knobs (also the CMS/schema defaults). */
-export const DARK_DEFAULTS = { depth: 0.21, chroma: 0.05 } as const;
 
 /** Clamp a numeric knob to a range, falling back to `fallback` when absent/NaN. */
 function clampNum(v: unknown, min: number, max: number, fallback: number): number {
@@ -188,6 +186,10 @@ export function buildThemeStyle(theme: ThemeSettings): ThemeStyle {
     rootDecls.push(`--brand:${brand || NEUTRAL_SOURCE.brand}`);
     rootDecls.push(`--ink:${ink || NEUTRAL_SOURCE.ink}`);
     rootDecls.push(`--surface:${surface || NEUTRAL_SOURCE.surface}`);
+    // Text on brand fills: white or the ink, whichever reads better on the brand (dark mode
+    // overrides it with the dark ground). A colour it can't read leaves theme.css's white.
+    const onBrand = onBrandColour(brand || NEUTRAL_SOURCE.brand, ink || NEUTRAL_SOURCE.ink);
+    if (onBrand) rootDecls.push(`--on-brand:${onBrand}`);
   }
   const fh = clean(theme.fonts?.heading);
   const fb = clean(theme.fonts?.body);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ferst-core",
-  "version": "0.9.3",
+  "version": "0.9.4",
   "type": "module",
   "description": "Ferst Core — the shared, brand-agnostic client-site system: Astro components, layouts, content schemas, the layered config resolver, and a neutral styling architecture that every client overrides.",
   "license": "BUSL-1.1",

package/routes/accessibility.astro

@@ -0,0 +1,44 @@
+---
+/**
+ * The accessibility statement (`/accessibility`) — INJECTED by the ferst() integration, and
+ * linked from every page's footer. Generated from the site's name and contact details
+ * (content/accessibility.ts). A site with its own `src/pages/accessibility.astro` keeps it
+ * (the integration skips this route then).
+ */
+import Base from '../layouts/Base.astro';
+import { loadSiteSettings } from '../lib/siteSettings';
+import { accessibilityStatement } from '../content/accessibility';
+
+const { identity, contact } = await loadSiteSettings();
+const statement = accessibilityStatement({
+  siteName: identity.siteTitle || identity.shortName,
+  email: contact.email || undefined,
+  phone: contact.phoneDisplay || undefined,
+});
+const tel = contact.phoneTel || contact.phoneDisplay;
+---
+
+<Base title={statement.title} description={`How ${identity.shortName || identity.siteTitle} works for everyone, and how to report a problem.`}>
+  <section class="b-accessibility">
+    <h1>{statement.title}</h1>
+    <p>{statement.intro}</p>
+    {statement.sections.map((s) => (
+      <>
+        <h2>{s.heading}</h2>
+        {s.paragraphs.map((p) => <p>{p}</p>)}
+        {s.items && <ul>{s.items.map((i) => <li>{i}</li>)}</ul>}
+        {s.contact && (
+          <ul>
+            {s.contact.email && <li>Email: <a href={`mailto:${s.contact.email}`}>{s.contact.email}</a></li>}
+            {s.contact.phone && <li>Phone: <a href={`tel:${tel}`}>{s.contact.phone}</a></li>}
+          </ul>
+        )}
+      </>
+    ))}
+  </section>
+</Base>
+
+<style>
+  .b-accessibility { max-width: 52rem; margin-inline: auto; padding: 2rem 1rem 3rem; }
+  .b-accessibility ul { padding-inline-start: 1.25rem; }
+</style>

package/styles/theme.css

@@ -41,6 +41,7 @@
   --gold-light: #E0E7FF;
   --brown: #4B5563;
   --text-light: #FFFFFF;
+  --on-brand: #FFFFFF; /* text on brand-coloured fills (buttons, badges) */
   --text-footer: #4B5563;
   --text-footer-link: #4F46E5;
   --text-copyright: #94A3B8;
@@ -109,6 +110,7 @@
   --gold-light: #312E81;
   --brown: #94A3B8;
   --text-light: #E2E8F0;
+  --on-brand: #0F172A; /* the light accent needs dark text */
   --text-footer: #94A3B8;
   --text-footer-link: #818CF8;
   --text-copyright: #64748B;