automatica11y 0.6.0 → 0.7.0

package/README.md

@@ -40,7 +40,7 @@ Pick two component libraries, two versions of one component, or two sites, and `
 
 ### It tests components, not just pages
 
-Point it at an npm package. It installs the package on its own, finds the components, builds the test fixtures it needs (React, Vue 3, Angular 22 and newer, and web components), then opens the dialogs and menus and presses the keys.
+Point it at an npm package. It installs the package on its own, finds the components, builds the test fixtures it needs (React, Vue 3, Angular 22 and newer, Svelte 5 and newer, plain HTML, and web components), then opens the dialogs and menus and presses the keys.
 
 ### It's' composable
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "automatica11y",
-  "version": "0.6.0",
+  "version": "0.7.0",
   "description": "Test and compare the accessibility of web pages, Storybook builds, and npm component libraries.",
   "homepage": "https://automatica11y.dev",
   "repository": {
@@ -56,11 +56,13 @@
     "@shikijs/langs": "^4.5.0",
     "@shikijs/themes": "^4.5.0",
     "@types/node": "^26.6.4",
+    "bits-ui": "^2.19.5",
     "marked": "^18.1.0",
     "react": "^19.3.0",
     "react-dom": "^19.3.0",
     "rxjs": "^7.8.2",
     "shiki": "^4.5.0",
+    "svelte": "^5.57.2",
     "typescript": "^7.0.2",
     "vue": "^3.5.43",
     "zone.js": "^0.16.3"

package/skills/automatica11y-runner/SKILL.md

@@ -16,13 +16,13 @@ The tool is **not** an attestation or certification tool. Automated checks cover
 
 Do sections 1 and 2 before you run an audit. A question to the user about a missing target or an unsupported setting (section 3) can come before or after them.
 
-This skill works with automatica11y **0.6.x**. Run:
+This skill works with automatica11y **0.7.x**. Run:
 
 ```bash
 npx --yes automatica11y@latest --version
 ```
 
-If the command exits with an error or prints nothing, tell the user it failed, include the error text, and stop. If the output doesn't start with `0.6.`, stop. Tell the user the version you got and the series this copy expects (`0.6.x`). If this copy came from a file, offer to read the matching steps with `npx --yes automatica11y@latest guide skill`. Don't run an audit until the user confirms how to proceed.
+If the command exits with an error or prints nothing, tell the user it failed, include the error text, and stop. If the output doesn't start with `0.7.`, stop. Tell the user the version you got and the series this copy expects (`0.7.x`). If this copy came from a file, offer to read the matching steps with `npx --yes automatica11y@latest guide skill`. Don't run an audit until the user confirms how to proceed.
 
 If the user installed the tool globally (`npm i -g automatica11y`), `automatica11y` is on the `PATH` (so is the short name `a11y`), and it runs the same commands as `npx --yes automatica11y@latest`. Every command in this skill is written with `npx`, so replace that prefix with `automatica11y` only when `automatica11y --version` passes the check above. If the installed version is the wrong series, or nothing is installed, use `npx`.
 
@@ -219,7 +219,7 @@ Use the structure of `report.md`. Quote selectors and rule IDs exactly as `resul
 
 Say these things plainly. Don't soften them, and don't fill in a result.
 
-- **Unsupported framework.** The package needs a framework other than React, Vue 3, Angular 22 and newer, or web components. Name it, and say which version is unsupported (Vue 2 or Angular 21, for example). This version covers React, Vue 3, Angular 22 and newer, and web components. A Storybook for the library still works, whatever the framework.
+- **Unsupported framework.** The package needs a framework other than React, Vue 3, Angular 22 and newer, Svelte 5 and newer, plain HTML, or web components. Name it, and say which version is unsupported (Vue 2, Svelte 4, or Angular 21, for example). This version covers React, Vue 3, Angular 22 and newer, Svelte 5 and newer, plain HTML, and web components. A Storybook for the library still works, whatever the framework.
 - **Not applicable.** The package has no rendering surface, such as a utility library. There's nothing to test.
 - **Not testable.** The content is a canvas with no alternative, or sits in a closed shadow root. The rule engines can't see it, so the result is untested, not clean. The virtual screen reader also can't read open shadow roots.
 - **Gap.** The archetype has no usable fixture or no matching export. Say what the archetype needs.

package/skills/automatica11y-runner/references/fixtures.md

@@ -66,6 +66,8 @@ An Angular fixture can also be TypeScript (`fixtures/<target id>/<archetype>.ts`
 
 Angular libraries split their parts across sub-paths, so audit them with a sub-path target, for example `npm:@angular/material/menu`.
 
+For Svelte 5 and newer, a fixture is a `.svelte` file (`fixtures/<target id>/<archetype>.svelte`). Import the library from its package name and write the markup with the library's components, for example `<Dialog.Root>` with `<Dialog.Trigger data-a11y-trigger>`. State uses runes (`let open = $state(false)`), and `lang="ts"` works. A component that takes content takes it as children between its tags. Some Svelte libraries give you builders and not components: you create an object in the script (`const dialog = new Dialog()`) and spread its attributes onto your own elements (`<button {...dialog.trigger} data-a11y-trigger>`). Nothing is generated for those, so write the fixture from the documentation. A fixture can also declare `let { libA11y } = $props()` to receive the library accessibility option. Svelte libraries ship `.svelte` source, and the tool compiles it, so a library that imports SvelteKit-only modules (`$app/...`) can't run.
+
 For plain HTML, a fixture is a `.html` file of markup (`fixtures/<target id>/<archetype>.html`). It's a snippet, not a whole page: no `<html>` or `<body>`. Put `data-a11y-trigger` and `data-a11y-root` on the right elements yourself. The target says what loads, as sub-paths in a list: `npm:pkg/base.css,pkg/components.css,other/behavior.iife.js`. Stylesheets load with the page, the markup goes on next, and the scripts load last, so a script that wires up its elements when it starts finds them. A `<script>` inside the snippet runs. Use the classes and attributes the library's documentation names, and don't invent them.
 
 For web components, make `mount(container)` the file's default export. It adds the archetype to the container. The tool imports the package first, so its elements are defined before `mount` runs. The `data-a11y-trigger` and `data-a11y-root` attributes can sit on a host element, a slotted child, or an element inside an **open** shadow root. A **closed** shadow root hides its content from every tool, so the report lists it as not testable.

package/src/frameworks/angular.js

@@ -118,10 +118,16 @@ function singleCopy(workDir) {
   return {
     name: "single-angular-copy",
     setup(build) {
-      build.onResolve({ filter: /^(@angular\/|rxjs(\/|$)|zone\.js(\/|$))/ }, async (args) => {
+      // A library asks for the same few Angular paths over and over, so each is looked up once per build.
+      /** @type {Map<string, Promise<import("esbuild").OnResolveResult | undefined>>} */
+      const resolved = new Map();
+      build.onResolve({ filter: /^(@angular\/|rxjs(\/|$)|zone\.js(\/|$))/ }, (args) => {
         if (args.pluginData === "single-angular-copy") return undefined;
-        const result = await build.resolve(args.path, { resolveDir: workDir, kind: args.kind, pluginData: "single-angular-copy" });
-        return result.errors.length ? undefined : result;
+        const key = `${args.kind}\0${args.path}`;
+        if (!resolved.has(key)) {
+          resolved.set(key, build.resolve(args.path, { resolveDir: workDir, kind: args.kind, pluginData: "single-angular-copy" }).then((result) => (result.errors.length ? undefined : result)));
+        }
+        return resolved.get(key);
       });
     },
   };

package/src/frameworks/errors.js

@@ -0,0 +1,12 @@
+import { explainAngularError } from "./angular-errors.js";
+import { explainSvelteError } from "./svelte-errors.js";
+
+/**
+ * One place that turns a framework's own error into a plain sentence, for any framework. The codes and wording don't overlap,
+ * so each explainer leaves what isn't its own alone.
+ * @param {string} text The first line of an error.
+ * @returns {string}
+ */
+export function explainFrameworkError(text) {
+  return explainAngularError(explainSvelteError(text));
+}

package/src/frameworks/index.js

@@ -6,7 +6,7 @@
  * To add a framework, write a module with the same shape as react.js, add it here, and add its id to FLAVORS and its kind to
  * TARGET_KINDS in schema.js. A test checks that the two lists agree.
  *
- * @typedef {"npm-react" | "npm-vue" | "npm-angular" | "npm-html" | "npm-wc" | "npm-unsupported"} AdapterKind
+ * @typedef {"npm-react" | "npm-vue" | "npm-angular" | "npm-svelte" | "npm-html" | "npm-wc" | "npm-unsupported"} AdapterKind
  * @typedef {{ kind: AdapterKind, framework: string, reason: string }} AdapterDetection
  * @typedef {{
  *   id: string,
@@ -28,11 +28,12 @@
 import angular from "./angular.js";
 import html from "./html.js";
 import react from "./react.js";
+import svelte from "./svelte.js";
 import vue from "./vue.js";
 import wc from "./wc.js";
 
 /** @type {Record<string, Adapter>} */
-export const ADAPTERS = { react, vue, angular, html, wc };
+export const ADAPTERS = { react, vue, angular, svelte, html, wc };
 
 /** The adapter for a flavor (`react`, `vue`, or `wc`). */
 export function adapterFor(id) {

package/src/frameworks/react.js

@@ -31,10 +31,13 @@ window.__a11yExports = out;
  * A fixture for the simple archetypes, from the export name alone.
  * Compound components (dialog, tabs, menu) can't be guessed, so they come from generation or from a fixture someone writes.
  */
-export function template(archetype, pkg, exportName) {
+export function template(archetype, pkg, exportName, info) {
+  // A namespace with a root part (`Button.Root`) is used through its root.
+  const root = /** @type {any} */ (info)?.parts?.find((part) => /^root$/i.test(part));
+  const tag = root ? `Component.${root}` : "Component";
   const body = {
-    button: `<Component data-a11y-trigger data-a11y-root type="button">Save</Component>`,
-    link: `<Component data-a11y-trigger data-a11y-root href="#top">Read more</Component>`,
+    button: `<${tag} data-a11y-trigger data-a11y-root type="button">Save</${tag}>`,
+    link: `<${tag} data-a11y-trigger data-a11y-root href="#top">Read more</${tag}>`,
   }[archetype];
   if (!body) return null;
   return `import { ${exportName} as Component } from ${JSON.stringify(pkg)};

package/src/frameworks/svelte-errors.js

@@ -0,0 +1,30 @@
+/**
+ * Svelte's own errors point at its source and its docs. A report is read without either, so the ones a fixture is likely to hit
+ * get a plain sentence. Anything else passes through.
+ * @param {string} text The first line of an error.
+ * @returns {string}
+ */
+export function explainSvelteError(text) {
+  // A library written for SvelteKit imports modules that only exist inside a SvelteKit app.
+  const kit = /Could not resolve "(\$(?:app|env|lib|service-worker)(?:\/[^"]*)?)"/.exec(text);
+  if (kit) return `the library imports ${kit[1]}, which only exists inside a SvelteKit app, so it can't run on its own (${text.split(" (")[0].replace(/^Bundling failed: /, "")})`;
+  const code = /svelte\.dev\/e\/(\w+)/.exec(text)?.[1];
+  const name = /["'`]([\w$.-]+)["'`]/.exec(text)?.[1];
+  if (/missing_context|Context "?[^"]*"? not found|Could not find .*context|getContext\(\) .*undefined|Cannot read properties of undefined \(reading 'getContext'\)/i.test(text) || code === "missing_context") {
+    return `a part of the library needs a context that its parent part provides${name ? ` (${name})` : ""}. Put it inside its root part${code ? ` (${code})` : ""}`;
+  }
+  if (code === "lifecycle_outside_component" || /can only be used during component initiali[sz]ation/i.test(text)) {
+    return "the library called a lifecycle or context function outside a component, so it can't be mounted this way (lifecycle_outside_component)";
+  }
+  if (code === "props_invalid_value" || code === "invalid_default_snippet" || code === "snippet_without_render_tag") {
+    return `a component got a value of the wrong kind for a prop${name ? ` (${name})` : ""}, such as content where it wanted a snippet (${code})`;
+  }
+  if (code === "bind_not_bindable" || code === "props_not_bindable") {
+    return `the fixture binds a prop that the component doesn't allow to be bound${name ? ` (${name})` : ""} (${code})`;
+  }
+  // A namespace object (`Dialog`) used as a component is compiled to a call, and the call fails like this.
+  if (/^TypeError: (\w*_)?exports\w* is not a function/.test(text)) {
+    return `${text} (a namespace of parts, such as Dialog, was used as if it were one component)`;
+  }
+  return text;
+}

package/src/frameworks/svelte.js

@@ -0,0 +1,162 @@
+/**
+ * The Svelte adapter, for Svelte 5 and newer. Svelte libraries ship source: `.svelte` files, and `.svelte.js` modules that use
+ * runes. A consumer's bundler compiles them, so this adapter gives esbuild a small plugin that does. The compiler comes from the
+ * target's own `svelte` install, so the compiler and the runtime that runs the output are always the same version.
+ */
+import { createRequire } from "node:module";
+import { readFileSync, statSync } from "node:fs";
+import { join } from "node:path";
+import { pathToFileURL } from "node:url";
+import { svelteDialect } from "../harness/generate/dialects.js";
+import { generateJsx } from "../harness/generate/jsx.js";
+import { discoverEntry } from "./react.js";
+
+/** The oldest Svelte this version supports. */
+export const SVELTE_FLOOR = 5;
+
+/**
+ * Does a peer range allow Svelte 5 or newer? A part counts when it names version 5 or later, or has no upper limit (`>=3`, `*`).
+ * `^3 || ^4` doesn't, and `^4 || ^5` does.
+ * @param {string} range
+ */
+export function allowsSvelte5(range) {
+  return String(range)
+    .split("||")
+    .some((part) => {
+      const text = part.trim();
+      const major = /(\d+)/.exec(text);
+      if (!major || /^[*x]?$/.test(text) || /^>=?/.test(text)) return true;
+      return Number(major[1]) >= SVELTE_FLOOR;
+    });
+}
+
+/** Mounts a fixture's default export. */
+export const entry = (fixturePath, _pkg) => `import { mount } from "svelte";
+import Fixture from ${JSON.stringify(fixturePath)};
+const libA11y = new URLSearchParams(location.search).get("libA11y") === "on";
+try {
+  mount(Fixture, { target: document.getElementById("root"), props: { libA11y } });
+} catch (error) {
+  window.__error = String(error);
+  console.error(error);
+}
+`;
+
+/**
+ * A fixture for the simple archetypes, from the export name alone.
+ * @param {string} archetype @param {string} pkg @param {string} exportName @param {unknown} [info]
+ */
+export function template(archetype, pkg, exportName, info) {
+  // A namespace with a root part (`Button.Root`) is used through its root.
+  const root = /** @type {any} */ (info)?.parts?.find((part) => /^root$/i.test(part));
+  const tag = root ? `Component.${root}` : "Component";
+  const body = {
+    button: `<${tag} data-a11y-trigger data-a11y-root type="button">Save</${tag}>`,
+    link: `<${tag} data-a11y-trigger data-a11y-root href="#top">Read more</${tag}>`,
+  }[archetype];
+  if (!body) return null;
+  return `<script>
+  import { ${exportName} as Component } from ${JSON.stringify(pkg)};
+</script>
+${body}
+`;
+}
+
+/**
+ * What the compiler produced for a file, kept for the life of the run. A run bundles the same library many times (every generated
+ * candidate is a bundle), and compiling a large library's components again each time dominates the run.
+ * The key is the file and the compiler's own version, so a changed file or a different Svelte compiles again.
+ * @type {Map<string, string>}
+ */
+const compiled = new Map();
+
+/** Compile a file once per version of the file. */
+function cached(path, kind, build) {
+  const stat = statSync(path);
+  const key = `${kind}\0${path}\0${stat.size}\0${stat.mtimeMs}`;
+  let code = compiled.get(key);
+  if (code === undefined) {
+    code = build();
+    compiled.set(key, code);
+  }
+  return code;
+}
+
+/**
+ * Compiles `.svelte` files and `.svelte.js` modules with the Svelte that's installed beside the library. The compiler loads the
+ * first time a file needs it. A compile error becomes a build error with the file and line, so it can't pass as a result.
+ * @param {string} workDir
+ * @returns {import("esbuild").Plugin}
+ */
+function compilerPlugin(workDir) {
+  /** @type {Promise<any> | null} */
+  let compiler = null;
+  const load = () => {
+    // The compiler may load as a module or as CommonJS, which puts the functions under `default`.
+    compiler ??= import(pathToFileURL(createRequire(join(workDir, "package.json")).resolve("svelte/compiler")).href).then((loaded) => (loaded.compile ? loaded : loaded.default));
+    return compiler;
+  };
+  return {
+    name: "svelte-compiler",
+    setup(build) {
+      // One copy of Svelte for the library and the fixture, or the runtime's state is split in two.
+      // A library of a thousand modules asks for the same few Svelte paths over and over, so each is looked up once per build.
+      /** @type {Map<string, Promise<import("esbuild").OnResolveResult | undefined>>} */
+      const resolved = new Map();
+      build.onResolve({ filter: /^svelte(\/|$)/ }, (args) => {
+        if (args.pluginData === "svelte-compiler") return undefined;
+        const key = `${args.kind}\0${args.path}`;
+        if (!resolved.has(key)) {
+          resolved.set(key, build.resolve(args.path, { resolveDir: workDir, kind: args.kind, pluginData: "svelte-compiler" }).then((result) => (result.errors.length ? undefined : result)));
+        }
+        return resolved.get(key);
+      });
+      const failure = (error, file) => ({ errors: [{ text: String(error?.message ?? error).split("\n")[0], location: { file, line: error?.start?.line ?? 0, column: error?.start?.column ?? 0 } }] });
+      build.onLoad({ filter: /\.svelte$/ }, async (args) => {
+        try {
+          const { compile } = await load();
+          return { contents: cached(args.path, "component", () => compile(readFileSync(args.path, "utf8"), { filename: args.path, generate: "client", css: "injected", dev: false }).js.code), loader: "js" };
+        } catch (error) {
+          return failure(error, args.path);
+        }
+      });
+      build.onLoad({ filter: /\.svelte\.js$/ }, async (args) => {
+        try {
+          const { compileModule } = await load();
+          return { contents: cached(args.path, "module", () => compileModule(readFileSync(args.path, "utf8"), { filename: args.path, generate: "client" }).js.code), loader: "js" };
+        } catch (error) {
+          return failure(error, args.path);
+        }
+      });
+    },
+  };
+}
+
+export default {
+  id: "svelte",
+  label: "Svelte",
+  kind: "npm-svelte",
+  noun: "export",
+  extension: "svelte",
+  runtime: ["svelte"],
+  /** @returns {import("./index.js").AdapterDetection | null} */
+  detect(meta) {
+    const peers = meta.peerDependencies ?? {};
+    const deps = meta.dependencies ?? {};
+    const range = peers.svelte ?? deps.svelte;
+    if (range === undefined) return null;
+    if (!allowsSvelte5(range)) return { kind: "npm-unsupported", framework: "Svelte", reason: `The package needs svelte ${range}. Only Svelte ${SVELTE_FLOOR} and newer is supported.` };
+    return { kind: "npm-svelte", framework: "Svelte", reason: `The package lists svelte as a ${"svelte" in peers ? "peer dependency" : "dependency"}.` };
+  },
+  bundle: (workDir) => ({
+    alias: {},
+    plugins: [compilerPlugin(workDir)],
+    // Svelte libraries name their source entry with the `svelte` condition, and some with the `svelte` field.
+    esbuild: { conditions: ["svelte"], mainFields: ["svelte", "browser", "module", "main"] },
+  }),
+  entry,
+  discoverEntry,
+  template,
+  generate: (input) => generateJsx(svelteDialect, input),
+  describe: (npm) => `Svelte${/** @type {any} */ (npm).svelte ? ` (svelte ${/** @type {any} */ (npm).svelte})` : ""}`,
+};

package/src/harness/generate/dialects.js

@@ -7,7 +7,7 @@ import { markingSource } from "./marking.js";
 const cap = (text) => text.charAt(0).toUpperCase() + text.slice(1);
 const indentBy = (text, spaces) => text.split("\n").map((line) => (line ? " ".repeat(spaces) + line : line)).join("\n");
 
-/** @typedef {{ id: string, extension: string, openProps: string[][], labelFor: string, declare: (name: string, init: string) => string, read: (name: string) => string, write: (name: string, value: string) => string, attr: (name: string, expr: string) => string, frame: (archetype: string, pkg: string, body: string, hooks?: string) => string }} Dialect */
+/** @typedef {{ id: string, extension: string, openProps: string[][], labelFor: string, click: (action: string) => string, fragment: (inner: string) => string, when: (condition: string, markup: string) => string, declare: (name: string, init: string) => string, read: (name: string) => string, write: (name: string, value: string) => string, attr: (name: string, expr: string) => string, frame: (archetype: string, pkg: string, body: string, hooks?: string) => string }} Dialect */
 
 /** @type {Dialect} */
 export const reactDialect = {
@@ -15,6 +15,9 @@ export const reactDialect = {
   extension: "jsx",
   openProps: [["open", "onClose"], ["open", "onOpenChange"], ["isOpen", "onOpenChange"], ["isOpen", "onClose"], ["opened", "onClose"]],
   labelFor: "htmlFor",
+  click: (action) => `onClick={() => ${action}}`,
+  fragment: (inner) => `<>\n${indentBy(inner, 2)}\n</>`,
+  when: (condition, markup) => `{${condition} && ${markup}}`,
   declare: (name, init) => `const [${name}, set${cap(name)}] = useState(${init});`,
   read: (name) => name,
   write: (name, value) => `set${cap(name)}(${value})`,
@@ -40,6 +43,9 @@ export const vueDialect = {
   // Vue components usually take a model value and say they changed it with an update event, or take `open` and emit `update:open`.
   openProps: [["open", "onUpdate:open"], ["modelValue", "onUpdate:modelValue"], ["visible", "onUpdate:visible"], ["show", "onUpdate:show"], ["open", "onClose"], ["isOpen", "onClose"]],
   labelFor: "for",
+  click: (action) => `onClick={() => ${action}}`,
+  fragment: (inner) => `<>\n${indentBy(inner, 2)}\n</>`,
+  when: (condition, markup) => `{${condition} && ${markup}}`,
   declare: (name, init) => `const ${name} = ref(${init});`,
   read: (name) => `${name}.value`,
   write: (name, value) => `(${name}.value = ${value})`,
@@ -62,3 +68,31 @@ ${indentBy(body, 6)}
 `;
   },
 };
+
+/** @type {Dialect} */
+export const svelteDialect = {
+  id: "svelte",
+  extension: "svelte",
+  // A Svelte component takes `open` and calls back when it changes, or takes `open` and calls `onclose`.
+  openProps: [["open", "onOpenChange"], ["open", "onclose"], ["visible", "onclose"], ["isOpen", "onclose"], ["opened", "onclose"]],
+  labelFor: "for",
+  click: (action) => `onclick={() => ${action}}`,
+  // Svelte 5 markup can have several top-level nodes, so a fragment is just its children.
+  fragment: (inner) => inner,
+  when: (condition, markup) => `{#if ${condition}}${markup}{/if}`,
+  declare: (name, init) => `let ${name} = $state(${init});`,
+  read: (name) => name,
+  write: (name, value) => `${name} = ${value}`,
+  attr: (name, expr) => `${name}={${expr}}`,
+  frame(archetype, pkg, body, hooks = "") {
+    return `<script>
+  import * as Lib from ${JSON.stringify(pkg)};
+  import { onMount } from "svelte";
+${indentBy(markingSource(archetype), 2)}
+  onMount(() => startMarking());
+${hooks ? `${hooks}\n` : ""}</script>
+
+${body}
+`;
+  },
+};

package/src/harness/generate/jsx-recipes.js

@@ -60,10 +60,8 @@ function dialogControlled([openProp, closeProp]) {
     const inner = content ? tag(content, "", dialogContent(kit)) : dialogContent(kit);
     const overlay = kit.pick("overlay", "backdrop");
     const controls = ` ${d.attr(openProp, d.read("open"))} ${d.attr(closeProp, `(next) => ${d.write("open", "next === true")}`)}`;
-    const body = `<>
-  <button type="button" data-a11y-trigger onClick={() => ${d.write("open", "true")}}>Open dialog</button>
-${indent(tag(root, controls, `${overlay ? `<${overlay} />\n` : ""}${inner}`), 2)}
-</>`;
+    const body = d.fragment(`<button type="button" data-a11y-trigger ${d.click(d.write("open", "true"))}>Open dialog</button>
+${tag(root, controls, `${overlay ? `<${overlay} />\n` : ""}${inner}`)}`);
     return { id: `dialog-controlled-${openProp}-${closeProp}`.replace(/[^\w-]+/g, "-"), summary: `a root controlled with ${openProp} and ${closeProp}`, source: d.frame("dialog", pkg, body, `  ${d.declare("open", "false")}`), used: kit.used() };
   };
 }
@@ -195,14 +193,14 @@ const fieldSingle = (id, summary, markup) => (makeKit, pkg, d) => {
 const messageConditional = (makeKit, pkg, d) => {
   const kit = makeKit();
   if (!kit.self) return null;
-  const body = `<div>\n  <button type="button" data-a11y-trigger onClick={() => ${d.write("on", "true")}}>Show message</button>\n  <div>{${d.read("on")} && <${kit.self}>Saved.</${kit.self}>}</div>\n</div>`;
+  const body = `<div>\n  <button type="button" data-a11y-trigger ${d.click(d.write("on", "true"))}>Show message</button>\n  <div>${d.when(d.read("on"), `<${kit.self}>Saved.</${kit.self}>`)}</div>\n</div>`;
   return { id: "message-mounted", summary: "a message that is mounted when the trigger is pressed", source: d.frame("live-region", pkg, body, `  ${d.declare("on", "false")}`), used: [kit.base] };
 };
 
 const messageControlled = (prop) => (makeKit, pkg, d) => {
   const kit = makeKit();
   if (!kit.self) return null;
-  const body = `<div>\n  <button type="button" data-a11y-trigger onClick={() => ${d.write("on", "true")}}>Show message</button>\n  <${kit.self} ${d.attr(prop, d.read("on"))}>Saved.</${kit.self}>\n</div>`;
+  const body = `<div>\n  <button type="button" data-a11y-trigger ${d.click(d.write("on", "true"))}>Show message</button>\n  <${kit.self} ${d.attr(prop, d.read("on"))}>Saved.</${kit.self}>\n</div>`;
   return { id: `message-${prop}`, summary: `a message shown with its ${prop} prop`, source: d.frame("live-region", pkg, body, `  ${d.declare("on", "false")}`), used: [kit.base] };
 };
 

package/src/harness/generate/probe.js

@@ -1,4 +1,4 @@
-import { explainAngularError } from "../../frameworks/angular-errors.js";
+import { explainFrameworkError } from "../../frameworks/errors.js";
 import { installHelpers } from "../../tiers/interactions/helpers.js";
 import { openPage } from "../url.js";
 import { ROOT_ROLES } from "./marking.js";
@@ -26,9 +26,9 @@ export async function probeFixture(browser, url, archetype) {
     opened = await openPage(browser, url, {
       waitUntil: "load",
       beforeGoto: async (page) => {
-        page.on("pageerror", (error) => errors.push(explainAngularError(error.message.split("\n")[0])));
+        page.on("pageerror", (error) => errors.push(explainFrameworkError(error.message.split("\n")[0])));
         page.on("console", (message) => {
-          if (message.type() === "error" && !/favicon|Failed to load resource/i.test(message.text())) errors.push(explainAngularError(message.text().split("\n")[0]));
+          if (message.type() === "error" && !/favicon|Failed to load resource/i.test(message.text())) errors.push(explainFrameworkError(message.text().split("\n")[0]));
         });
         await page.addInitScript(installHelpers);
       },

package/src/harness/npm-install.js

@@ -35,7 +35,7 @@ export function installedVersion(dir, name) {
  * Install a package into its own directory, never next to another target's install.
  * npm adds the peer dependencies. A React package also needs react-dom, and a Vue package needs vue, so add them when the peers left them out.
  * Install scripts stay off, because the code is untrusted until it runs in the browser sandbox.
- * @param {{ dir: string, name: string, version: string, flavor: "react" | "vue" | "angular" | "html" | "wc" | "unknown", run?: typeof runNpm }} options
+ * @param {{ dir: string, name: string, version: string, flavor: "react" | "vue" | "angular" | "svelte" | "html" | "wc" | "unknown", run?: typeof runNpm }} options
  */
 export async function installPackage({ dir, name, version, flavor, run = runNpm }) {
   mkdirSync(dir, { recursive: true });
@@ -77,6 +77,10 @@ export async function installPackage({ dir, name, version, flavor, run = runNpm
     await npm(["install", "vue", ...pinnedRuntime(dir, ["vue"]), ...NPM_FLAGS, "--legacy-peer-deps"]);
     warnings.push(`${name} didn't bring in vue, so the latest vue was added.`);
   }
+  if (flavor === "svelte" && !installedVersion(dir, "svelte")) {
+    await npm(["install", "svelte", ...pinnedRuntime(dir, ["svelte"]), ...NPM_FLAGS, "--legacy-peer-deps"]);
+    warnings.push(`${name} didn't bring in svelte, so the latest svelte was added.`);
+  }
   if (flavor === "angular") {
     // The Angular packages have to be the same version as core. A library's peers usually bring in core and common, not the compiler or the platform.
     const core = installedVersion(dir, "@angular/core");
@@ -90,7 +94,7 @@ export async function installPackage({ dir, name, version, flavor, run = runNpm
       await npm(["install", ...adding, ...pinnedRuntime(dir, adding), ...NPM_FLAGS, "--legacy-peer-deps"]);
     }
   }
-  return { dir, warnings, react: installedVersion(dir, "react"), reactDom: installedVersion(dir, "react-dom"), vue: installedVersion(dir, "vue"), angular: installedVersion(dir, "@angular/core"), version: installedVersion(dir, name) };
+  return { dir, warnings, react: installedVersion(dir, "react"), reactDom: installedVersion(dir, "react-dom"), vue: installedVersion(dir, "vue"), angular: installedVersion(dir, "@angular/core"), svelte: installedVersion(dir, "svelte"), version: installedVersion(dir, name) };
 }
 
 /** What an Angular fixture needs beside the library: core, the runtime compiler, the platform, and the pieces core uses. */

package/src/plan/classify.js

@@ -5,7 +5,7 @@ import { fileURLToPath } from "node:url";
 import { cleanSubpath } from "./subpath.js";
 
 /**
- * @typedef {"npm" | "npm-react" | "npm-vue" | "npm-angular" | "npm-html" | "npm-wc" | "npm-unsupported" | "storybook" | "url" | "html-file" | "static-dir"} TargetKind
+ * @typedef {"npm" | "npm-react" | "npm-vue" | "npm-angular" | "npm-svelte" | "npm-html" | "npm-wc" | "npm-unsupported" | "storybook" | "url" | "html-file" | "static-dir"} TargetKind
  * @typedef {{
  *   input: string,
  *   label: string | null,

package/src/plan/mapping.js

@@ -41,7 +41,7 @@ export function score(archetype, name) {
 /**
  * Guess which exports (React, Vue, or Angular) or tags (web components) stand for each archetype.
  * The result is a starting point. A person or the skill checks it before trusting it.
- * @param {{ flavor: "react" | "vue" | "angular" | "html" | "wc", exports?: Array<{ name: string, type: string, parts: string[] }>, tags?: string[] }} input
+ * @param {{ flavor: "react" | "vue" | "angular" | "svelte" | "html" | "wc", exports?: Array<{ name: string, type: string, parts: string[] }>, tags?: string[] }} input
  * @returns {ReturnType<typeof parseMappingFile>[string]}
  */
 export function candidateMapping({ flavor, exports = [], tags = [] }) {
@@ -64,7 +64,9 @@ export function candidateMapping({ flavor, exports = [], tags = [] }) {
     // A button or link usually sits beside ButtonBase, ButtonGroup, and the like, which aren't its parts, so only real parts (Button.Root) count there.
     const siblings = flavor !== "wc" && !TEMPLATED.has(archetype) ? names.filter((n) => n !== best && n.startsWith(best) && n.length > best.length) : [];
     const compound = parts.length > 0 || siblings.length >= 2;
-    const templated = TEMPLATED.has(archetype) && !compound;
+    // A button written as `Button.Root` (a namespace whose only part is the root) is still one element, so a template can use the root.
+    const hasRoot = TEMPLATED.has(archetype) && parts.length === 1 && /^root$/i.test(parts[0]);
+    const templated = TEMPLATED.has(archetype) && (!compound || hasRoot);
     mapping[archetype] = {
       flavor,
       ...(flavor === "wc" ? { tag: best } : { export: best }),
@@ -97,7 +99,7 @@ export function findAuthoredFixture({ cwd, targetId, archetype, mapped }) {
     const file = resolve(cwd, mapped.fixture);
     return existsSync(file) ? file : null;
   }
-  for (const ext of ["jsx", "js", "ts", "html"]) {
+  for (const ext of ["jsx", "js", "ts", "svelte", "html"]) {
     const file = resolve(cwd, "fixtures", targetId, `${archetype}.${ext}`);
     if (existsSync(file)) return file;
   }

package/src/plan/resolve-npm.js

@@ -5,7 +5,6 @@ import { checkExports, notExportedMessage } from "./subpath.js";
 
 const FIELDS = ["name", "version", "peerDependencies", "dependencies", "keywords", "customElements", "deprecated", "exports", "style", "unpkg", "jsdelivr"];
 const OTHER_FRAMEWORKS = {
-  svelte: "Svelte",
   "solid-js": "Solid",
   preact: "Preact",
   "@builder.io/qwik": "Qwik",
@@ -53,7 +52,7 @@ export function npmView(spec, { timeoutMs = 60_000 } = {}) {
  * Guess how a package renders from its metadata alone. React wins when both signals appear, then a custom elements manifest, then Vue, then Angular.
  * `npm` means the metadata can't say, so the run decides after it installs and loads the package.
  * @param {unknown} meta
- * @returns {{ kind: "npm-react" | "npm-vue" | "npm-angular" | "npm-html" | "npm-wc" | "npm-unsupported" | "npm", framework: string | null, reason: string }}
+ * @returns {{ kind: "npm-react" | "npm-vue" | "npm-angular" | "npm-svelte" | "npm-html" | "npm-wc" | "npm-unsupported" | "npm", framework: string | null, reason: string }}
  */
 export function detectFlavor(meta) {
   const data = isRecord(meta) ? meta : {};
@@ -66,6 +65,8 @@ export function detectFlavor(meta) {
   if (vue) return vue;
   const angular = ADAPTERS.angular.detect(data);
   if (angular) return angular;
+  const svelte = ADAPTERS.svelte.detect(data);
+  if (svelte) return svelte;
   for (const [name, label] of Object.entries(OTHER_FRAMEWORKS)) {
     if (name in peers) return { kind: "npm-unsupported", framework: label, reason: `The package needs ${label}.` };
   }

package/src/run/audit-npm.js

@@ -8,7 +8,7 @@ import { settleAnimations } from "../harness/settle.js";
 import { installedVersion, installExtraPackages, installOptionalPeers, installPackage } from "../harness/npm-install.js";
 import { shipsBrowserAssets } from "../frameworks/html.js";
 import { ANGULAR_FLOOR } from "../frameworks/angular.js";
-import { explainAngularError } from "../frameworks/angular-errors.js";
+import { explainFrameworkError } from "../frameworks/errors.js";
 import { adapterFor, adapterForKind } from "../frameworks/index.js";
 import { offeredSubpaths, subpathProblem } from "../plan/subpath.js";
 import { closedShadowHosts, notTestableEntries } from "../harness/shadow.js";
@@ -40,17 +40,17 @@ const STATES = {
   "live-region": ["before message", "message shown"],
 };
 
-const firstLine = (error) => (error instanceof Error ? error.message : String(error)).split("\n").find((l) => l.trim()) ?? "unknown error";
+const firstLine = (error) => explainFrameworkError((error instanceof Error ? error.message : String(error)).split("\n").find((l) => l.trim()) ?? "unknown error");
 
 /** Page and console errors that mean a fixture didn't mount cleanly. A missing favicon doesn't count. */
 function watchErrors(errors) {
   return (page) => {
-    page.on("pageerror", (error) => errors.push(explainAngularError(error.message.split("\n")[0])));
+    page.on("pageerror", (error) => errors.push(explainFrameworkError(error.message.split("\n")[0])));
     page.on("console", (message) => {
       if (message.type() !== "error") return;
       const text = message.text();
       if (/favicon|Failed to load resource/i.test(text) && !/\.(js|css)\b/.test(text)) return;
-      errors.push(explainAngularError(text.split("\n")[0]));
+      errors.push(explainFrameworkError(text.split("\n")[0]));
     });
   };
 }
@@ -223,7 +223,7 @@ export async function auditNpm({ browser, planTarget, plan, cwd, install = insta
   const base = { id: planTarget.id, reason: null, archetypes: {}, summary: { engines: {}, gaps: [], notTestable: [] }, warnings: [] };
   const resolved = planTarget.resolved ?? {};
   if (planTarget.kind === "npm-unsupported") {
-    return { result: { ...base, status: "unsupported", reason: `${resolved.framework ?? "This framework"} packages aren't supported.${resolved.framework === "Angular" && resolved.detectedBy ? ` ${resolved.detectedBy}` : ""} This version covers React, Vue 3, Angular ${ANGULAR_FLOOR} and newer, and web components.` }, mapping: null };
+    return { result: { ...base, status: "unsupported", reason: `${resolved.framework ?? "This framework"} packages aren't supported.${(resolved.framework === "Angular" || resolved.framework === "Svelte") && resolved.detectedBy ? ` ${resolved.detectedBy}` : ""} This version covers React, Vue 3, Angular ${ANGULAR_FLOOR} and newer, Svelte 5 and newer, and web components.` }, mapping: null };
   }
   const tmp = mkdtempSync(join(tmpdir(), "automatica11y-npm-"));
   const workDir = join(tmp, "install");
@@ -234,8 +234,8 @@ export async function auditNpm({ browser, planTarget, plan, cwd, install = insta
   try {
     /** The framework's id (react, vue, or wc), or "unknown" when the metadata couldn't say. */
     const adapterId = adapterForKind(planTarget.kind)?.id;
-    /** @type {"react" | "vue" | "angular" | "html" | "wc" | "unknown"} */
-    let flavor = adapterId === "react" || adapterId === "vue" || adapterId === "angular" || adapterId === "html" || adapterId === "wc" ? adapterId : "unknown";
+    /** @type {"react" | "vue" | "angular" | "svelte" | "html" | "wc" | "unknown"} */
+    let flavor = adapterId === "react" || adapterId === "vue" || adapterId === "angular" || adapterId === "svelte" || adapterId === "html" || adapterId === "wc" ? adapterId : "unknown";
     const installed = await install({ dir: workDir, name: resolved.name, version: resolved.version, flavor });
     const warnings = [...installed.warnings];
     // What fixtures and templates import: the package, or the sub-path of it that was asked for.
@@ -435,6 +435,7 @@ export async function auditNpm({ browser, planTarget, plan, cwd, install = insta
           reactDom: installed.reactDom,
           vue: installed.vue ?? null,
           angular: installed.angular ?? null,
+          svelte: installed.svelte ?? null,
           ...(flavor === "html" ? { assets: /** @type {any} */ (context).assets } : {}),
           tags: flavor === "wc" ? found.tags : [],
         },

package/src/run/generate-fixture.js

@@ -1,8 +1,9 @@
 import { mkdirSync, writeFileSync } from "node:fs";
 import { join } from "node:path";
+import { explainFrameworkError } from "../frameworks/errors.js";
 import { probeFixture } from "../harness/generate/probe.js";
 
-const firstLine = (error) => (error instanceof Error ? error.message : String(error)).split("\n").find((l) => l.trim()) ?? "unknown error";
+const firstLine = (error) => explainFrameworkError((error instanceof Error ? error.message : String(error)).split("\n").find((l) => l.trim()) ?? "unknown error");
 
 /**
  * Build a fixture for an archetype from what discovery found, and keep it only if it works.

package/src/run/run-plan.js

@@ -17,6 +17,7 @@ import { parseResults } from "../schema.js";
 import { runRules, selfTest } from "../tiers/rules/index.js";
 import { evaluateFailCheck } from "./fail-check.js";
 import { mapPool } from "./pool.js";
+import { explainFrameworkError } from "../frameworks/errors.js";
 import { auditNpm } from "./audit-npm.js";
 import { adapterFor } from "../frameworks/index.js";
 import { failedTarget, summarize } from "./summary.js";
@@ -26,7 +27,7 @@ const STORY_CONCURRENCY = 4;
 
 const EXIT = { OK: 0, FAIL_THRESHOLD: 1, ENVIRONMENT: 3, ALL_TARGETS_FAILED: 4 };
 
-const NPM_KINDS = new Set(["npm", "npm-react", "npm-vue", "npm-angular", "npm-html", "npm-wc", "npm-unsupported"]);
+const NPM_KINDS = new Set(["npm", "npm-react", "npm-vue", "npm-angular", "npm-svelte", "npm-html", "npm-wc", "npm-unsupported"]);
 const UNSUPPORTED_KIND = (kind) => `${kind} targets aren't supported.`;
 
 /** Audit one page and return its target result. */
@@ -182,7 +183,7 @@ async function runTarget(browser, planTarget, plan, io) {
     }
     return { result: failedTarget(planTarget.id, UNSUPPORTED_KIND(planTarget.kind)), mapping: null };
   } catch (error) {
-    return { result: failedTarget(planTarget.id, error instanceof Error ? error.message.split("\n")[0] : String(error)), mapping: null };
+    return { result: failedTarget(planTarget.id, explainFrameworkError(error instanceof Error ? error.message.split("\n")[0] : String(error))), mapping: null };
   } finally {
     for (const server of servers) await server.close();
   }

package/src/schema.js

@@ -9,7 +9,7 @@ export const IMPACTS = ["minor", "moderate", "serious", "critical"];
 export const TOOLKIT_LEVELS = [1, 2, 3];
 export const FAIL_MODES = ["any", "all"];
 export const ARCHETYPES = ["button", "link", "dialog", "menu", "tabs", "combobox", "form-field", "accordion", "tooltip", "live-region", "chart"];
-export const FLAVORS = ["react", "vue", "angular", "html", "wc"];
+export const FLAVORS = ["react", "vue", "angular", "svelte", "html", "wc"];
 export const MAPPING_STATUSES = ["template", "authored", "generated", "needs-fixture", "no-match"];
 
 /** What a candidate mapping says about one archetype of one npm target. */
@@ -49,7 +49,7 @@ export function parseMappingFile(input) {
   return result.output;
 }
 
-export const TARGET_KINDS = ["npm", "npm-react", "npm-vue", "npm-angular", "npm-html", "npm-wc", "npm-unsupported", "npm-non-ui", "storybook", "url", "html-file", "static-dir"];
+export const TARGET_KINDS = ["npm", "npm-react", "npm-vue", "npm-angular", "npm-svelte", "npm-html", "npm-wc", "npm-unsupported", "npm-non-ui", "storybook", "url", "html-file", "static-dir"];
 
 const nullableString = v.nullable(v.string());
 
@@ -240,6 +240,7 @@ export const TargetResultSchema = v.object({
       reactDom: nullableString,
       vue: v.optional(nullableString),
       angular: v.optional(nullableString),
+      svelte: v.optional(nullableString),
       /** For plain HTML, the stylesheets and scripts the page loaded, as `package/sub-path`. */
       assets: v.optional(v.object({ styles: v.array(v.string()), scripts: v.array(v.string()) })),
       tags: v.array(v.string()),