tessera-learn 0.0.10 → 0.0.13

package/src/components/Sorting.svelte

@@ -19,15 +19,15 @@
     weight = 1,
   } = $props();
 
-  let queue = $state([]);              // item indices not yet placed; queue[0] is current
-  let placements = $state(new SvelteMap()); // itemIdx → targetIdx
-  let dragOver = $state(null);         // target index highlighted during drag
+  let queue = $state([]); // item indices not yet placed; queue[0] is current
+  const placements = new SvelteMap(); // itemIdx → targetIdx
+  let dragOver = $state(null); // target index highlighted during drag
   let isDragging = $state(false);
-  let cardSelected = $state(false);    // current card selected via tap/click
+  let cardSelected = $state(false); // current card selected via tap/click
 
   function initQueue() {
     queue = shuffle(items.map((_, i) => i));
-    placements = new SvelteMap();
+    placements.clear();
     cardSelected = false;
     dragOver = null;
     isDragging = false;
@@ -50,12 +50,21 @@
   // cleanly to SCORM 2004's `matching` interaction. We emit [itemIdx, targetIdx]
   // pairs as stringified ids.
   const q = useQuestion({
-    get id() { return id ?? `sorting-${slugFromQuestion(question)}`; },
-    get weight() { return weight; },
-    get maxRetries() { return maxRetries; },
+    get id() {
+      return id ?? `sorting-${slugFromQuestion(question)}`;
+    },
+    get weight() {
+      return weight;
+    },
+    get maxRetries() {
+      return maxRetries;
+    },
     response: () => ({
       type: 'matching',
-      response: [...placements.entries()].map(([i, t]) => [String(i), String(t)]),
+      response: [...placements.entries()].map(([i, t]) => [
+        String(i),
+        String(t),
+      ]),
       correct: items.map((_, i) => [String(i), String(correct[i])]),
     }),
     reset: resetState,
@@ -165,7 +174,6 @@
       onTargetClick(targetIdx);
     }
   }
-
 </script>
 
 {#snippet sortingContent()}
@@ -198,7 +206,9 @@
             {queue.length} of {items.length} to sort
           </p>
           {#if cardSelected}
-            <p class="tessera-sorting-hint">Click a target below to place this card</p>
+            <p class="tessera-sorting-hint">
+              Click a target below to place this card
+            </p>
           {/if}
         </div>
       {:else}
@@ -210,8 +220,11 @@
   {/if}
 
   <!-- Drop targets -->
-  <div class="tessera-sorting-targets" class:targets-active={cardSelected && !q.locked}>
-    {#each targets as targetLabel, targetIdx}
+  <div
+    class="tessera-sorting-targets"
+    class:targets-active={cardSelected && !q.locked}
+  >
+    {#each targets as targetLabel, targetIdx (targetIdx)}
       {@const targetItems = getItemsForTarget(targetIdx)}
       <div
         class="tessera-sorting-target"
@@ -220,7 +233,9 @@
         role="button"
         tabindex="0"
         aria-disabled={!(cardSelected && !q.locked)}
-        aria-label="Target: {targetLabel}{cardSelected && !q.locked ? ` (activate to place ${items[currentItemIdx]})` : ''}"
+        aria-label="Target: {targetLabel}{cardSelected && !q.locked
+          ? ` (activate to place ${items[currentItemIdx]})`
+          : ''}"
         ondragover={(e) => onDragOver(e, targetIdx)}
         ondragleave={onDragLeave}
         ondrop={(e) => onDrop(e, targetIdx)}
@@ -230,19 +245,23 @@
         <div class="tessera-sorting-target-label">{targetLabel}</div>
         {#if targetItems.length > 0}
           <div class="tessera-sorting-target-items">
-            {#each targetItems as itemIdx}
+            {#each targetItems as itemIdx (itemIdx)}
               <div
                 class="tessera-sorting-placed-item"
                 class:correct={q.feedbackVisible && isCorrectPlacement(itemIdx)}
-                class:incorrect={q.feedbackVisible && !isCorrectPlacement(itemIdx)}
+                class:incorrect={q.feedbackVisible &&
+                  !isCorrectPlacement(itemIdx)}
               >
                 <span class="tessera-sorting-item-text">{items[itemIdx]}</span>
                 {#if !q.locked}
                   <button
                     class="tessera-sorting-remove"
                     aria-label="Return '{items[itemIdx]}' to deck"
-                    onclick={(e) => { e.stopPropagation(); returnCard(itemIdx); }}
-                  >×</button>
+                    onclick={(e) => {
+                      e.stopPropagation();
+                      returnCard(itemIdx);
+                    }}>×</button
+                  >
                 {:else if q.feedbackVisible}
                   <span class="tessera-sorting-item-icon" aria-hidden="true">
                     {isCorrectPlacement(itemIdx) ? '✓' : '✗'}
@@ -275,8 +294,10 @@
         </div>
         <div class="tessera-sorting-correct-list">
           <p class="tessera-sorting-correct-title">Correct arrangement:</p>
-          {#each items as item, i}
-            <p class="tessera-sorting-correct-item">{item} → {targets[correct[i]]}</p>
+          {#each items as item, i (i)}
+            <p class="tessera-sorting-correct-item">
+              {item} → {targets[correct[i]]}
+            </p>
           {/each}
         </div>
         {#if incorrectFeedback}
@@ -292,7 +313,10 @@
   <!-- Standalone Check button (shown once all cards are placed) -->
   {#if !inQuiz && !q.submitted && placements.size === items.length}
     <div class="tessera-sorting-actions">
-      <button class="tessera-btn-primary tessera-sorting-check" onclick={() => q.submit()}>
+      <button
+        class="tessera-btn-primary tessera-sorting-check"
+        onclick={() => q.submit()}
+      >
         Check Answer
       </button>
     </div>
@@ -359,7 +383,10 @@
     font-family: var(--tessera-font-family);
     color: var(--tessera-text);
     cursor: grab;
-    transition: border-color 0.15s, transform 0.15s, box-shadow 0.15s;
+    transition:
+      border-color 0.15s,
+      transform 0.15s,
+      box-shadow 0.15s;
     text-align: center;
     user-select: none;
   }
@@ -424,7 +451,9 @@
     border: 2px dashed var(--tessera-border);
     border-radius: 10px;
     background: var(--tessera-bg-secondary);
-    transition: border-color 0.15s, background 0.15s;
+    transition:
+      border-color 0.15s,
+      background 0.15s;
     overflow: hidden;
     display: flex;
     flex-direction: column;
@@ -478,7 +507,9 @@
     font-size: 0.875rem;
     font-family: var(--tessera-font-family);
     color: var(--tessera-text);
-    transition: border-color 0.15s, background 0.15s;
+    transition:
+      border-color 0.15s,
+      background 0.15s;
     pointer-events: all;
   }
 
@@ -550,8 +581,12 @@
     margin-bottom: var(--tessera-spacing-sm);
   }
 
-  .tessera-sorting-result.correct { color: var(--tessera-success); }
-  .tessera-sorting-result.incorrect { color: var(--tessera-error); }
+  .tessera-sorting-result.correct {
+    color: var(--tessera-success);
+  }
+  .tessera-sorting-result.incorrect {
+    color: var(--tessera-error);
+  }
 
   .tessera-sorting-correct-list {
     margin: var(--tessera-spacing-sm) 0;

package/src/components/Transcript.svelte

@@ -0,0 +1,37 @@
+<script>
+  /**
+   * @component Transcript
+   * Shared transcript disclosure for Audio/Video (WCAG 1.2). Renders nothing
+   * when empty.
+   *
+   * @prop {string} [text] - Transcript text shown in a <details> disclosure.
+   */
+  let { text = '' } = $props();
+</script>
+
+{#if text}
+  <details class="tessera-transcript">
+    <summary>Transcript</summary>
+    <div class="tessera-transcript-body">{text}</div>
+  </details>
+{/if}
+
+<style>
+  .tessera-transcript {
+    margin-top: var(--tessera-spacing-sm);
+    margin-bottom: var(--tessera-spacing-lg);
+    font-size: 0.875rem;
+  }
+
+  .tessera-transcript summary {
+    cursor: pointer;
+    font-weight: 600;
+    color: var(--tessera-text);
+  }
+
+  .tessera-transcript-body {
+    margin-top: var(--tessera-spacing-sm);
+    color: var(--tessera-text-light);
+    white-space: pre-line;
+  }
+</style>

package/src/components/Video.svelte

@@ -4,28 +4,27 @@
    * Embeds YouTube/Vimeo via iframe or local video files.
    * Lazy-loads via IntersectionObserver.
    *
-   * @prop {string} src - Video URL (YouTube, Vimeo, or direct video file)
-   * @prop {string} [title] - Accessible label for the video
+   * @prop {string} src - Video URL (YouTube, Vimeo, direct video file, or $assets/ path)
+   * @prop {string} title - Accessible label for the video (required; rule 1.4)
+   * @prop {Array<{ src: string, kind?: 'captions'|'subtitles', srclang?: string, label?: string }>} [tracks] -
+   *   Caption/subtitle tracks for native (non-embed) video, rendered as <track>.
+   *   Ignored for YouTube/Vimeo embeds — the platform owns their captions.
+   * @prop {string} [transcript] - Transcript text shown in a <details> disclosure
+   *   below the player. To load it from a file, import the file with Vite's ?raw
+   *   suffix: `import t from '$assets/x.txt?raw'` then `transcript={t}`.
    */
   import { onMount } from 'svelte';
+  import { resolveAsset } from './util.js';
+  import { resolveVideoEmbedUrl } from './video-embed.js';
+  import MediaTracks from './MediaTracks.svelte';
+  import Transcript from './Transcript.svelte';
 
-  let { src, title = '' } = $props();
+  let { src, title, tracks = [], transcript = '' } = $props();
+  let resolvedSrc = $derived(resolveAsset(src));
   let containerRef = $state(null);
   let visible = $state(false);
 
-  const youtubeRegex = /(?:youtube\.com\/(?:watch\?v=|embed\/)|youtu\.be\/)([a-zA-Z0-9_-]{11})/;
-  const vimeoRegex = /vimeo\.com\/(?:video\/)?(\d+)/;
-
-  let embedUrl = $derived.by(() => {
-    const ytMatch = src.match(youtubeRegex);
-    if (ytMatch) return `https://www.youtube.com/embed/${ytMatch[1]}`;
-
-    const vimeoMatch = src.match(vimeoRegex);
-    if (vimeoMatch) return `https://player.vimeo.com/video/${vimeoMatch[1]}`;
-
-    return null;
-  });
-
+  let embedUrl = $derived(resolveVideoEmbedUrl(src));
   let isEmbed = $derived(embedUrl !== null);
 
   onMount(() => {
@@ -38,7 +37,7 @@
           observer.disconnect();
         }
       },
-      { rootMargin: '200px' }
+      { rootMargin: '200px' },
     );
 
     observer.observe(containerRef);
@@ -46,7 +45,11 @@
   });
 </script>
 
-<div class="tessera-video" bind:this={containerRef} aria-label={title || 'Video'}>
+<div
+  class="tessera-video"
+  bind:this={containerRef}
+  aria-label={title || 'Video'}
+>
   {#if visible}
     {#if isEmbed}
       <div class="tessera-video-embed">
@@ -59,9 +62,9 @@
         ></iframe>
       </div>
     {:else}
-      <!-- svelte-ignore a11y_media_has_caption -->
       <video controls class="tessera-video-native" aria-label={title}>
-        <source {src} />
+        <source src={resolvedSrc} />
+        <MediaTracks {tracks} />
         Your browser does not support the video element.
       </video>
     {/if}
@@ -72,6 +75,8 @@
   {/if}
 </div>
 
+<Transcript text={transcript} />
+
 <style>
   .tessera-video {
     margin-bottom: var(--tessera-spacing-lg);

package/src/components/util.ts

@@ -7,7 +7,10 @@
  * same alias semantics.
  */
 export function resolveAsset(src: string): string {
-  return src.startsWith('$assets/') ? src.replace('$assets/', './assets/') : src;
+  if (!src) return src;
+  return src.startsWith('$assets/')
+    ? src.replace('$assets/', './assets/')
+    : src;
 }
 
 /**

package/src/components/video-embed.ts

@@ -0,0 +1,25 @@
+/**
+ * Shared YouTube/Vimeo embed detection. Used by Video.svelte to pick the iframe
+ * vs native-<video> render path, and by the Tier-1b linter (rule 1.4) so its
+ * caption/transcript guidance matches what the component actually renders.
+ */
+
+const YOUTUBE_RE =
+  /(?:youtube\.com\/(?:watch\?v=|embed\/)|youtu\.be\/)([a-zA-Z0-9_-]{11})/;
+const VIMEO_RE = /vimeo\.com\/(?:video\/)?(\d+)/;
+
+/** Resolve a source URL to its embed URL, or null if it's not a known embed. */
+export function resolveVideoEmbedUrl(src: string): string | null {
+  const yt = src.match(YOUTUBE_RE);
+  if (yt) return `https://www.youtube.com/embed/${yt[1]}`;
+
+  const vimeo = src.match(VIMEO_RE);
+  if (vimeo) return `https://player.vimeo.com/video/${vimeo[1]}`;
+
+  return null;
+}
+
+/** True when the component will render an iframe embed rather than <video>. */
+export function isVideoEmbed(src: string): boolean {
+  return resolveVideoEmbedUrl(src) !== null;
+}

package/src/index.ts

@@ -18,10 +18,7 @@ export {
   sequentialAccess,
   resolveAccess,
 } from './runtime/access.js';
-export type {
-  AccessFn,
-  AccessContext,
-} from './runtime/access.js';
+export type { AccessFn, AccessContext } from './runtime/access.js';
 
 // ---- xAPI ----
 export { useXAPI } from './runtime/xapi/registry.js';
@@ -40,9 +37,7 @@ export type {
 } from './runtime/xapi/types.js';
 
 // ---- Types ----
-export type {
-  Interaction,
-} from './runtime/interaction.js';
+export type { Interaction } from './runtime/interaction.js';
 export { isCorrect } from './runtime/interaction.js';
 export type {
   UseQuestionOptions,

package/src/plugin/a11y/audit.ts

@@ -0,0 +1,299 @@
+import { existsSync, writeFileSync } from 'node:fs';
+import { resolve } from 'node:path';
+import { generateManifest, readCourseConfig } from '../manifest.js';
+import { normalizeA11y, type A11ySettings } from '../validation.js';
+
+export interface AuditOptions {
+  /** Minimum violation impact that fails the run (CI gate). Default 'serious'. */
+  threshold?: ImpactLevel;
+  /** Force a fresh `vite build` even if dist/ exists. */
+  rebuild?: boolean;
+}
+
+export type ImpactLevel = 'minor' | 'moderate' | 'serious' | 'critical';
+
+const IMPACT_RANK: Record<ImpactLevel, number> = {
+  minor: 1,
+  moderate: 2,
+  serious: 3,
+  critical: 4,
+};
+
+// Set by runAudit during its build/preview; the plugin forces the WebAdapter,
+// skips export packaging, and stubs xAPI while it's set. See plugin/index.ts.
+export const AUDIT_ENV_FLAG = 'TESSERA_A11Y_AUDIT';
+
+interface AxeViolation {
+  id: string;
+  impact: ImpactLevel | null;
+  help: string;
+  helpUrl: string;
+  nodes: number;
+}
+
+interface PageAuditResult {
+  index: number;
+  title: string;
+  violations: AxeViolation[];
+}
+
+interface AuditReport {
+  standard: A11ySettings['standard'];
+  threshold: ImpactLevel;
+  pages: PageAuditResult[];
+  totalViolations: number;
+  failingViolations: number;
+  passed: boolean;
+}
+
+/** Map the `a11y.standard` enum to axe's cumulative `runOnly` tag list. */
+export function axeTags(standard: A11ySettings['standard']): string[] {
+  switch (standard) {
+    case 'wcag2a':
+      return ['wcag2a'];
+    case 'wcag21aa':
+      return ['wcag2a', 'wcag2aa', 'wcag21a', 'wcag21aa'];
+    case 'wcag2aa':
+    default:
+      return ['wcag2a', 'wcag2aa'];
+  }
+}
+
+/** axe-applicable ignore entries: drop the Tier-1a/1b namespaces. */
+export function axeIgnoreRules(ignore: string[]): string[] {
+  return ignore.filter(
+    (id) => !id.startsWith('tessera/') && !id.startsWith('a11y_'),
+  );
+}
+
+// A violation with no impact is treated as failing rather than slipping the
+// gate at every threshold.
+function isFailing(v: AxeViolation, thresholdRank: number): boolean {
+  return !v.impact || IMPACT_RANK[v.impact] >= thresholdRank;
+}
+
+// Optional deps loaded by variable specifier so tsc doesn't require them to be
+// installed — Tier 2 is opt-in and the absence is handled with a clear message.
+async function tryImport(specifier: string): Promise<unknown> {
+  return import(specifier);
+}
+
+interface LoadedDeps {
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  chromium: any;
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  AxeBuilder: any;
+}
+
+async function loadDeps(): Promise<
+  { ok: true; deps: LoadedDeps } | { ok: false; missing: string }
+> {
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  let chromium: any;
+  for (const spec of ['playwright', '@playwright/test']) {
+    try {
+      const mod = (await tryImport(spec)) as { chromium?: unknown };
+      if (mod.chromium) {
+        chromium = mod.chromium;
+        break;
+      }
+    } catch {
+      // try the next specifier
+    }
+  }
+  if (!chromium) return { ok: false, missing: 'playwright' };
+
+  try {
+    const mod = (await tryImport('@axe-core/playwright')) as {
+      default?: unknown;
+    };
+    if (!mod.default) return { ok: false, missing: '@axe-core/playwright' };
+    return { ok: true, deps: { chromium, AxeBuilder: mod.default } };
+  } catch {
+    return { ok: false, missing: '@axe-core/playwright' };
+  }
+}
+
+/**
+ * Run the Tier-2 runtime accessibility audit against a built course. Builds (or
+ * reuses) dist/, serves it, drives Playwright + axe-core over each page, writes
+ * a11y-report.json, and returns a process exit code (0 pass, 1 fail/error).
+ */
+export async function runAudit(
+  projectRoot: string,
+  options: AuditOptions = {},
+): Promise<number> {
+  const threshold: ImpactLevel = options.threshold ?? 'serious';
+
+  const deps = await loadDeps();
+  if (!deps.ok) {
+    console.error(
+      `\x1b[31m[tessera a11y]\x1b[0m Tier 2 needs Playwright + axe-core, which aren't installed.\n` +
+        `  Install them to run the runtime audit:\n` +
+        `    npm i -D playwright @axe-core/playwright\n` +
+        `    npx playwright install chromium`,
+    );
+    return 1;
+  }
+  const { chromium, AxeBuilder } = deps.deps;
+
+  const read = readCourseConfig(projectRoot);
+  const settings = normalizeA11y(read.ok ? read.config.a11y : undefined);
+  const tags = axeTags(settings.standard);
+  const disableRules = axeIgnoreRules(settings.ignore);
+
+  const manifest = generateManifest(resolve(projectRoot, 'pages'));
+
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  const vite = (await import('vite')) as any;
+
+  // A throwaway web build, kept out of dist/ so a real LMS export is untouched.
+  const auditDist = resolve(projectRoot, 'node_modules', '.tessera-a11y');
+  const distHtml = resolve(auditDist, 'index.html');
+
+  const prevEnv = process.env[AUDIT_ENV_FLAG];
+  process.env[AUDIT_ENV_FLAG] = '1';
+
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  let server: any;
+  try {
+    if (options.rebuild || !existsSync(distHtml)) {
+      console.log('[tessera a11y] Building course…');
+      await vite.build({
+        root: projectRoot,
+        build: { outDir: auditDist, emptyOutDir: true },
+        logLevel: 'warn',
+      });
+    }
+
+    server = await vite.preview({
+      root: projectRoot,
+      build: { outDir: auditDist },
+      preview: { port: 0, host: '127.0.0.1' },
+      logLevel: 'warn',
+    });
+    const baseUrl: string | undefined = server.resolvedUrls?.local?.[0];
+    if (!baseUrl) {
+      console.error('[tessera a11y] Could not determine preview server URL.');
+      return 1;
+    }
+
+    const browser = await chromium.launch();
+    const pages: PageAuditResult[] = [];
+    try {
+      // axe-core/playwright requires a page from an explicit context.
+      const context = await browser.newContext();
+      const page = await context.newPage();
+      // ?__tessera_audit unlocks navigation so quiz-gated pages can be scanned.
+      const auditUrl = new URL(baseUrl);
+      auditUrl.searchParams.set('__tessera_audit', '1');
+      await page.goto(auditUrl.href, { waitUntil: 'networkidle' });
+      await page.waitForSelector('#tessera-app', { timeout: 20_000 });
+
+      const scan = async (): Promise<AxeViolation[]> => {
+        const builder = new AxeBuilder({ page }).withTags(tags);
+        if (disableRules.length > 0) builder.disableRules(disableRules);
+        const out = await builder.analyze();
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        return out.violations.map((v: any) => ({
+          id: v.id,
+          impact: v.impact ?? null,
+          help: v.help,
+          helpUrl: v.helpUrl,
+          nodes: v.nodes.length,
+        }));
+      };
+
+      const navCount = await page.locator('button.tessera-nav-page').count();
+      if (navCount === 0) {
+        // No sidebar (custom chrome) — audit whatever is rendered at the entry.
+        pages.push({
+          index: 0,
+          title: manifest.pages[0]?.title ?? '(entry)',
+          violations: await scan(),
+        });
+      } else {
+        for (let i = 0; i < navCount; i++) {
+          const btn = page.locator('button.tessera-nav-page').nth(i);
+          const title = (await btn.textContent())?.trim() || `Page ${i + 1}`;
+          await btn.click();
+          await page.waitForFunction(
+            (idx: number) =>
+              document
+                .querySelectorAll('button.tessera-nav-page')
+                [idx]?.getAttribute('aria-current') === 'page',
+            i,
+            { timeout: 20_000 },
+          );
+          await page.waitForLoadState('networkidle');
+          pages.push({ index: i, title, violations: await scan() });
+        }
+      }
+    } finally {
+      await browser.close();
+    }
+
+    const thresholdRank = IMPACT_RANK[threshold];
+    let totalViolations = 0;
+    let failingViolations = 0;
+    for (const p of pages) {
+      for (const v of p.violations) {
+        totalViolations++;
+        if (isFailing(v, thresholdRank)) failingViolations++;
+      }
+    }
+
+    const report: AuditReport = {
+      standard: settings.standard,
+      threshold,
+      pages,
+      totalViolations,
+      failingViolations,
+      passed: failingViolations === 0,
+    };
+    const reportPath = resolve(projectRoot, 'a11y-report.json');
+    writeFileSync(reportPath, JSON.stringify(report, null, 2), 'utf-8');
+
+    printSummary(report, reportPath);
+    return report.passed ? 0 : 1;
+  } catch (err) {
+    console.error(
+      `\x1b[31m[tessera a11y]\x1b[0m Audit could not complete: ${
+        err instanceof Error ? err.message : String(err)
+      }`,
+    );
+    return 1;
+  } finally {
+    server?.httpServer?.close?.();
+    if (prevEnv === undefined) delete process.env[AUDIT_ENV_FLAG];
+    else process.env[AUDIT_ENV_FLAG] = prevEnv;
+  }
+}
+
+function printSummary(report: AuditReport, reportPath: string): void {
+  const thresholdRank = IMPACT_RANK[report.threshold];
+  for (const p of report.pages) {
+    if (p.violations.length === 0) {
+      console.log(`\x1b[32m  ✓\x1b[0m ${p.title}`);
+      continue;
+    }
+    const failing = p.violations.some((v) => isFailing(v, thresholdRank));
+    const mark = failing ? '\x1b[31m  ✗\x1b[0m' : '\x1b[33m  ⚠\x1b[0m';
+    console.log(`${mark} ${p.title}`);
+    for (const v of p.violations) {
+      console.log(
+        `      [${v.impact ?? 'n/a'}] ${v.id} — ${v.help} (${v.nodes} node${v.nodes === 1 ? '' : 's'})`,
+      );
+    }
+  }
+  console.log(`\n[tessera a11y] Report written to ${reportPath}`);
+  if (report.passed) {
+    console.log(
+      `\x1b[32m[tessera a11y] Passed\x1b[0m — ${report.totalViolations} total finding(s), none at/above "${report.threshold}".`,
+    );
+  } else {
+    console.log(
+      `\x1b[31m[tessera a11y] Failed\x1b[0m — ${report.failingViolations} finding(s) at/above "${report.threshold}" (of ${report.totalViolations} total).`,
+    );
+  }
+}