/* ═══════════════════════════════════════════════════════════════════════════ THE LIBRARY'S ACCESSIBILITY PREFERENCES — shared logic, tenant-owned colour. ⭐ S186. The owner asked for the widget on the templates the way the platform demos already carry it: *"we should be making all demos wcag ccompliant with the accessbility widget where possible as we have done with neubor, thsi should be a good selling feature"*. He also said why: *"i have learning dissabilities my self so these things mattter to others"*. So the bar is that a preference actually HOLDS — across a paint, a navigation and a session — not that a panel exists. ⛔ THIS FILE IS SHARED AND COPIED AT BUILD TIME, NOT RETYPED PER PACKAGE. `assistant.js` is byte-identical in eight packages with no sync mechanism; that is the repo's most expensive recurring defect (a value retyped at a second construction site, then drifting). `scripts/build.mjs` copies this in, so there is exactly one copy in git. ⛔ WHAT IS DELIBERATELY *NOT* HERE: the `contrast="high"` and `colour="safe"` token overrides. Those have to name the tenant's own CSS variables, and the 20 templates do NOT share a vocabulary — measured S186: `--ink` 19/20, `--muted` 19/20, `--line` 18/20, `--card` 17/20. "Nearly universal" is precisely the shape that works in dev and vanishes in production, so those two blocks live in each template's own styles.css and `check-library-a11y.mjs` fails the build if a package ships the widget without them. Everything in THIS file is name-independent and therefore safe to share. ⛔ DELIBERATELY UNLAYERED, exactly as the platform's tokens.css is: a reader's stated need must beat whatever the template author happened to write. ⚠ NO `theme` (page-colour) GROUP. These templates have one authored canvas each and no dark recipe has ever been rendered, let alone measured. Offering a switch that flips them would ship an untested page to the reader who most needs a working one — the same reasoning the platform demo panel records. High contrast covers the strongest need. ⛔ AND IT IS NOT A COMPLIANCE CLAIM. What this ships is controls a reader can use. Whether any given template passes WCAG is a measurement, and this repo never says "compliant". ═══════════════════════════════════════════════════════════════════════════ */ /* ── Text size ─────────────────────────────────────────────────────────────── Scales the ROOT font size so every rem-based size moves together and nothing has to be re-authored. Percentages, not px, so a reader who already set a larger browser default keeps that as their baseline. */ html[data-a11y-text="large"] { font-size: 112.5%; } html[data-a11y-text="larger"] { font-size: 125%; } /* ── Easier reading ────────────────────────────────────────────────────────── ⚠ NO FONT IS DOWNLOADED, and that is evidence-led rather than lazy. The obvious move is OpenDyslexic; the research does not show it beating a plain sans-serif, and it would cost ~100KB on packages whose whole pitch is that they carry no fonts, icons, CDNs or trackers. This implements the British Dyslexia Association's own style guidance instead — a wide sans, generous letter and word spacing, tall lines, short measure, no italics for emphasis. Every one of those is free. */ html[data-a11y-font="readable"] body, html[data-a11y-font="readable"] h1, html[data-a11y-font="readable"] h2, html[data-a11y-font="readable"] h3, html[data-a11y-font="readable"] h4, html[data-a11y-font="readable"] h5, html[data-a11y-font="readable"] h6 { font-family: Verdana, Tahoma, "Trebuchet MS", system-ui, sans-serif !important; } html[data-a11y-font="readable"] body { letter-spacing: 0.045em; word-spacing: 0.14em; line-height: 1.75; } html[data-a11y-font="readable"] p, html[data-a11y-font="readable"] li { max-width: 66ch; text-align: left !important; text-wrap: pretty; } html[data-a11y-font="readable"] em, html[data-a11y-font="readable"] i { font-style: normal; font-weight: 600; } /* ── Text spacing ──────────────────────────────────────────────────────────── ⭐ THE "MAXIMUM" VALUES ARE NOT A TASTE DECISION — THEY ARE THE WCAG TEST. SC 1.4.12 (Text Spacing, AA) says content must survive a reader overriding line-height 1.5×, paragraph spacing 2×, letter-spacing 0.12em and word-spacing 0.16em. Shipping the criterion as a CONTROL is what makes it hold: a criterion nobody can switch on gets checked when somebody remembers. */ html[data-a11y-spacing="comfortable"] body { letter-spacing: 0.06em; word-spacing: 0.16em; line-height: 1.7; } html[data-a11y-spacing="comfortable"] p { margin-bottom: 1.5em; } html[data-a11y-spacing="maximum"] body, html[data-a11y-spacing="maximum"] p, html[data-a11y-spacing="maximum"] li, html[data-a11y-spacing="maximum"] h1, html[data-a11y-spacing="maximum"] h2, html[data-a11y-spacing="maximum"] h3, html[data-a11y-spacing="maximum"] h4, html[data-a11y-spacing="maximum"] h5, html[data-a11y-spacing="maximum"] h6, html[data-a11y-spacing="maximum"] a, html[data-a11y-spacing="maximum"] span, html[data-a11y-spacing="maximum"] button { line-height: 1.5 !important; letter-spacing: 0.12em !important; word-spacing: 0.16em !important; } html[data-a11y-spacing="maximum"] p { margin-bottom: 2em !important; } /* ⚠ `anywhere`, NOT `break-word`. Both break a word that is already overflowing, but only `anywhere` reduces the element's MIN-CONTENT width — and horizontal scroll under a spacing override is an intrinsic-sizing problem, so `break-word` looks like the right property and measurably does nothing. */ html[data-a11y-spacing] p, html[data-a11y-spacing] li, html[data-a11y-spacing] h1, html[data-a11y-spacing] h2, html[data-a11y-spacing] h3, html[data-a11y-spacing] h4 { overflow-wrap: anywhere; text-wrap: pretty; } /* A nowrap control cannot honour a spacing override — it just pushes the page wider. */ html[data-a11y-spacing] a, html[data-a11y-spacing] button { white-space: normal !important; overflow-wrap: anywhere; } /* Flex/grid children default to min-width:auto and refuse to shrink below their content. That is what actually propagates an over-wide word up to . */ html[data-a11y-spacing] main :is(div, section, article, header, footer, li) { min-width: 0; } /* ── Colour vision · `mono` ────────────────────────────────────────────────── ⛔ NEVER FILTER `body` ITSELF. A filter creates a containing block for fixed descendants, so the accessibility launcher would stop being viewport-fixed, scroll away on a long page and strand the reader inside the very preference they are trying to reverse. Filter each top-level surface and exempt the control. `a11y.js` carries the matching `data-a11y-filter-exempt`, and the gate binds that agreement. ⚠ `safe` is NOT here — it has to name the tenant's own accent variables. See the header. */ html[data-a11y-colour="mono"] body > :not([data-a11y-filter-exempt]) { filter: grayscale(1); } /* Removing hue means anything distinguished ONLY by colour must be distinguished another way, or this option would simply hide information. */ html[data-a11y-colour="mono"] main a, html[data-a11y-colour="mono"] footer a, html[data-a11y-colour="mono"] header a { text-decoration: underline; text-underline-offset: 0.2em; } /* ── High contrast — the name-independent half ─────────────────────────────── Boundaries and link affordance only. The tenant's styles.css supplies the ink/canvas pair, because only it knows what its variables are called. */ html[data-a11y-contrast="high"] main a, html[data-a11y-contrast="high"] footer a, html[data-a11y-contrast="high"] header a { text-decoration: underline; text-underline-offset: 0.2em; } /* :focus-visible must survive everything above — it is the one indicator a keyboard user cannot do without. */ html[data-a11y-contrast="high"] :focus-visible { outline: 3px solid currentColor !important; outline-offset: 2px !important; } /* ── Always-underline links ────────────────────────────────────────────────── WCAG 1.4.1: colour must not be the only way to tell a link from text. */ html[data-a11y-underline="on"] main a, html[data-a11y-underline="on"] footer a, html[data-a11y-underline="on"] header a { text-decoration: underline; text-underline-offset: 0.2em; } /* ── Movement off ──────────────────────────────────────────────────────────── The same suppression as the reduced-motion media query, driven by the switch, for a reader whose OS setting is not set or who is on a borrowed machine. */ html[data-a11y-motion="off"] *, html[data-a11y-motion="off"] *::before, html[data-a11y-motion="off"] *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; } html[data-a11y-motion="off"] { scroll-behavior: auto !important; } /* ═══════════════════════════════════════════════════════════════════════════ THE PANEL ITSELF. This markup is authored here, so it may use its own variables — the `--a11y-*` contract, each falling back to the token most templates happen to share and then to a literal. A template that maps nothing still gets a legible panel; the gate is what stops a package quietly relying on the fallback. ⚠ BOTTOM-LEFT, because `assistant.js` owns bottom-right (fixed, z-index 40/41) on every package that carries it. Two floating buttons in one corner is how you end up with neither being pressed, and at 390px they would overlap outright. ═══════════════════════════════════════════════════════════════════════════ */ .a11y-dock { position: fixed; left: 1.1rem; bottom: 1.1rem; z-index: 42; font-family: var(--a11y-sans, var(--sans, system-ui, sans-serif)); } /* ⛔ S293 — on mobile the bottom-LEFT dock printed over left-aligned form labels ("Postcode"→"stcode" on every demo's booking/quote page — caught by two blind render judges, verified on the render). Form labels + body copy are left-aligned and there is no bottom-right widget in the library demos, so the dock moves to the right on narrow screens where it clears the content column. */ @media (max-width: 640px) { .a11y-dock { left: auto; right: 1.1rem; } } @media print { .a11y-dock { display: none; } } /* ⛔ RESERVE THE SPACE THE FIXED DOCKS SIT IN. Found by LOOKING at the rendered footer, not by any assertion: the launcher printed over "3 Market Row, Ashcombe" and the assistant pill printed over the truth notice. It is the same defect already recorded against the Marrow demo (a fixed launcher over the "01 MEASURE" card), which is the tell that it is structural rather than a one-off — a page whose last element is a footer will always end underneath anything fixed to the bottom of the viewport. Two launchers, ~4.1rem tall each, so 5.5rem clears both with room. `body > footer` is (0,0,2) and beats the templates' own `footer` shorthand, and this file loads after styles.css. Name-independent: every package in the library ends in a