@motion-proto/live-tokens 0.98.2 → 0.99.0

package/CHANGELOG.md

@@ -1,5 +1,72 @@
 # Changelog
 
+## 0.99.0 — Accessibility reports by theme
+
+### Changed
+
+- **Each theme keeps its own accessibility report, in the data directory.**
+  The dev server writes a theme's last finished run to
+  `<dataDir>/_a11y-reports/<theme>.json`, and the editor shows the open
+  theme's report. The single report used to sit in `test-results/live-tokens/`,
+  which Playwright and other test tools clear, so a test run could erase it.
+  A failed run now leaves the theme's last report in place, and deleting a
+  theme deletes its report. `GET /a11y/report` answers `{ running, reports }`.
+  Add `_a11y-reports/` to the project's `.gitignore`; projects made with
+  `create` now ignore it. Test runs leave it out of their copy of the data
+  tree.
+- **A contrast failure fixed since the run turns green.** The editor
+  re-measures each contrast failure of the last run as you edit. Once one
+  passes, its row in the component's panel and in the Accessibility view
+  shows the run's ratio and the ratio now, and it no longer counts as an
+  issue.
+- **Component defaults and the shipped themes pass WCAG AA contrast.**
+  Every contrast pair the editor checks now passes in the default theme and
+  all eight presets. Slider: fill `--border-brand-medium`, thumb and hover
+  thumb `--text-primary`. Toggle: resting thumb `--text-primary`, as its
+  other states already were. ProgressBar: fill `--border-special-medium`.
+  SlidePager: hover icon `--text-primary`. TabBar: selected underline
+  `--border-brand-strong`. Input: focus ring `--border-brand-strong`.
+  Button secondary, success and warning hovers and the MenuSelect hover sit
+  one surface step lighter, and InlineEditActions' cancel hover icon is
+  `--text-primary`. Halloween's page gradient ends on canvas 800. Themes you
+  saved keep their own values.
+- **The Accessibility overview table lists components by the fixes a theme
+  can make.** Rows sort by "Fix with a property", then by "Fix in the
+  component's code". The bar column and its colour key are gone.
+- **Results to check by eye carry an eye.** The component list, the
+  component panel, and each property row draw a grey eye for them in place of
+  the warning triangle or the "?". They no longer count toward a component's
+  issues.
+
+### Added
+
+- **Looks right marks a result to check by eye as judged.** Each such row in
+  the Accessibility view and the component panel has the button at its right
+  edge. A marked row dims, stops counting, and drops its marks from the
+  editor. The open theme's report keeps the mark through every later run
+  that finds the same result. The dev server stores it in the report and
+  answers `PUT /a11y/confirmed` with `{ theme, messages, confirmed }`.
+- **The By eye list gathers every result to check by eye.** It closes the
+  Accessibility view: the results to check first, under a tally and a
+  progress bar, then the marked ones in a closed group to revisit. Marking one moves focus to
+  the next. **Mark all as looking right** marks the rest in one step. A
+  result marked as looking right raises nothing elsewhere: no sidebar mark,
+  no component panel, and no property mark. A component whose results all
+  look right leaves the overview table, the component sections, and the
+  sidebar.
+
+### Fixed
+
+- **Contrast checks pass parts that paint nothing or only decorate.** A non-text part
+  painted fully transparent, such as an unselected tab's underline, passes.
+  Section divider hairlines are decorative and carry no contrast pair.
+- **The focus checks judge what focus changes.** A state view that forces
+  the focused look, such as Input's, lifts it while focus is measured, so
+  SIA-R65 sees the change and the focus ring's contrast is measured. A ring
+  drawn on a sibling, as Slider draws it, settles SIA-R65's "can't tell". A
+  ring that spills past the preview is measured against `--page-bg` and no
+  longer against the editor's own surfaces.
+
 ## 0.98.2 — Accessibility testing
 
 The v0.98.0 and v0.98.1 tags never reached npm. Release checks stopped both:

package/bin/contractRunner.mjs

@@ -59,7 +59,7 @@ function testsTimeoutMs() {
 // Mirrors src/testing/isolation.ts's own list. Duplicated rather than shared:
 // that module compiles into src/testing-js, which does not exist until
 // `build:testing` runs, and this one ships unbuilt.
-const SESSION_FILES = new Set(['_working.json', '_active.json', '_production.json']);
+const SESSION_FILES = new Set(['_working.json', '_active.json', '_production.json', '_a11y-reports']);
 const THEME_POINTER = join('themes', '_active.json');
 
 const REQUIRED_TOOLS = [
@@ -229,7 +229,7 @@ export function copyIsolatedDataDir(sourceDataDir, { keepActive = false } = {})
   cpSync(sourceDataDir, dataDir, { recursive: true });
   for (const entry of readdirSync(dataDir, { recursive: true })) {
     if (keepActive && entry === THEME_POINTER) continue;
-    if (SESSION_FILES.has(basename(entry))) rmSync(join(dataDir, entry), { force: true });
+    if (SESSION_FILES.has(basename(entry))) rmSync(join(dataDir, entry), { recursive: true, force: true });
   }
   return dataDir;
 }

package/bin/rules/a11y.mjs

@@ -32,7 +32,7 @@ export const componentRules = {
   'a11y-focus-visible': {
     severity: 'warn',
     repair: 'authored',
-    guidance: `Siteimprove Alfa rule SIA-R65 found no visible change when the element takes focus. ${HELP} Give the element a :focus-visible style, such as an outline, that differs from its resting style. Alfa reads only the element, its descendants, and its ancestors, so confirm by eye a focus style painted on a sibling.`,
+    guidance: `Siteimprove Alfa rule SIA-R65 found no visible change when the element takes focus. ${HELP} Give the element a :focus-visible style, such as an outline, that differs from its resting style. Alfa reads only the element, its descendants, and its ancestors. The suite's focus probe also reads the element's siblings and drops the finding when it finds the ring there.`,
   },
   'a11y-keyboard': {
     severity: 'warn',

package/dist-plugin/index.cjs

@@ -5624,7 +5624,7 @@ var import_node_child_process = require("child_process");
 var import_node_fs = __toESM(require("fs"), 1);
 var import_node_path2 = __toESM(require("path"), 1);
 var A11Y_RUN_ARGS = ["check-component", "--tests", "--a11y", "--no-fix", "--json", "--open-theme"];
-var A11Y_REPORT_PATH = import_node_path2.default.join("test-results", "live-tokens", "a11y-report.json");
+var A11Y_REPORTS_DIR_NAME = "_a11y-reports";
 var STDERR_TAIL = 2e3;
 var CONTRAST_ROLES = /* @__PURE__ */ new Set(["text", "non-text"]);
 function spawnCli(cliPath) {
@@ -5657,12 +5657,30 @@ function parseCliReport(stdout) {
     return null;
   }
 }
-function a11yRunServer({ root, reportFile, runCli, broadcast }) {
+function a11yRunServer({ root, reportsDir, openTheme, runCli, broadcast }) {
   let running = null;
-  function current() {
-    if (running) return running.report;
-    if (!import_node_fs.default.existsSync(reportFile)) return null;
-    return JSON.parse(import_node_fs.default.readFileSync(reportFile, "utf-8"));
+  const reportFile = (theme) => import_node_path2.default.join(reportsDir, `${theme}.json`);
+  function readReport(theme) {
+    const listed = import_node_fs.default.existsSync(reportsDir) && import_node_fs.default.readdirSync(reportsDir).includes(`${theme}.json`);
+    return listed ? JSON.parse(import_node_fs.default.readFileSync(reportFile(theme), "utf-8")) : null;
+  }
+  function writeReport(report) {
+    import_node_fs.default.mkdirSync(reportsDir, { recursive: true });
+    import_node_fs.default.writeFileSync(reportFile(report.theme), `${JSON.stringify(report, null, 2)}
+`);
+  }
+  function withConfirmed(report, confirmed) {
+    const review = new Set(report.findings.filter((f) => f.rule === "a11y-review").map((f) => f.message));
+    const kept = [...new Set(confirmed)].filter((message) => review.has(message)).sort();
+    const out = { ...report, confirmed: kept };
+    if (kept.length === 0) delete out.confirmed;
+    return out;
+  }
+  function reports() {
+    if (!import_node_fs.default.existsSync(reportsDir)) return {};
+    return Object.fromEntries(
+      import_node_fs.default.readdirSync(reportsDir).filter((name) => name.endsWith(".json")).map((name) => [name.slice(0, -".json".length), JSON.parse(import_node_fs.default.readFileSync(import_node_path2.default.join(reportsDir, name), "utf-8"))])
+    );
   }
   function settle(started, outcome) {
     const finishedAt = (/* @__PURE__ */ new Date()).toISOString();
@@ -5681,7 +5699,6 @@ ${stderr}` : ""}`
       ...started,
       state: "finished",
       finishedAt,
-      ...cli.theme ? { theme: cli.theme } : {},
       findings: cli.findings.filter((f) => f.details?.engineRule !== "color-contrast")
     };
   }
@@ -5696,23 +5713,45 @@ ${stderr}` : ""}`
         body: { error: "Body must be { contrast: [...] } with one entry per failing pair", code: "INVALID_BODY" }
       };
     }
-    const report = { state: "running", startedAt: (/* @__PURE__ */ new Date()).toISOString(), contrast };
+    const report = { state: "running", startedAt: (/* @__PURE__ */ new Date()).toISOString(), theme: openTheme(), contrast };
     const run = runCli(A11Y_RUN_ARGS, root);
     running = { report, stop: run.stop };
     broadcast(report);
     void run.done.then((outcome) => {
       const settled = settle(report, outcome);
-      import_node_fs.default.mkdirSync(import_node_path2.default.dirname(reportFile), { recursive: true });
-      import_node_fs.default.writeFileSync(reportFile, `${JSON.stringify(settled, null, 2)}
-`);
+      const final = settled.state === "finished" ? withConfirmed(settled, readReport(settled.theme)?.confirmed ?? []) : settled;
+      if (final.state === "finished") writeReport(final);
       running = null;
-      broadcast(settled);
+      broadcast(final);
     });
     return { status: 202, body: report };
   }
+  function confirm(body) {
+    const { theme, messages, confirmed } = body ?? {};
+    if (typeof theme !== "string" || typeof confirmed !== "boolean" || !Array.isArray(messages) || !messages.every((m) => typeof m === "string")) {
+      return {
+        status: 400,
+        body: { error: "Body must be { theme, messages: [...], confirmed: true | false }", code: "INVALID_BODY" }
+      };
+    }
+    const report = readReport(theme);
+    if (!report) return { status: 404, body: { error: `No report for theme "${theme}"`, code: "NO_REPORT" } };
+    const marked = new Set(report.confirmed ?? []);
+    for (const message of messages) {
+      if (confirmed) marked.add(message);
+      else marked.delete(message);
+    }
+    const updated = withConfirmed(report, marked);
+    writeReport(updated);
+    broadcast(updated);
+    return { status: 200, body: updated };
+  }
   return {
     start,
-    report: () => ({ status: 200, body: { report: current() } }),
+    confirm,
+    report: () => ({ status: 200, body: { running: running?.report ?? null, reports: reports() } }),
+    /** Removes a deleted theme's report. */
+    forget: (theme) => import_node_fs.default.rmSync(reportFile(theme), { force: true }),
     stop: () => running?.stop()
   };
 }
@@ -5780,7 +5819,7 @@ function themeFileApi(opts) {
   const ISOLATED_DATA_DIR = testDataDir();
   const GENERATED_CSS_PATH = ISOLATED_DATA_DIR ? import_path5.default.join(ISOLATED_DATA_DIR, "tokens.generated.css") : opts.tokensGeneratedCssPath ? import_path5.default.resolve(opts.tokensGeneratedCssPath) : import_path5.default.join(dataDirs.dataDir, "tokens.generated.css");
   const FONTS_CSS_PATH = ISOLATED_DATA_DIR ? import_path5.default.join(ISOLATED_DATA_DIR, "fonts.css") : opts.fontsCssPath ? import_path5.default.resolve(opts.fontsCssPath) : import_path5.default.join(import_path5.default.dirname(CSS_PATH), "fonts.css");
-  const A11Y_REPORT_FILE = ISOLATED_DATA_DIR ? import_path5.default.join(ISOLATED_DATA_DIR, import_path5.default.basename(A11Y_REPORT_PATH)) : import_path5.default.join(process.cwd(), A11Y_REPORT_PATH);
+  const A11Y_REPORTS_DIR = import_path5.default.join(dataDirs.dataDir, A11Y_REPORTS_DIR_NAME);
   const API_BASE = opts.apiBase ?? "/api/live-tokens";
   const consumerComponentDirs = opts.componentsSrcDir ? [import_path5.default.resolve(opts.componentsSrcDir)] : [import_path5.default.resolve("src/components"), import_path5.default.resolve("src/system/components")];
   const packageComponentsDir = import_path5.default.resolve(
@@ -6464,6 +6503,7 @@ ${lines.join("\n")}
   const EVENTS_ROUTE = `${API_BASE}/events`;
   const A11Y_RUN_ROUTE = `${API_BASE}/a11y/run`;
   const A11Y_REPORT_ROUTE = `${API_BASE}/a11y/report`;
+  const A11Y_CONFIRMED_ROUTE = `${API_BASE}/a11y/confirmed`;
   async function handleListColorsAndType(_ctx) {
     const files = colorsAndTypeResource.listNames().map((fileName) => {
       const data = colorsAndTypeResource.readJson(fileName);
@@ -6802,6 +6842,7 @@ ${lines.join("\n")}
           }
         }
         import_fs5.default.unlinkSync(filePath);
+        a11yRuns.forget(fileName);
         if (themesResource.existingPath(fileName) === null && deletingActive) {
           themesResource.setActiveName("default");
         }
@@ -6899,7 +6940,8 @@ data: ${JSON.stringify(state)}
   const eventClients = /* @__PURE__ */ new Set();
   const a11yRuns = a11yRunServer({
     root: process.cwd(),
-    reportFile: A11Y_REPORT_FILE,
+    reportsDir: A11Y_REPORTS_DIR,
+    openTheme: () => themesResource.getActiveName(),
     runCli: spawnCli(PACKAGE_CLI_PATH),
     broadcast: (report) => {
       const frame = `event: ${A11Y_EVENT}
@@ -6919,6 +6961,16 @@ data: ${JSON.stringify(report)}
     const answer = a11yRuns.start(body);
     jsonResponse(res, answer.status, answer.body);
   }
+  async function handleConfirmA11yReview({ req, res }) {
+    let body;
+    try {
+      body = JSON.parse(await readBody(req));
+    } catch {
+      body = void 0;
+    }
+    const answer = a11yRuns.confirm(body);
+    jsonResponse(res, answer.status, answer.body);
+  }
   async function handleGetA11yReport({ res }) {
     const answer = a11yRuns.report();
     jsonResponse(res, answer.status, answer.body);
@@ -7202,6 +7254,10 @@ data: ${JSON.stringify(report)}
     { method: "PUT", pattern: A11Y_REPORT_ROUTE, handler: methodNotAllowed },
     { method: "POST", pattern: A11Y_REPORT_ROUTE, handler: methodNotAllowed },
     { method: "DELETE", pattern: A11Y_REPORT_ROUTE, handler: methodNotAllowed },
+    { method: "PUT", pattern: A11Y_CONFIRMED_ROUTE, handler: handleConfirmA11yReview },
+    { method: "GET", pattern: A11Y_CONFIRMED_ROUTE, handler: methodNotAllowed },
+    { method: "POST", pattern: A11Y_CONFIRMED_ROUTE, handler: methodNotAllowed },
+    { method: "DELETE", pattern: A11Y_CONFIRMED_ROUTE, handler: methodNotAllowed },
     { method: "PUT", pattern: PRODUCTION_ROUTE, handler: handleAdoptTheme },
     { method: "GET", pattern: PRODUCTION_ROUTE, handler: methodNotAllowed },
     { method: "POST", pattern: PRODUCTION_ROUTE, handler: methodNotAllowed },

package/dist-plugin/index.js

@@ -753,7 +753,7 @@ import { spawn } from "child_process";
 import fs2 from "fs";
 import path3 from "path";
 var A11Y_RUN_ARGS = ["check-component", "--tests", "--a11y", "--no-fix", "--json", "--open-theme"];
-var A11Y_REPORT_PATH = path3.join("test-results", "live-tokens", "a11y-report.json");
+var A11Y_REPORTS_DIR_NAME = "_a11y-reports";
 var STDERR_TAIL = 2e3;
 var CONTRAST_ROLES = /* @__PURE__ */ new Set(["text", "non-text"]);
 function spawnCli(cliPath) {
@@ -786,12 +786,30 @@ function parseCliReport(stdout) {
     return null;
   }
 }
-function a11yRunServer({ root, reportFile, runCli, broadcast }) {
+function a11yRunServer({ root, reportsDir, openTheme, runCli, broadcast }) {
   let running = null;
-  function current() {
-    if (running) return running.report;
-    if (!fs2.existsSync(reportFile)) return null;
-    return JSON.parse(fs2.readFileSync(reportFile, "utf-8"));
+  const reportFile = (theme) => path3.join(reportsDir, `${theme}.json`);
+  function readReport(theme) {
+    const listed = fs2.existsSync(reportsDir) && fs2.readdirSync(reportsDir).includes(`${theme}.json`);
+    return listed ? JSON.parse(fs2.readFileSync(reportFile(theme), "utf-8")) : null;
+  }
+  function writeReport(report) {
+    fs2.mkdirSync(reportsDir, { recursive: true });
+    fs2.writeFileSync(reportFile(report.theme), `${JSON.stringify(report, null, 2)}
+`);
+  }
+  function withConfirmed(report, confirmed) {
+    const review = new Set(report.findings.filter((f) => f.rule === "a11y-review").map((f) => f.message));
+    const kept = [...new Set(confirmed)].filter((message) => review.has(message)).sort();
+    const out = { ...report, confirmed: kept };
+    if (kept.length === 0) delete out.confirmed;
+    return out;
+  }
+  function reports() {
+    if (!fs2.existsSync(reportsDir)) return {};
+    return Object.fromEntries(
+      fs2.readdirSync(reportsDir).filter((name) => name.endsWith(".json")).map((name) => [name.slice(0, -".json".length), JSON.parse(fs2.readFileSync(path3.join(reportsDir, name), "utf-8"))])
+    );
   }
   function settle(started, outcome) {
     const finishedAt = (/* @__PURE__ */ new Date()).toISOString();
@@ -810,7 +828,6 @@ ${stderr}` : ""}`
       ...started,
       state: "finished",
       finishedAt,
-      ...cli.theme ? { theme: cli.theme } : {},
       findings: cli.findings.filter((f) => f.details?.engineRule !== "color-contrast")
     };
   }
@@ -825,23 +842,45 @@ ${stderr}` : ""}`
         body: { error: "Body must be { contrast: [...] } with one entry per failing pair", code: "INVALID_BODY" }
       };
     }
-    const report = { state: "running", startedAt: (/* @__PURE__ */ new Date()).toISOString(), contrast };
+    const report = { state: "running", startedAt: (/* @__PURE__ */ new Date()).toISOString(), theme: openTheme(), contrast };
     const run = runCli(A11Y_RUN_ARGS, root);
     running = { report, stop: run.stop };
     broadcast(report);
     void run.done.then((outcome) => {
       const settled = settle(report, outcome);
-      fs2.mkdirSync(path3.dirname(reportFile), { recursive: true });
-      fs2.writeFileSync(reportFile, `${JSON.stringify(settled, null, 2)}
-`);
+      const final = settled.state === "finished" ? withConfirmed(settled, readReport(settled.theme)?.confirmed ?? []) : settled;
+      if (final.state === "finished") writeReport(final);
       running = null;
-      broadcast(settled);
+      broadcast(final);
     });
     return { status: 202, body: report };
   }
+  function confirm(body) {
+    const { theme, messages, confirmed } = body ?? {};
+    if (typeof theme !== "string" || typeof confirmed !== "boolean" || !Array.isArray(messages) || !messages.every((m) => typeof m === "string")) {
+      return {
+        status: 400,
+        body: { error: "Body must be { theme, messages: [...], confirmed: true | false }", code: "INVALID_BODY" }
+      };
+    }
+    const report = readReport(theme);
+    if (!report) return { status: 404, body: { error: `No report for theme "${theme}"`, code: "NO_REPORT" } };
+    const marked = new Set(report.confirmed ?? []);
+    for (const message of messages) {
+      if (confirmed) marked.add(message);
+      else marked.delete(message);
+    }
+    const updated = withConfirmed(report, marked);
+    writeReport(updated);
+    broadcast(updated);
+    return { status: 200, body: updated };
+  }
   return {
     start,
-    report: () => ({ status: 200, body: { report: current() } }),
+    confirm,
+    report: () => ({ status: 200, body: { running: running?.report ?? null, reports: reports() } }),
+    /** Removes a deleted theme's report. */
+    forget: (theme) => fs2.rmSync(reportFile(theme), { force: true }),
     stop: () => running?.stop()
   };
 }
@@ -908,7 +947,7 @@ function themeFileApi(opts) {
   const ISOLATED_DATA_DIR = testDataDir();
   const GENERATED_CSS_PATH = ISOLATED_DATA_DIR ? path4.join(ISOLATED_DATA_DIR, "tokens.generated.css") : opts.tokensGeneratedCssPath ? path4.resolve(opts.tokensGeneratedCssPath) : path4.join(dataDirs.dataDir, "tokens.generated.css");
   const FONTS_CSS_PATH = ISOLATED_DATA_DIR ? path4.join(ISOLATED_DATA_DIR, "fonts.css") : opts.fontsCssPath ? path4.resolve(opts.fontsCssPath) : path4.join(path4.dirname(CSS_PATH), "fonts.css");
-  const A11Y_REPORT_FILE = ISOLATED_DATA_DIR ? path4.join(ISOLATED_DATA_DIR, path4.basename(A11Y_REPORT_PATH)) : path4.join(process.cwd(), A11Y_REPORT_PATH);
+  const A11Y_REPORTS_DIR = path4.join(dataDirs.dataDir, A11Y_REPORTS_DIR_NAME);
   const API_BASE = opts.apiBase ?? "/api/live-tokens";
   const consumerComponentDirs = opts.componentsSrcDir ? [path4.resolve(opts.componentsSrcDir)] : [path4.resolve("src/components"), path4.resolve("src/system/components")];
   const packageComponentsDir = path4.resolve(
@@ -1592,6 +1631,7 @@ ${lines.join("\n")}
   const EVENTS_ROUTE = `${API_BASE}/events`;
   const A11Y_RUN_ROUTE = `${API_BASE}/a11y/run`;
   const A11Y_REPORT_ROUTE = `${API_BASE}/a11y/report`;
+  const A11Y_CONFIRMED_ROUTE = `${API_BASE}/a11y/confirmed`;
   async function handleListColorsAndType(_ctx) {
     const files = colorsAndTypeResource.listNames().map((fileName) => {
       const data = colorsAndTypeResource.readJson(fileName);
@@ -1930,6 +1970,7 @@ ${lines.join("\n")}
           }
         }
         fs3.unlinkSync(filePath);
+        a11yRuns.forget(fileName);
         if (themesResource.existingPath(fileName) === null && deletingActive) {
           themesResource.setActiveName("default");
         }
@@ -2027,7 +2068,8 @@ data: ${JSON.stringify(state)}
   const eventClients = /* @__PURE__ */ new Set();
   const a11yRuns = a11yRunServer({
     root: process.cwd(),
-    reportFile: A11Y_REPORT_FILE,
+    reportsDir: A11Y_REPORTS_DIR,
+    openTheme: () => themesResource.getActiveName(),
     runCli: spawnCli(PACKAGE_CLI_PATH),
     broadcast: (report) => {
       const frame = `event: ${A11Y_EVENT}
@@ -2047,6 +2089,16 @@ data: ${JSON.stringify(report)}
     const answer = a11yRuns.start(body);
     jsonResponse(res, answer.status, answer.body);
   }
+  async function handleConfirmA11yReview({ req, res }) {
+    let body;
+    try {
+      body = JSON.parse(await readBody(req));
+    } catch {
+      body = void 0;
+    }
+    const answer = a11yRuns.confirm(body);
+    jsonResponse(res, answer.status, answer.body);
+  }
   async function handleGetA11yReport({ res }) {
     const answer = a11yRuns.report();
     jsonResponse(res, answer.status, answer.body);
@@ -2330,6 +2382,10 @@ data: ${JSON.stringify(report)}
     { method: "PUT", pattern: A11Y_REPORT_ROUTE, handler: methodNotAllowed },
     { method: "POST", pattern: A11Y_REPORT_ROUTE, handler: methodNotAllowed },
     { method: "DELETE", pattern: A11Y_REPORT_ROUTE, handler: methodNotAllowed },
+    { method: "PUT", pattern: A11Y_CONFIRMED_ROUTE, handler: handleConfirmA11yReview },
+    { method: "GET", pattern: A11Y_CONFIRMED_ROUTE, handler: methodNotAllowed },
+    { method: "POST", pattern: A11Y_CONFIRMED_ROUTE, handler: methodNotAllowed },
+    { method: "DELETE", pattern: A11Y_CONFIRMED_ROUTE, handler: methodNotAllowed },
     { method: "PUT", pattern: PRODUCTION_ROUTE, handler: handleAdoptTheme },
     { method: "GET", pattern: PRODUCTION_ROUTE, handler: methodNotAllowed },
     { method: "POST", pattern: PRODUCTION_ROUTE, handler: methodNotAllowed },

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@motion-proto/live-tokens",
-  "version": "0.98.2",
+  "version": "0.99.0",
   "type": "module",
   "sideEffects": [
     "**/*.css"

package/src/editor/bootstrap.ts

@@ -50,11 +50,12 @@ export async function bootLiveTokens(
   if (import.meta.env.DEV) {
     // Imported here, never statically, so a build drops the editor. The
     // registry alone imports every shipped component and editor.
-    const [editorStore, themeDocumentSync, liveStateStream, a11yReport, { initializeTheme }] = await Promise.all([
+    const [editorStore, themeDocumentSync, liveStateStream, a11yReport, contrastFixes, { initializeTheme }] = await Promise.all([
       import('./core/store/editorStore'),
       import('./core/themes/themeDocumentSync'),
       import('./core/themes/liveStateStream'),
       import('./core/a11y/a11yReport'),
+      import('./core/a11y/contrastFixes'),
       import('./core/themes/themeInit'),
       import('./component-editor/registry'),
     ]);
@@ -62,6 +63,7 @@ export async function bootLiveTokens(
     themeDocumentSync.init();
     liveStateStream.init();
     void a11yReport.init();
+    contrastFixes.init();
     if (opts.components) {
       for (const entry of opts.components) {
         registerComponent(entry);

package/src/editor/component-editor/SectionDividerEditor.svelte

@@ -195,18 +195,17 @@
   ];
   const INTRINSIC_BY_KEY = new Map(intrinsics.map((i) => [i.key, i]));
 
+  // The hairline is decorative: the heading carries the section break, so
+  // WCAG 2.2 SC 1.4.11 sets no floor on it and it has no pair.
   function variantContrastPairs(v: Variant): ContrastPair[] {
     const backdrop = [`--sectiondivider-${v}-surface`];
-    return [
-      ...variantTypeGroups(v).map((g): ContrastPair => ({
-        foreground: g.colorVariable,
-        backdrop,
-        role: 'text',
-        fontSize: g.sizeVariable,
-        fontWeight: g.weightVariable,
-      })),
-      { foreground: `--sectiondivider-${v}-hairline-color`, backdrop, role: 'non-text' },
-    ];
+    return variantTypeGroups(v).map((g): ContrastPair => ({
+      foreground: g.colorVariable,
+      backdrop,
+      role: 'text',
+      fontSize: g.sizeVariable,
+      fontWeight: g.weightVariable,
+    }));
   }
 
   export const contrastPairs: ContrastPair[] = variants.flatMap((v) => variantContrastPairs(v.key));