pour-engine 1.19.0 → 1.21.0

package/engine/COVERAGE.md

@@ -12,7 +12,7 @@ meaning that only a person can settle, even where a rule decides most real pages
 
 | SC | Name | Level | Coverage | Rules |
 |---|---|---|---|---|
-| 1.1.1 | [Non-text Content](https://www.w3.org/WAI/WCAG22/Understanding/non-text-content.html) | A | Partially automated | area-alt, image-alt, input-image-alt, object-alt, svg-img-alt |
+| 1.1.1 | [Non-text Content](https://www.w3.org/WAI/WCAG22/Understanding/non-text-content.html) | A | Partially automated | area-alt, canvas-alt, embed-alt, image-alt, input-image-alt, object-alt, svg-img-alt |
 | 1.2.1 | [Audio-only and Video-only (Prerecorded)](https://www.w3.org/WAI/WCAG22/Understanding/audio-only-and-video-only-prerecorded.html) | A | Manual review | — |
 | 1.2.2 | [Captions (Prerecorded)](https://www.w3.org/WAI/WCAG22/Understanding/captions-prerecorded.html) | A | Partially automated | media-captions |
 | 1.2.3 | [Audio Description or Media Alternative (Prerecorded)](https://www.w3.org/WAI/WCAG22/Understanding/audio-description-or-media-alternative-prerecorded.html) | A | Manual review | — |
@@ -51,7 +51,7 @@ meaning that only a person can settle, even where a rule decides most real pages
 | 2.1.3 | [Keyboard (No Exception)](https://www.w3.org/WAI/WCAG22/Understanding/keyboard-no-exception.html) | AAA | Partially automated | scrollable-region-focusable |
 | 2.1.4 | [Character Key Shortcuts](https://www.w3.org/WAI/WCAG22/Understanding/character-key-shortcuts.html) | A | Manual review | — |
 | 2.2.1 | [Timing Adjustable](https://www.w3.org/WAI/WCAG22/Understanding/timing-adjustable.html) | A | Partially automated | meta-refresh |
-| 2.2.2 | [Pause, Stop, Hide](https://www.w3.org/WAI/WCAG22/Understanding/pause-stop-hide.html) | A | Partially automated | pause-stop-hide |
+| 2.2.2 | [Pause, Stop, Hide](https://www.w3.org/WAI/WCAG22/Understanding/pause-stop-hide.html) | A | Partially automated | pause-stop-hide, video-loop-motion |
 | 2.2.3 | [No Timing](https://www.w3.org/WAI/WCAG22/Understanding/no-timing.html) | AAA | Manual review | — |
 | 2.2.4 | [Interruptions](https://www.w3.org/WAI/WCAG22/Understanding/interruptions.html) | AAA | Manual review | — |
 | 2.2.5 | [Re-authenticating](https://www.w3.org/WAI/WCAG22/Understanding/re-authenticating.html) | AAA | Manual review | — |
@@ -61,7 +61,7 @@ meaning that only a person can settle, even where a rule decides most real pages
 | 2.3.3 | [Animation from Interactions](https://www.w3.org/WAI/WCAG22/Understanding/animation-from-interactions.html) | AAA | Manual review | — |
 | 2.4.1 | [Bypass Blocks](https://www.w3.org/WAI/WCAG22/Understanding/bypass-blocks.html) | A | Partially automated | bypass-blocks |
 | 2.4.2 | [Page Titled](https://www.w3.org/WAI/WCAG22/Understanding/page-titled.html) | A | Partially automated | document-title |
-| 2.4.3 | [Focus Order](https://www.w3.org/WAI/WCAG22/Understanding/focus-order.html) | A | Manual review | — |
+| 2.4.3 | [Focus Order](https://www.w3.org/WAI/WCAG22/Understanding/focus-order.html) | A | Partially automated | visual-order-divergence |
 | 2.4.4 | [Link Purpose (In Context)](https://www.w3.org/WAI/WCAG22/Understanding/link-purpose-in-context.html) | A | Partially automated | area-alt, link-name, link-text-generic |
 | 2.4.5 | [Multiple Ways](https://www.w3.org/WAI/WCAG22/Understanding/multiple-ways.html) | AA | Manual review | — |
 | 2.4.6 | [Headings and Labels](https://www.w3.org/WAI/WCAG22/Understanding/headings-and-labels.html) | AA | Manual review | — |
@@ -91,13 +91,13 @@ meaning that only a person can settle, even where a rule decides most real pages
 | 3.1.4 | [Abbreviations](https://www.w3.org/WAI/WCAG22/Understanding/abbreviations.html) | AAA | Manual review | — |
 | 3.1.5 | [Reading Level](https://www.w3.org/WAI/WCAG22/Understanding/reading-level.html) | AAA | Manual review | — |
 | 3.1.6 | [Pronunciation](https://www.w3.org/WAI/WCAG22/Understanding/pronunciation.html) | AAA | Manual review | — |
-| 3.2.1 | [On Focus](https://www.w3.org/WAI/WCAG22/Understanding/on-focus.html) | A | Manual review | — |
-| 3.2.2 | [On Input](https://www.w3.org/WAI/WCAG22/Understanding/on-input.html) | A | Manual review | — |
+| 3.2.1 | [On Focus](https://www.w3.org/WAI/WCAG22/Understanding/on-focus.html) | A | Partially automated | on-input-navigation |
+| 3.2.2 | [On Input](https://www.w3.org/WAI/WCAG22/Understanding/on-input.html) | A | Partially automated | on-input-navigation |
 | 3.2.3 | [Consistent Navigation](https://www.w3.org/WAI/WCAG22/Understanding/consistent-navigation.html) | AA | Manual review | — |
 | 3.2.4 | [Consistent Identification](https://www.w3.org/WAI/WCAG22/Understanding/consistent-identification.html) | AA | Manual review | — |
 | 3.2.5 | [Change on Request](https://www.w3.org/WAI/WCAG22/Understanding/change-on-request.html) | AAA | Manual review | — |
 | 3.2.6 | [Consistent Help](https://www.w3.org/WAI/WCAG22/Understanding/consistent-help.html) | A | Manual review | — |
-| 3.3.1 | [Error Identification](https://www.w3.org/WAI/WCAG22/Understanding/error-identification.html) | A | Manual review | — |
+| 3.3.1 | [Error Identification](https://www.w3.org/WAI/WCAG22/Understanding/error-identification.html) | A | Partially automated | error-message-linkage |
 | 3.3.2 | [Labels or Instructions](https://www.w3.org/WAI/WCAG22/Understanding/labels-or-instructions.html) | A | Partially automated | form-label |
 | 3.3.3 | [Error Suggestion](https://www.w3.org/WAI/WCAG22/Understanding/error-suggestion.html) | AA | Manual review | — |
 | 3.3.4 | [Error Prevention (Legal, Financial, Data)](https://www.w3.org/WAI/WCAG22/Understanding/error-prevention-legal-financial-data.html) | AA | Manual review | — |
@@ -111,7 +111,7 @@ meaning that only a person can settle, even where a rule decides most real pages
 
 | SC | Name | Level | Coverage | Rules |
 |---|---|---|---|---|
-| 4.1.2 | [Name, Role, Value](https://www.w3.org/WAI/WCAG22/Understanding/name-role-value.html) | A | Partially automated | input-image-alt, form-label, link-name, aria-allowed-attr, aria-attr-valid, aria-field-name, aria-hidden-focus, aria-valid-refs, button-name, dialog-name, frame-title, label-for-valid, nested-interactive, role-required-aria, valid-role |
+| 4.1.2 | [Name, Role, Value](https://www.w3.org/WAI/WCAG22/Understanding/name-role-value.html) | A | Partially automated | input-image-alt, form-label, link-name, aria-allowed-attr, aria-attr-valid, aria-field-name, aria-hidden-focus, aria-label-misuse, aria-valid-refs, button-name, composite-widget-name, dialog-name, frame-title, label-for-valid, nested-interactive, role-required-aria, summary-name, valid-role |
 | 4.1.3 | [Status Messages](https://www.w3.org/WAI/WCAG22/Understanding/status-messages.html) | AA | Manual review | — |
 
-**Totals:** 30 partially automated · 56 manual — with 74 rules.
+**Totals:** 34 partially automated · 52 manual — with 82 rules.

package/engine/README.md

@@ -8,7 +8,11 @@ the product's only engine.
 Section 508, EN 301 549, or other standards. The full WCAG 2.2 catalog (all
 86 success criteria) lives in `wcag22.js`, and `COVERAGE.md` (generated by
 `node scripts/wcag-coverage.js`) shows exactly which criteria are automated,
-partially automated, or need human review.
+partially automated, or need human review. `AUDIT.html` is the latest full
+spec-sweep audit of every rule against the spec — over-violation,
+under-violation, and what the engine cannot test. It is a self-contained
+page: open it straight from disk in any browser. Regenerated by running
+the `spec-sweep` skill.
 
 ## Provenance
 

package/engine/lib/contrast.js

@@ -153,7 +153,7 @@ export function resetAuditCaches() {
  */
 export function backgroundColorSource(element) {
   for (let node = element; node && node.nodeType === 1;
-    node = node.parentElement ?? node.getRootNode()?.host) {
+    node = node.assignedSlot ?? node.parentElement ?? node.getRootNode()?.host) {
     const style = getComputedStyle(node);
     if (style.backgroundImage !== 'none' && !paintsNothing(style.backgroundImage)) return null;
     const color = parseColor(style.backgroundColor);
@@ -209,7 +209,13 @@ function resolveBackground(element, doc) {
     if (color && color.a >= 1) {
       result = color;
     } else {
-      const behind = resolveBackground(element.parentElement ?? element.getRootNode()?.host, doc);
+      // The FLAT-tree parent: a slotted element's backdrop chain runs
+      // through its slot into the shadow tree it renders in — walking the
+      // light parent instead skipped every background painted inside the
+      // outer component's shadow (a consent banner's blue container lived
+      // there, and its slotted copy was judged against the page white).
+      const behind = resolveBackground(
+        element.assignedSlot ?? element.parentElement ?? element.getRootNode()?.host, doc);
       result = behind === null ? null : (color && color.a > 0 ? composite(color, behind) : behind);
     }
   }
@@ -531,7 +537,12 @@ function pseudoLayers(host) {
       // (position: fixed, the common full-page-texture pattern) must not
       // send every element on the page to a human.
       const alphaBound = Math.min(1, opacityFactor * (style.backgroundImage !== 'none' ? 1 : color.a));
-      if (alphaBound > 0) layers.push({ film: alphaBound });
+      // Position rides along: a FIXED unplaceable pseudo is the full-page
+      // overlay pattern and dims everything below the walk; an ABSOLUTE one
+      // that defeated the geometry solver (rotation, percentage insets) is
+      // a decorative shape that nearer opaque paint covers in normal
+      // stacking — the walk needs to know which it is.
+      if (alphaBound > 0) layers.push({ film: alphaBound, fixed: style.position === 'fixed' });
       continue;
     }
     if (rect.empty) continue; // placed, and covers nothing
@@ -586,11 +597,33 @@ export function pseudoBackdropForText(element) {
   let image = null;
   let settled = false; // an opaque colour or an image hit: deeper layers are covered
   let film = 0;
+  // Paint (an opaque background-color or a background-image) on an element
+  // BETWEEN the text and a pseudo's host makes the pseudo's place in the
+  // stack unprovable from here: CSS paint order can put an out-of-flow
+  // ancestor pseudo above OR below that intermediate paint depending on
+  // positioning, z-index and tree order — the full stacking model this walk
+  // deliberately does not reimplement. Such layers are surfaced with
+  // `beyondPaint` so the caller brackets the verdict instead of asserting
+  // against paint that may never show behind the glyphs (a full-page
+  // decorative body::before wash under sections with their own solid
+  // backgrounds produced 90 false contrast failures on one university home).
+  let crossed = false;
+  let beyondPaint = false;
   for (let node = element; node && node.nodeType === 1; node = node.parentElement ?? node.getRootNode()?.host) {
     for (const layer of pseudoLayers(node)) {
-      // Films accumulate over the WHOLE chain — even past an opaque hit,
-      // because an ancestor's ::after can paint above a descendant's pill.
-      if (layer.film) { film = 1 - (1 - film) * (1 - layer.film); continue; }
+      // Films accumulate over the whole chain — an ancestor's fixed ::after
+      // (grain overlays, veils) paints above everything below it. But an
+      // ABSOLUTE pseudo whose geometry could not be solved (a rotated or
+      // percent-positioned decorative shape) sits in normal flow stacking:
+      // once opaque paint lies between the text and its host, that paint
+      // covers it, and filming the verdict anyway sent every element under
+      // a decorative page shape to the review lane (127 reviews on one
+      // charity home whose buttons carry their own solid backgrounds).
+      if (layer.film) {
+        if (!layer.fixed && crossed) continue;
+        film = 1 - (1 - film) * (1 - layer.film);
+        continue;
+      }
       if (settled) continue;
       const { rect, color, imageCss } = layer;
       if (point.x < rect.left || point.x > rect.right || point.y < rect.top || point.y > rect.bottom) continue;
@@ -599,14 +632,28 @@ export function pseudoBackdropForText(element) {
       // and image geometry travel with it: covering the sample point is a
       // fact about the BOX, and a no-repeat icon may still paint nowhere
       // near the text.
-      if (imageCss) { image = { css: imageCss, element: node, box: rect, meta: layer.imageMeta }; settled = true; continue; }
+      if (imageCss) {
+        image = { css: imageCss, element: node, box: rect, meta: layer.imageMeta };
+        settled = true;
+        beyondPaint = beyondPaint || crossed;
+        continue;
+      }
       if (!color || color.a === 0) continue;
       acc = acc ? composite(acc, color) : color;
+      beyondPaint = beyondPaint || crossed;
       if (acc.a >= 1) settled = true;
     }
+    // Crossing updates AFTER the node's own pseudos: a host's ::before
+    // paints above its own background, so its own paint never makes its own
+    // pseudo ambiguous — only paint on elements nearer the text does.
+    if (!crossed) {
+      const style = getComputedStyle(node);
+      if ((style.backgroundImage !== 'none' && !paintsNothing(style.backgroundImage))
+        || (parseColor(style.backgroundColor)?.a ?? 0) >= 1) crossed = true;
+    }
   }
-  if (image) return film > 0 ? { image, film } : { image };
-  if (acc) return film > 0 ? { color: acc, film } : { color: acc };
+  if (image) return { image, ...(film > 0 && { film }), ...(beyondPaint && { beyondPaint }) };
+  if (acc) return { color: acc, ...(film > 0 && { film }), ...(beyondPaint && { beyondPaint }) };
   return film > 0 ? { film } : null;
 }
 
@@ -727,6 +774,13 @@ export function paintedBackdrop(element) {
       return { image: layer, scrim };
     }
     const style = getComputedStyle(layer);
+    // A shadow HOST in the stack hides its shadow tree from the hit-test
+    // (elementsFromPoint retargets internal elements to the host), so paint
+    // inside it is invisible here: compositing the host as "transparent"
+    // and reading layers behind it judged slotted banner text against the
+    // page white while the component's shadow painted a blue container
+    // between them. Whatever renders inside is unknowable to this walk.
+    if (layer.shadowRoot) return 'unresolved';
     // Blend modes and filters change the paint in ways flat colour math
     // can't follow — that's a human check, not a resolution.
     if ((style.mixBlendMode && style.mixBlendMode !== 'normal')

package/engine/rules/index.js

@@ -84,6 +84,16 @@ import reflow from './wcag/1.4.10-reflow.js';
 import focusVisible from './wcag/2.4.7-focus-visible.js';
 import focusNotObscured from './wcag/2.4.11-focus-not-obscured.js';
 import authFieldObstruction from './wcag/3.3.8-auth-field-obstruction.js';
+// 2026-08-10 spec-sweep batch: the six missing failure families plus the two
+// state-dependent heuristics the sweep judged automatable (see COVERAGE.md).
+import embedAlt from './wcag/1.1.1-embed-alt.js';
+import canvasAlt from './wcag/1.1.1-canvas-alt.js';
+import videoLoopMotion from './wcag/2.2.2-video-loop-motion.js';
+import visualOrderDivergence from './wcag/2.4.3-visual-order-divergence.js';
+import onInputNavigation from './wcag/3.2.2-on-input-navigation.js';
+import errorMessageLinkage from './wcag/3.3.1-error-message-linkage.js';
+import compositeWidgetName from './wcag/4.1.2-composite-widget-name.js';
+import summaryName from './wcag/4.1.2-summary-name.js';
 
 // --- Best practice ---
 import headingOrder from './best-practice/heading-order.js';
@@ -171,6 +181,14 @@ export default [
   focusVisible,
   focusNotObscured,
   authFieldObstruction,
+  embedAlt,
+  canvasAlt,
+  videoLoopMotion,
+  visualOrderDivergence,
+  onInputNavigation,
+  errorMessageLinkage,
+  compositeWidgetName,
+  summaryName,
   contrastEnhanced,
   targetSizeEnhanced,
   headingOrder,

package/engine/rules/wcag/1.1.1-canvas-alt.js

@@ -0,0 +1,43 @@
+// WCAG SC 1.1.1 Non-text Content (Level A)
+// A roleless <canvas> with no name and no fallback content is the default
+// output of every chart library, and it reaches assistive technology as
+// nothing at all. Whether that is a failure is exactly the question the
+// roleless-<svg> branch of svg-img-alt already models: a WebGL backdrop is
+// decorative, a revenue chart is the content of the page, and no static
+// pass can tell them apart. Same shape, same verdict — review, with the
+// same escape hatches (fallback content, a named enclosing control, or an
+// explicit decorative/labelled role).
+//
+// <canvas role="img"> without a name is already a hard fail via
+// svg-img-alt's [role="img"] arm; this rule only owns the silent default.
+// A size floor keeps sparkline-and-effect noise out: tiny canvases are
+// bullets and flourishes, and flagging them all would bury the chart that
+// matters.
+export default {
+  id: 'canvas-alt',
+  impact: 'moderate',
+  tags: ['wcag2a', 'wcag111'],
+  help: 'Meaningful <canvas> graphics need an accessible name or fallback',
+  helpUrl: 'https://www.w3.org/WAI/WCAG22/Understanding/non-text-content.html',
+  selector: 'canvas:not([role])',
+  evaluate(element, { accessibleName }) {
+    if (accessibleName(element)) return { status: 'pass' };
+    // Fallback content inside <canvas> is what AT reads — but chart
+    // libraries put their bootstrap <script> inside the canvas too, and
+    // script text is not fallback anyone hears.
+    const fallback = [...element.childNodes]
+      .filter((node) => !/^(SCRIPT|STYLE|TEMPLATE)$/.test(node.nodeName))
+      .map((node) => node.textContent).join('').trim();
+    if (fallback) return { status: 'pass' };
+    // Icon-work inside a control the name already covers.
+    const control = element.closest('a[href], button, [role="button"], [role="link"]');
+    if (control && accessibleName(control)) return { status: 'pass' };
+    const rect = element.getBoundingClientRect();
+    if (rect.width < 32 || rect.height < 32) return { status: 'pass' };
+    return {
+      status: 'incomplete',
+      message: 'This canvas has no accessible name, no fallback content, and is not marked decorative — if it draws a chart or diagram, screen reader users get nothing at all.',
+      fix: 'If decorative, add aria-hidden="true". If meaningful, add role="img" with aria-label="…", or put a text alternative inside the <canvas> as fallback content.',
+    };
+  },
+};

package/engine/rules/wcag/1.1.1-embed-alt.js

@@ -0,0 +1,42 @@
+// WCAG SC 1.1.1 Non-text Content (Level A)
+// <embed> is the last uncovered plugin-content element: img, svg, area,
+// object and input[type=image] all have name rules, and a nameless <embed>
+// is the same provable gap — assistive technology can tell users nothing
+// about what the plugin renders.
+//
+// One honest asymmetry with object-alt: an embed that declares TEXT content
+// (type="text/…") embeds a document, not non-text content, so 1.1.1's
+// applicability is itself in question there. That case asks instead of
+// asserting — the user still deserves to know what the embedded document
+// is, but no criterion provably fails.
+export default {
+  id: 'embed-alt',
+  impact: 'serious',
+  tags: ['wcag2a', 'wcag111'],
+  help: '<embed> needs an accessible name',
+  helpUrl: 'https://www.w3.org/WAI/WCAG22/Understanding/non-text-content.html',
+  selector: 'embed',
+  evaluate(element, { accessibleName }) {
+    if (accessibleName(element)) return { status: 'pass' };
+    const type = (element.getAttribute('type') ?? '').trim().toLowerCase();
+    const src = (element.getAttribute('src') ?? '').split(/[?#]/)[0].toLowerCase();
+    // Document formats: text/*, PDF, XHTML — and typeless embeds whose src
+    // extension says document. All carry text, so 1.1.1's applicability is
+    // the question, and the question goes to a human.
+    const isDocument = type.startsWith('text/')
+      || type === 'application/pdf' || type === 'application/xhtml+xml'
+      || (!type && /\.(html?|xhtml|pdf|txt)$/.test(src));
+    if (isDocument) {
+      return {
+        status: 'incomplete',
+        message: 'This <embed> renders a text document but has no accessible name — assistive technology users get no indication of what the embedded document is. Check it is identified in the surrounding context.',
+        fix: 'Add title="…" naming the embedded document.',
+      };
+    }
+    return {
+      status: 'fail',
+      message: 'This <embed> has no accessible name — screen readers cannot tell users what the embedded content is.',
+      fix: 'Add title="…" (or aria-label) describing what the embed shows.',
+    };
+  },
+};

package/engine/rules/wcag/1.4.3-color-contrast.js

@@ -9,6 +9,12 @@ import {
   showRatio,
 } from '../../lib/contrast.js';
 
+/** The strict separator set for the pure-decoration exemption: pipes,
+ *  interpuncts, slashes, dashes and guillemets — one glyph, optionally
+ *  repeated ("···"). Deliberately excludes brackets, colons, stars and
+ *  every character that carries grouping, rating or code meaning. */
+const SEPARATOR_GLYPHS = /^([|¦·•∙‧/⁄\\‐‑‒–—―⁃«»‹›-])\1*$/;
+
 /** Serialise a judged colour for the report and the checker link. Composited
  *  channels keep up to two decimals: rounding them to integers changes the
  *  pair enough that the checker scores a different ratio than the audit
@@ -323,7 +329,49 @@ export function createContrastRule({ id, tags, help, helpUrl, thresholds }) {
     // The criterion exempts "inactive user interface components".
     if (element.closest(':disabled, [aria-disabled="true"]')) return { status: 'pass' };
 
-    const style = getComputedStyle(element);
+    // A shadow HOST's own text renders through its shadow tree: when a
+    // <slot> projects it, the text inherits styles from the slot's
+    // shadow-side parent, NOT from the host — a consent banner's shadow
+    // <p> painted the slotted copy near-white while the host computed
+    // black, and the host-styled pair was one no user ever sees. With no
+    // slot to project it, the host's own text does not render at all.
+    // (Closed shadow roots are undetectable; those hosts keep the old
+    // behaviour.)
+    let styleSource = element;
+    if (element.shadowRoot) {
+      const ownTextNode = [...element.childNodes]
+        .find((node) => node.nodeType === 3 && node.textContent.trim());
+      const slot = ownTextNode?.assignedSlot ?? null;
+      if (!slot) return { status: 'pass' }; // unprojected: not rendered
+      styleSource = slot;
+    }
+    const style = getComputedStyle(styleSource);
+
+    // A lone separator glyph between inline items is 1.4.3 "pure
+    // decoration": it does the job a border does (and borders carry no
+    // text-contrast requirement), and the ARIA Authoring Practices tell
+    // authors to draw exactly these separators in CSS or aria-hidden them.
+    // Strictly bounded — one repeated glyph from a fixed separator set,
+    // inline, outside code and interactive content, with rendered content
+    // on BOTH sides — so Python's `>>>` prompt, code operators, maths in
+    // prose and meaning-bearing brackets all keep their verdicts.
+    if (SEPARATOR_GLYPHS.test(ownText(element))
+      && style.display.startsWith('inline')
+      && !element.closest('code, pre, samp, kbd, var, a[href], button, [role="button"], [role="link"], [role="menuitem"], [role="tab"], [role="option"]')) {
+      const hasContent = (start, dir) => {
+        for (let node = start; node; node = node[dir]) {
+          if (node.nodeType === 3 && node.textContent.trim()) return true;
+          if (node.nodeType === 1 && (node.textContent.trim()
+            || node.matches('img, svg, video, canvas, input, select, button'))) return true;
+        }
+        return false;
+      };
+      if (hasContent(element.previousSibling, 'previousSibling')
+        && hasContent(element.nextSibling, 'nextSibling')) {
+        return { status: 'pass' };
+      }
+    }
+
     // Controls conveying "disabled" without the attribute: pointer-events:
     // none on an interactive element is functional inertness — the low
     // contrast IS the disabled styling (carousel arrows at the end of
@@ -434,7 +482,11 @@ export function createContrastRule({ id, tags, help, helpUrl, thresholds }) {
       }
     }
 
-    let background = effectiveBackground(element);
+    // For slotted host text, the walk starts at the slot: its flat-tree
+    // chain (slot → shadow parents → host → light ancestors) is the one the
+    // text actually paints in; effectiveBackground crosses the shadow
+    // boundary via getRootNode().host on its own.
+    let background = effectiveBackground(styleSource);
 
     // Browser-truth paint order at the text's own sample point: sees and
     // RESOLVES backdrops painted by non-ancestors (positioned siblings,
@@ -524,6 +576,18 @@ export function createContrastRule({ id, tags, help, helpUrl, thresholds }) {
     // over the pixels of every hero photo behind a cookie modal: these keep
     // the human call they have always had.
     if (veilPaint && (pseudoBack?.image || painted?.image)) return veiledIncomplete();
+    // A pseudo layer that sits BEYOND intermediate paint (an element between
+    // the text and the pseudo's host carries its own opaque background or
+    // image): whether the pseudo paints behind these glyphs or is covered by
+    // that nearer paint is a stacking-order question this engine deliberately
+    // does not model. Image paint can't be bracketed against the walked
+    // colour, so it stays a human call.
+    if (pseudoBack?.image && pseudoBack.beyondPaint) {
+      return {
+        status: 'incomplete',
+        message: 'An ancestor\'s pseudo-element paints an image or gradient where this text is, but other backgrounds sit between them — which one is behind the glyphs depends on paint order, so check the contrast by eye.',
+      };
+    }
     // Gradient/image paint from a pseudo-element: bracket it by sampling,
     // exactly as an element's own background-image is bracketed.
     if (pseudoBack?.image) {
@@ -580,7 +644,31 @@ export function createContrastRule({ id, tags, help, helpUrl, thresholds }) {
         }
       }
     }
-    if (pseudoBack?.color) {
+    if (pseudoBack?.color && pseudoBack.beyondPaint) {
+      // Paint sits between this text and the pseudo's host, so the pseudo
+      // may equally be covered by it (the common case: a decorative
+      // full-bleed wash on body under sections with their own backgrounds).
+      // Bracket instead of choosing: a verdict is only provable when the
+      // walked background and the pseudo-as-backdrop land the same side of
+      // the threshold; disagreement is a genuine human call.
+      const candidate = pseudoBack.color.a >= 1 || !background
+        ? pseudoBack.color
+        : composite(pseudoBack.color, background);
+      if (!background) {
+        return { status: 'incomplete', message: 'The background could not be determined — check contrast by eye.' };
+      }
+      const overWalked = foreground.a < 1 ? composite(foreground, background) : foreground;
+      const overPseudo = foreground.a < 1 ? composite(foreground, candidate) : foreground;
+      if ((contrastRatio(overWalked, background) >= required)
+        !== (contrastRatio(overPseudo, candidate) >= required)) {
+        return {
+          status: 'incomplete',
+          message: 'An ancestor\'s pseudo-element paints where this text is, but other backgrounds sit between them — which colour is behind the glyphs depends on paint order, and the two candidates disagree on the verdict. Check the contrast by eye.',
+        };
+      }
+      // Both candidates agree: judge against the walked background below.
+      // The backdrop stays UNVERIFIED — the hazard bracket still applies.
+    } else if (pseudoBack?.color) {
       // Opaque pill: it IS the backdrop. Translucent paint composites over
       // whatever the walk resolved beneath it. Either way the geometry is
       // computed, not guessed, so this counts as verified paint truth.
@@ -679,6 +767,19 @@ export function createContrastRule({ id, tags, help, helpUrl, thresholds }) {
     const rect = element.getBoundingClientRect();
     // Zero-area text paints nothing (collapsed badges, empty counters).
     if (!rect.width || !rect.height) return { status: 'pass' };
+    // Text parked wholly left of or above the document is unreachable by any
+    // scroll position (skip links pre-focus, sr-only labels at left:-10000px,
+    // panels slid out at negative offsets): it is not visually presented, so
+    // 1.4.3 has nothing to judge. Scrolling can only reach coordinates >= 0
+    // in LTR documents; RTL pages legitimately extend leftward, so they keep
+    // the old behavior.
+    {
+      const win = doc.defaultView;
+      if (win && getComputedStyle(doc.documentElement).direction !== 'rtl'
+        && (rect.right + win.scrollX <= 0 || rect.bottom + win.scrollY <= 0)) {
+        return { status: 'pass' };
+      }
+    }
     // A text-shadow can supply the contrast (technique G18 measures the
     // letters against their halo): white text with a solid dark outline
     // passes however the fill compares to the backdrop. A parseable solid

package/engine/rules/wcag/1.4.3-control-contrast.js

@@ -27,6 +27,19 @@ export default {
     const rect = element.getBoundingClientRect();
     if (rect.width <= 1 || rect.height <= 1) return { status: 'pass' };
     const style = getComputedStyle(element);
+    // Text rendered at font-size 0 (icon buttons whose value is a
+    // screen-reader label) is not visually presented — nothing to judge.
+    if (parseFloat(style.fontSize) === 0) return { status: 'pass' };
+    // Controls parked wholly left of or above the document are unreachable
+    // by scrolling (sr-only duplicates): same exemption as the main rule.
+    {
+      const doc = element.ownerDocument;
+      const win = doc.defaultView;
+      if (win && getComputedStyle(doc.documentElement).direction !== 'rtl'
+        && (rect.right + win.scrollX <= 0 || rect.bottom + win.scrollY <= 0)) {
+        return { status: 'pass' };
+      }
+    }
     // Judge the opacity the text RESTS at, matching the main contrast rule:
     // a control faded out by an ancestor (fade-in-on-scroll, a collapsed
     // panel) presents no text at all, and one held at a low opacity presents

package/engine/rules/wcag/2.2.2-video-loop-motion.js

@@ -0,0 +1,40 @@
+// WCAG SC 2.2.2 Pause, Stop, Hide (Level A)
+// The muted background hero video. audio-control (1.4.2) rightly passes it:
+// that criterion is about SOUND, and a muted element makes none. But
+// autoplay + loop is moving content that starts automatically and never
+// ends, which settles clauses 1 and 2 of 2.2.2 from the markup alone —
+// exactly as an infinite CSS animation does. Clause 3's pause mechanism may
+// be any control anywhere on the page (a hero often has one), so the
+// finding goes to a human with the evidence attached, never asserted: the
+// same verdict discipline as pause-stop-hide's ticker branch.
+//
+// A <video controls> ships its own pause button and is out of the selector.
+// Icon-scale playback (tiny inline previews) is left alone for the same
+// reason pause-stop-hide skips spinners: flagging every small moving
+// thumbnail would bury the full-bleed hero that matters. Silence there is
+// abstaining, not clearing.
+export default {
+  id: 'video-loop-motion',
+  impact: 'serious',
+  tags: ['wcag2a', 'wcag222'],
+  help: 'Looping autoplay video must be pausable',
+  helpUrl: 'https://www.w3.org/WAI/WCAG22/Understanding/pause-stop-hide.html',
+  selector: 'video[autoplay][loop]:not([controls])',
+  // Movement is a visual matter: an aria-hidden hero still moves on screen.
+  visibility: 'visual',
+  evaluate(element) {
+    // Icon scale means SMALL, not thin: a 1200×60 animated banner strip is
+    // a ticker, and only a video small on both axes is spinner-class.
+    const rect = element.getBoundingClientRect();
+    if (rect.width < 64 && rect.height < 64) return { status: 'pass' };
+    // Loaded but not playing: either the browser refused the autoplay or
+    // something on the page already paused it — in both cases nothing is
+    // moving, and a paused-by-a-control video is the mechanism working.
+    if (element.paused && element.readyState >= 2) return { status: 'pass' };
+    return {
+      status: 'incomplete',
+      message: 'This video auto-plays on a loop with no built-in controls: it starts by itself and never ends, so it runs well past the five seconds at which WCAG 2.2.2 requires a way to pause, stop or hide it. Check the page offers a pause control that reaches this video, or that the video is the only content presented.',
+      fix: 'Add controls, wire a visible pause button to it, or drop autoplay — and honour prefers-reduced-motion.',
+    };
+  },
+};

package/engine/rules/wcag/2.4.3-visual-order-divergence.js

@@ -0,0 +1,92 @@
+// WCAG SC 2.4.3 Focus Order (Level A) — the CSS-reordering slice
+// Whether a focus order "preserves meaning and operability" is a human
+// judgment over the whole page, and stays in the manual checklist. But one
+// documented failure shape is pure geometry: focusable siblings laid out by
+// flex/grid where CSS `order` or a reversed flow direction makes the VISUAL
+// order diverge from the DOM order that Tab actually follows. F44's
+// substance — sequences that jump against the layout — with the evidence
+// measurable.
+//
+// Deliberately narrow so it cannot fire on ordinary pages:
+//   - only siblings in the SAME flex/grid container are compared, so
+//     legitimate responsive reflow between separate regions never trips it;
+//   - only when the container/children actually use `order` or `*-reverse`
+//     — plain wrapping, floats and absolute positioning are not evidence;
+//   - the verdict is review, not violation: a reversed row of equivalent
+//     chips may preserve meaning perfectly well; that call is the human's.
+//
+// The narrowness has a known cost, accepted deliberately: focusables
+// wrapped one level deep (cards — flex container > div > a) never meet the
+// container as direct siblings and are not examined, and grid's native
+// reordering (explicit grid-row/column placement, grid-template-areas,
+// grid-auto-flow: dense) reorders without `order` or `*-reverse` and is not
+// treated as evidence. Both are honest gaps to widen later with measured
+// cases, not silently.
+const FLEXGRID = /^(inline-)?(flex|grid)$/;
+
+/** DOM-order focusable children grouped per flex/grid parent. */
+function tabbable(element) {
+  if (element.disabled || element.tabIndex < 0) return false;
+  return true;
+}
+
+/** Visual reading order of sibling rects: group into rows by vertical
+ *  overlap, rows top-to-bottom, within a row along the inline direction. */
+function visualSequence(entries, rightToLeft) {
+  const rows = [];
+  for (const entry of [...entries].sort((a, b) => a.rect.top - b.rect.top)) {
+    const row = rows.find((candidates) => {
+      const first = candidates[0].rect;
+      const overlap = Math.min(first.bottom, entry.rect.bottom) - Math.max(first.top, entry.rect.top);
+      return overlap > Math.min(first.height, entry.rect.height) / 2;
+    });
+    if (row) row.push(entry); else rows.push([entry]);
+  }
+  return rows.flatMap((row) => row.sort((a, b) =>
+    rightToLeft ? b.rect.right - a.rect.right : a.rect.left - b.rect.left));
+}
+
+export default {
+  id: 'visual-order-divergence',
+  impact: 'moderate',
+  tags: ['wcag2a', 'wcag243'],
+  help: 'CSS reordering should not make Tab jump against the visual order',
+  helpUrl: 'https://www.w3.org/WAI/WCAG22/Understanding/focus-order.html',
+  selector: 'a[href], button, input:not([type="hidden"]), select, textarea, summary, [tabindex]',
+  evaluateAll(elements) {
+    const outcomes = new Map();
+    const groups = new Map();
+    for (const element of elements) {
+      if (!tabbable(element)) continue;
+      const parent = element.parentElement;
+      if (!parent) continue;
+      if (!groups.has(parent)) groups.set(parent, []);
+      groups.get(parent).push(element);
+    }
+    for (const [parent, children] of groups) {
+      if (children.length < 2) continue;
+      const parentStyle = getComputedStyle(parent);
+      if (!FLEXGRID.test(parentStyle.display)) continue;
+      const reversed = /-reverse$/.test(parentStyle.flexDirection);
+      const entries = children
+        .map((element) => ({ element, style: getComputedStyle(element) }))
+        // Out-of-flow children have no place in the container's sequence.
+        .filter(({ style }) => style.position !== 'absolute' && style.position !== 'fixed')
+        .map((entry) => ({ ...entry, rect: entry.element.getBoundingClientRect() }))
+        .filter(({ rect }) => rect.width > 0 && rect.height > 0);
+      if (entries.length < 2) continue;
+      const usesOrder = entries.some(({ style }) => style.order !== '0');
+      if (!reversed && !usesOrder) continue;
+      const visual = visualSequence(entries, parentStyle.direction === 'rtl');
+      const diverges = visual.some((entry, i) => entry !== entries[i]);
+      if (!diverges) continue;
+      const cause = reversed ? `flex-direction: ${parentStyle.flexDirection}` : 'CSS order';
+      outcomes.set(entries[0].element, {
+        status: 'incomplete',
+        message: `Keyboard focus moves through these ${entries.length} controls in DOM order, but ${cause} arranges them differently on screen — Tab will jump against the visual layout. Check the focus sequence still preserves meaning and operability.`,
+        fix: 'Reorder the source to match the visual order instead of reordering with CSS, or confirm the divergence is harmless here.',
+      });
+    }
+    return elements.map((element) => outcomes.get(element) ?? { status: 'pass' });
+  },
+};