pour-engine 1.46.1 → 1.46.3

package/config/project.config.js

@@ -6,6 +6,6 @@
 export default {
   engine: {
     name: 'pour engine',
-    version: '1.46.1',
+    version: '1.46.3',
   },
 };

package/engine/lib/contrast.js

@@ -1,4 +1,5 @@
 // WCAG contrast math (WCAG 2.x, relative luminance per sRGB).
+import { childrenOf, containsNode } from './dom.js';
 
 // Computed colours do not all come back as `rgb()` any more. A colour the
 // author wrote in a modern syntax is returned in THAT syntax: Chrome and
@@ -135,6 +136,9 @@ export function composite(top, bottom) {
 let backgroundCache = new WeakMap();
 let opacityCache = new WeakMap();
 let opacityAnimatorsCache = null;
+// Nodes read at full opacity while a verdict is re-checked as it would be
+// once a scroll reveal has run (see pendingReveal, withRevealed).
+const revealedNodes = new WeakSet();
 let mediaRectsCache = null;
 let panelRectsCache = null;
 let pseudoCache = new WeakMap();
@@ -476,6 +480,7 @@ export function restingOpacity(element) {
   const animators = opacityAnimators(element.ownerDocument);
   let product = 1;
   for (let node = element; node && node.nodeType === 1; node = node.parentElement ?? node.getRootNode()?.host) {
+    if (revealedNodes.has(node)) continue;
     if (animators.has(node)) {
       const rest = animators.get(node);
       product *= rest === null ? 1 : rest;
@@ -486,6 +491,53 @@ export function restingOpacity(element) {
   return product;
 }
 
+/** The nodes holding this text dim until it scrolls into view: an element
+ *  or flat-tree ancestor below full opacity that declares a transition on
+ *  opacity, around text that starts outside the viewport. That is how a
+ *  scroll reveal is built (an observer flips a class as the element enters
+ *  and the transition fades it in), so the dim state is the one nobody who
+ *  scrolls to the text sees. The page cannot say where the transition will
+ *  land, so a verdict that depends on it is a question for a person. Empty
+ *  when the text starts in view or nothing up the chain is fading.
+ *
+ *  Also empty when a fading node has a sibling of its own kind that is out
+ *  of view too and already at full opacity. Nothing has scrolled to that
+ *  sibling, so its opacity is not a reveal's work: the dim state is one of
+ *  the page's own states, as in a list that keeps every card but the active
+ *  one dim, and it is seen on screen wherever the reader scrolls (a
+ *  benchmark page, 2026-11-09: the inactive cards stayed at 46% in view). */
+export function pendingReveal(element) {
+  const view = element.ownerDocument.defaultView;
+  const outOfView = (rect) => !(rect.bottom > 0 && rect.top < view.innerHeight);
+  if (!view || !outOfView(element.getBoundingClientRect())) return [];
+  const nodes = [];
+  for (let node = element; node && node.nodeType === 1; node = node.parentElement ?? node.getRootNode()?.host) {
+    const style = getComputedStyle(node);
+    if (!((parseFloat(style.opacity) || 0) < 1)) continue;
+    const properties = style.transitionProperty.split(',').map((p) => p.trim());
+    const durations = style.transitionDuration.split(',').map((d) => parseFloat(d) || 0);
+    // The duration list repeats to the length of the property list.
+    if (!properties.some((p, i) => (p === 'opacity' || p === 'all') && durations[i % durations.length] > 0)) continue;
+    const parent = node.parentElement;
+    const settled = parent && [...childrenOf(parent)].some((other) => other !== node && other.tagName === node.tagName
+      && (parseFloat(getComputedStyle(other).opacity) || 0) >= 1 && outOfView(other.getBoundingClientRect()));
+    if (settled) return [];
+    nodes.push(node);
+  }
+  return nodes;
+}
+
+/** Runs judge() with these nodes read at full opacity, the state a scroll
+ *  reveal brings them to, and restores the reading after. */
+export async function withRevealed(nodes, judge) {
+  for (const node of nodes) revealedNodes.add(node);
+  opacityCache = new WeakMap();
+  try { return await judge(); } finally {
+    for (const node of nodes) revealedNodes.delete(node);
+    opacityCache = new WeakMap();
+  }
+}
+
 /** Product of the element's and its flat-tree ancestors' opacity, memoized
  *  per audit. Near-zero means the element isn't visually presented at all. */
 export function cumulativeOpacity(element) {
@@ -493,7 +545,7 @@ export function cumulativeOpacity(element) {
   let cached = opacityCache.get(element);
   if (cached === undefined) {
     const parent = element.parentElement ?? element.getRootNode()?.host ?? null;
-    cached = (parseFloat(getComputedStyle(element).opacity) || 0) * cumulativeOpacity(parent);
+    cached = (revealedNodes.has(element) ? 1 : (parseFloat(getComputedStyle(element).opacity) || 0)) * cumulativeOpacity(parent);
     opacityCache.set(element, cached);
   }
   return cached;
@@ -502,6 +554,7 @@ export function cumulativeOpacity(element) {
 /** One node's own opacity at rest: the landing value of a running
  *  animation on it, otherwise its computed opacity. */
 function nodeRestingOpacity(node) {
+  if (revealedNodes.has(node)) return 1;
   const animators = opacityAnimators(node.ownerDocument);
   if (animators.has(node)) {
     const rest = animators.get(node);
@@ -610,7 +663,7 @@ export function backgroundObscured(element) {
   if (start === -1) return 'unverifiable';
 
   for (const layer of stack.slice(start + 1)) {
-    if (layer.contains(element)) {
+    if (containsNode(layer, element)) {
       const style = getComputedStyle(layer);
       if (style.backgroundImage !== 'none') return layer;
       const bg = parseColor(style.backgroundColor);
@@ -1001,7 +1054,7 @@ function scrimIn(layersAbove, element, win) {
   const rect = element.getBoundingClientRect();
   const found = [];
   for (const layer of layersAbove) {
-    if (layer.contains(element) || element.contains(layer)) continue;
+    if (containsNode(layer, element) || containsNode(element, layer)) continue;
     const style = getComputedStyle(layer);
     const color = parseColor(style.backgroundColor);
     const alpha = (color ? color.a : 0) * opacityOf(style);
@@ -1100,7 +1153,7 @@ export function paintedBackdrop(element) {
   }
   const layers = [];
   for (const layer of stack.slice(start + 1)) {
-    while (missing.length && !missing[0].contains(layer)) layers.push(missing.shift());
+    while (missing.length && !containsNode(missing[0], layer)) layers.push(missing.shift());
     layers.push(layer);
   }
   layers.push(...missing);
@@ -1466,7 +1519,7 @@ export function beneathOpaqueAncestor(element, media) {
   if (inTopLayer(element) || inTopLayer(media)) return false;
   const box = element.getBoundingClientRect();
   for (let ancestor = element; ancestor; ancestor = ancestor.parentElement) {
-    if (ancestor.contains(media)) return false; // from here up the media is inside
+    if (containsNode(ancestor, media)) return false; // from here up the media is inside
     if (!createsStackingContext(ancestor)) continue;
     const style = getComputedStyle(ancestor);
     const color = parseColor(style.backgroundColor);
@@ -1479,7 +1532,7 @@ export function beneathOpaqueAncestor(element, media) {
     if (!insideRoundedBox(box, ancestor.getBoundingClientRect(), style)) continue;
     // The lowest stacking context holding both.
     let shared = ancestor.parentElement;
-    while (shared && !(createsStackingContext(shared) && shared.contains(media))) shared = shared.parentElement;
+    while (shared && !(createsStackingContext(shared) && containsNode(shared, media))) shared = shared.parentElement;
     if (!shared) return false;
     const over = paintRank(ancestor, shared);
     const under = paintRank(media, shared);
@@ -1489,7 +1542,7 @@ export function beneathOpaqueAncestor(element, media) {
     if (under.z !== over.z) return under.z < over.z;
     // Same layer and z-index: tree order, earlier paints first.
     return Boolean(under.node.compareDocumentPosition(over.node) & 4 /* FOLLOWING */)
-      && !under.node.contains(over.node);
+      && !containsNode(under.node, over.node);
   }
   return false;
 }

package/engine/lib/dom.js

@@ -149,12 +149,12 @@ function siblingPosition(element, index) {
   if (!positions) {
     const counts = new Map();
     positions = new WeakMap();
-    for (const child of parent.children) {
+    for (const child of childrenOf(parent)) {
       const position = (counts.get(child.tagName) ?? 0) + 1;
       counts.set(child.tagName, position);
       positions.set(child, { position, repeated: false });
     }
-    for (const child of parent.children) positions.get(child).repeated = counts.get(child.tagName) > 1;
+    for (const child of childrenOf(parent)) positions.get(child).repeated = counts.get(child.tagName) > 1;
     index.parents.set(parent, positions);
   }
   return positions.get(element);
@@ -215,6 +215,21 @@ export function attributesOf(element) {
   return attributesGetter ? attributesGetter.call(element) : [];
 }
 
+/** An element's child elements and a node's contains(), read through the
+ *  prototype for the same reason: a booking form's field named "children"
+ *  (jetblue.com) or a word search's field named "contains" (buchstaben.com)
+ *  takes the place of the form's own property, and the audit threw. A
+ *  select in that place is iterable, so its options cannot be told from
+ *  the children by shape; the prototype is always asked. */
+const childrenGetter = typeof Element !== 'undefined' ? Object.getOwnPropertyDescriptor(Element.prototype, 'children')?.get : null;
+export function childrenOf(element) {
+  return childrenGetter ? childrenGetter.call(element) : element.children;
+}
+const nodeContains = typeof Node !== 'undefined' ? Node.prototype.contains : null;
+export function containsNode(ancestor, node) {
+  return nodeContains ? nodeContains.call(ancestor, node) : ancestor.contains(node);
+}
+
 /** Element's opening markup (attributes) plus a snippet of its own text —
  *  enough to recognise it in a table. Built WITHOUT element.outerHTML, which
  *  serializes the whole subtree and turns audits quadratic on huge pages

package/engine/rules/best-practice/fieldset-legend.js

@@ -1,6 +1,7 @@
 // WAI forms tutorial: radio/checkbox groups need a group label — each
 // input's own label isn't enough to convey what the group asks.
 import { accessibleName, labelledByName } from '../../lib/accessible-name.js';
+import { containsNode } from '../../lib/dom.js';
 export default {
   id: 'fieldset-legend',
   name: 'Grouped field labels',
@@ -41,7 +42,7 @@ export default {
       // it empty (2026-08-25 overnight audit).
       const group = first.closest('fieldset, [role="group"], [role="radiogroup"]');
       const legend = group?.querySelector(':scope > legend');
-      const grouped = group && indexes.every((index) => group.contains(elements[index])) && (
+      const grouped = group && indexes.every((index) => containsNode(group, elements[index])) && (
         (legend && accessibleName(legend))
         || labelledByName(group)
         || group.getAttribute('aria-label')?.trim()

package/engine/rules/wcag/1.3.1-aria-required-children.js

@@ -2,6 +2,7 @@
 // Composite roles are meaningless without their required child roles —
 // role="list" with no listitems announces as an empty list.
 import { effectiveRole } from '../../lib/roles.js';
+import { childrenOf } from '../../lib/dom.js';
 // Every row of ARIA 1.2's Required Owned Elements table; verify:aria-tables
 // diffs this map against the spec (2026-09-01, after feed and row were
 // found missing).
@@ -112,7 +113,7 @@ export default {
     const role = effectiveRole(element);
     const required = REQUIRED_CHILDREN[role];
     if (!required) return { status: 'pass' };
-    const children = [...element.children, ...(element.shadowRoot?.children ?? [])]
+    const children = [...childrenOf(element), ...(element.shadowRoot?.children ?? [])]
       .filter((c) => !c.matches('script, style, template'));
     // A completely empty container is a lazy-load placeholder more often
     // than a defect — it announces as an empty list, which is accurate.

package/engine/rules/wcag/1.4.1-link-in-text-block.js

@@ -1,5 +1,6 @@
 // WCAG SC 1.4.1 Use of Color (Level A)
 import { parseColor, contrastRatio, composite, effectiveBackground, backgroundImageSource, asRgb } from '../../lib/contrast.js';
+import { containsNode } from '../../lib/dom.js';
 
 // Split a computed list value ("a, b(c, d), e") on the commas OUTSIDE
 // parentheses: gradients and colour functions carry commas of their own.
@@ -326,7 +327,7 @@ export default {
       const range = element.ownerDocument.createRange();
       let sharesLine = false;
       for (let node = walker.nextNode(); node && !sharesLine; node = walker.nextNode()) {
-        if (!node.textContent.trim() || element.contains(node)) continue;
+        if (!node.textContent.trim() || containsNode(element, node)) continue;
         range.selectNodeContents(node);
         for (const r of range.getClientRects()) {
           if (r.width > 0 && mids.some((mid) => r.top <= mid && r.bottom >= mid)) { sharesLine = true; break; }

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

@@ -6,7 +6,8 @@ import {
   opacityAnimating, restingOpacity, mediaRects, inZeroClipSubtree,
   paintedBackdrop, opaquePanelRects, viewportVeil, textShadowHalo, textShadowNegligible,
   pseudoBackdropForText, filmedContrastBounds, backgroundColorSource, scrimPaint, applyOverlays,
-  showRatio, asRgb, splitBackgroundLayers, backgroundLayerUrl, sampleGridFor, opacityGroupPaint, pseudoTextColors, BOLD_WEIGHT, hasPaintEffects, isolatedBlendBackdrop, labelReferrers, beneathOpaqueAncestor, lazyWithheldBackground } from '../../lib/contrast.js';
+  showRatio, asRgb, splitBackgroundLayers, backgroundLayerUrl, sampleGridFor, opacityGroupPaint, pseudoTextColors, BOLD_WEIGHT, hasPaintEffects, isolatedBlendBackdrop, labelReferrers, beneathOpaqueAncestor, lazyWithheldBackground, pendingReveal, withRevealed } from '../../lib/contrast.js';
+import { childrenOf, containsNode } from '../../lib/dom.js';
 
 /** The first url() among a background-image list's layers, or null. */
 const firstLayerUrl = (css) => splitBackgroundLayers(css ?? '').map(backgroundLayerUrl).find(Boolean) ?? null;
@@ -215,7 +216,7 @@ function coveredByTextTwin(element) {
   const index = stack.indexOf(element);
   if (index <= 0) return false;
   return stack.slice(0, index).some((layer) =>
-    !layer.contains(element) && !element.contains(layer) && layer.textContent.trim() === text);
+    !containsNode(layer, element) && !containsNode(element, layer) && layer.textContent.trim() === text);
 }
 
 /** Do any of the element's own text boxes MEANINGFULLY overlap the given
@@ -361,7 +362,7 @@ function unaccountedScrim(element, imageCarrier) {
   const start = stack.indexOf(element);
   if (start === -1) return false;
   return stack.slice(start + 1).some((layer) => {
-    if (layer.contains(element) || layer === imageCarrier) return false; // ancestor chain: already composited
+    if (containsNode(layer, element) || layer === imageCarrier) return false; // ancestor chain: already composited
     const color = parseColor(getComputedStyle(layer).backgroundColor);
     return color && color.a > 0;
   });
@@ -396,7 +397,7 @@ function coveringLayer(element, imageCarrier) {
   const overlays = [];
   for (const layer of stack.slice(start + 1)) {
     if (layer === imageCarrier) return null;
-    if (layer.contains(element)) {
+    if (containsNode(layer, element)) {
       const own = parseColor(getComputedStyle(layer).backgroundColor);
       if (own && own.a > 0 && own.a < 1) overlays.push(own);
       continue;
@@ -424,7 +425,7 @@ function positionedPaintInside(carrier, element) {
   const point = textSamplePoint(element);
   if (!point) return false;
   for (const node of carrier.querySelectorAll('*')) {
-    if (node.contains(element) || element.contains(node)) continue;
+    if (containsNode(node, element) || containsNode(element, node)) continue;
     const style = getComputedStyle(node);
     if (style.position !== 'absolute' && style.position !== 'fixed') continue;
     const paints = (style.backgroundImage !== 'none' && !paintsNothing(style.backgroundImage))
@@ -744,7 +745,7 @@ export function createContrastRule({ id, name, tags, help, helpUrl, thresholds }
     // Level 1: B(Cb, Cs) = Cb * Cs. Keep groups, filters and generated paint
     // outside this narrow path; its backdrop is resolved below as usual.
     const ownMultiply = style.mixBlendMode === 'multiply'
-      && styleSource === element && !element.children.length && !element.shadowRoot
+      && styleSource === element && !childrenOf(element).length && !element.shadowRoot
       && parseColor(style.backgroundColor)?.a === 0 && style.backgroundImage === 'none'
       && style.filter === 'none' && (!style.backdropFilter || style.backdropFilter === 'none')
       && (!style.textShadow || style.textShadow === 'none')
@@ -871,7 +872,7 @@ export function createContrastRule({ id, name, tags, help, helpUrl, thresholds }
         const near = (r) => Math.min(groupRect.right, r.right) - Math.max(groupRect.left, r.left) >= 3
           && Math.min(groupRect.bottom, r.bottom) - Math.max(groupRect.top, r.top) >= 3;
         const overMedia = mediaRects(doc).some(({ element: media, rect: mediaRect }) =>
-          near(mediaRect) && !media.contains(element) && !element.contains(media) && textIntersects(element, mediaRect));
+          near(mediaRect) && !containsNode(media, element) && !containsNode(element, media) && textIntersects(element, mediaRect));
         if (overMedia) {
           return {
             status: 'incomplete',
@@ -879,7 +880,7 @@ export function createContrastRule({ id, name, tags, help, helpUrl, thresholds }
           };
         }
         const flipping = opaquePanelRects(doc).some(({ element: panel, rect, color }) =>
-          near(rect) && !panel.contains(element) && !element.contains(panel) && textIntersects(element, rect)
+          near(rect) && !containsNode(panel, element) && !containsNode(element, panel) && textIntersects(element, rect)
           && (contrastRatio(composite(group.text, color), composite(group.paint, color)) >= required) !== (groupRatio >= required));
         if (flipping) {
           return {
@@ -898,7 +899,7 @@ export function createContrastRule({ id, name, tags, help, helpUrl, thresholds }
         let groupScrim = groupPainted?.scrim ?? null;
         if (!groupScrim && groupPainted === 'offscreen') {
           const veil = viewportVeil(doc);
-          if (veil && !veil.contains(element)) groupScrim = [veil];
+          if (veil && !containsNode(veil, element)) groupScrim = [veil];
         }
         if (groupScrim) {
           const groupVeil = scrimPaint(groupScrim);
@@ -1034,7 +1035,7 @@ export function createContrastRule({ id, name, tags, help, helpUrl, thresholds }
     // in-viewport, hence never routed through this branch.)
     if (!scrimLayers && painted === 'offscreen') {
       const veil = viewportVeil(doc);
-      if (veil && !veil.contains(element)) scrimLayers = [veil];
+      if (veil && !containsNode(veil, element)) scrimLayers = [veil];
     }
     if (scrimLayers) {
       veilPaint = scrimPaint(scrimLayers);
@@ -1264,7 +1265,7 @@ export function createContrastRule({ id, name, tags, help, helpUrl, thresholds }
       // to a person: can paint order prove an opaque ancestor lies over it?
       const overMedia = mediaRects(doc).some(({ element: media, rect: mediaRect, hitTestBlind }) =>
         (!blindOnly || hitTestBlind) && near(mediaRect)
-        && !media.contains(element) && !element.contains(media)
+        && !containsNode(media, element) && !containsNode(element, media)
         && textIntersects(element, mediaRect)
         && !beneathOpaqueAncestor(element, media));
       if (overMedia) {
@@ -1275,7 +1276,7 @@ export function createContrastRule({ id, name, tags, help, helpUrl, thresholds }
       }
       const flipping = opaquePanelRects(doc).some(({ element: panel, rect, color, hitTestBlind }) =>
         (!blindOnly || hitTestBlind) && near(rect)
-        && !panel.contains(element) && !element.contains(panel)
+        && !containsNode(panel, element) && !containsNode(element, panel)
         && textIntersects(element, rect)
         && (ownMultiply || (contrastRatio(foreground, color) >= required) !== (direction === 'pass')));
       if (flipping) {
@@ -1308,7 +1309,7 @@ export function createContrastRule({ id, name, tags, help, helpUrl, thresholds }
           const inside = block.querySelectorAll('*');
           if (inside.length <= 2000) {
             for (const sibling of inside) {
-              if (sibling === element || sibling.contains(element) || element.contains(sibling)) continue;
+              if (sibling === element || containsNode(sibling, element) || containsNode(element, sibling)) continue;
               const siblingStyle = getComputedStyle(sibling);
               if (siblingStyle.position !== 'static' || siblingStyle.visibility === 'hidden') continue;
               const paint = parseColor(siblingStyle.backgroundColor);
@@ -1518,6 +1519,21 @@ export function createContrastRule({ id, name, tags, help, helpUrl, thresholds }
         message: 'This text sits in a section whose background image is lazy-loaded and has not loaded yet, so it was measured against a background visitors never see. Scroll the page to this text and run the audit again, or check it by eye.',
       };
     }
+    // Text held faint until it scrolls into view (see pendingReveal): when it
+    // meets the minimum at the opacity the reveal fades it to, the failure
+    // is a state no visitor who scrolls there sees, so it goes to a person.
+    // Text that still fails at full opacity keeps its failure.
+    const fading = pendingReveal(element);
+    if (fading.length) {
+      const revealed = await withRevealed(fading, () => judge(element, helpers));
+      if (revealed.status !== 'fail') {
+        const dim = Math.round(fading.reduce((product, node) => product * (parseFloat(getComputedStyle(node).opacity) || 0), 1) * 100);
+        return {
+          status: 'incomplete',
+          message: `This text starts out of view at ${dim}% opacity under an element that transitions its opacity, the way a scroll reveal fades content in. At full opacity it meets the minimum. Scroll to it and check that it ends at full opacity.`,
+        };
+      }
+    }
     // A miss on a glyph that is not words: see glyphNotWords. Every fail
     // path passes through here, so this is said once. A glyph still owes
     // 3:1 under 1.4.11 when it is needed to identify a control, so one that

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

@@ -21,6 +21,8 @@
 // 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.
+import { containsNode } from '../../lib/dom.js';
+
 /** A visible, enabled button whose aria-controls names the video or an
  *  ancestor of it, looked up in the video's own document or shadow tree. */
 function pauseControlFor(video, isVisible) {
@@ -31,7 +33,7 @@ function pauseControlFor(video, isVisible) {
     if (control.disabled || !isVisible(control)) continue;
     for (const id of control.getAttribute('aria-controls').split(/\s+/)) {
       const target = id && byId(id);
-      if (target && (target === video || target.contains(video))) return control;
+      if (target && (target === video || containsNode(target, video))) return control;
     }
   }
   return null;

package/engine/rules/wcag/2.4.10-section-heading.js

@@ -20,6 +20,8 @@
 // aria-labelledby or aria-label has a title by another route and is left
 // alone. Sections with little text, or none, are the UI-component case the
 // criterion excludes.
+import { childrenOf } from '../../lib/dom.js';
+
 const HEADING = 'h1, h2, h3, h4, h5, h6, [role="heading"]';
 const SUBSTANTIVE = 'img, svg, video, audio, canvas, iframe, input, select, textarea, button';
 const SKIP = 'script, style, template, noscript';
@@ -70,7 +72,7 @@ export default {
     // corpus page and helped nobody.
     const item = element.closest('article');
     if (item && item.parentElement && !item.querySelector(HEADING)) {
-      const items = (node) => [...node.children].filter((child) => child.matches('article') || child.querySelector(':scope > article')).length;
+      const items = (node) => [...childrenOf(node)].filter((child) => child.matches('article') || child.querySelector(':scope > article')).length;
       const container = item.parentElement;
       if (items(container) >= 3 || (container.parentElement && items(container.parentElement) >= 3)) return { status: 'pass' };
     }

package/engine/rules/wcag/2.4.11-focus-not-obscured.js

@@ -17,7 +17,7 @@
 //
 // Sites that apply the spec's own sufficient technique — scroll-padding for
 // the overlay's edge — are not flagged at all.
-import { isInert } from '../../lib/dom.js';
+import { isInert, containsNode } from '../../lib/dom.js';
 
 const FOCUSABLE = 'a[href], button, input:not([type="hidden"]), select, textarea, summary, [tabindex]:not([tabindex="-1"])';
 
@@ -105,7 +105,7 @@ export function createFocusObscuredRule({ id, name, tags, help, helpUrl, partial
         if (index <= 0) return null;
         const above = stack.slice(0, index);
         return above.find((layer) =>
-          !layer.contains(element) && !element.contains(layer)
+          !containsNode(layer, element) && !containsNode(element, layer)
           && isObscuringOverlay(layer)
           && (partial ? overlaps : contained)(rect, layer.getBoundingClientRect())) ?? null;
       };

package/engine/rules/wcag/2.5.8-target-size.js

@@ -29,12 +29,12 @@ const TARGETS = 'a[href], button, input, select, [role="button"], [role="link"]'
  * These are keyboard affordances, not pointer targets — and their phantom
  * rects must not count as "crowding" for the real targets around them.
  */
-import { isInert } from '../../lib/dom.js';
+import { isInert, containsNode } from '../../lib/dom.js';
 
 // A web component's internal link and its enclosing light-DOM link are
 // not independent pointer targets. DOM contains() stops at shadow roots.
 function containsComposed(ancestor, element) {
-  if (ancestor.contains(element)) return true;
+  if (containsNode(ancestor, element)) return true;
   if (ancestor.getRootNode() === element.getRootNode() && !element.assignedSlot) return false;
   for (let node = element; node; node = node.assignedSlot ?? node.parentElement ?? node.getRootNode()?.host) {
     if (node === ancestor) return true;
@@ -43,15 +43,31 @@ function containsComposed(ancestor, element) {
 }
 
 function outsideHiddenOverflow(element, rect) {
-  for (let parent = element.parentElement; parent; parent = parent.parentElement) {
+  // Where the target can be brought to. A scrollable ancestor lets the
+  // reader scroll it anywhere along that ancestor's own box, so past one the
+  // target's reach on that axis is the scroller's box: a list scrolled out of
+  // a panel that hides its overflow (a long table of contents, a row of tags
+  // scrolling sideways) is still in reach and still judged.
+  // The walk stops below the body: the root's and the body's overflow is the
+  // viewport's, and a page that hides it is locking its scroll behind a
+  // dialog for now (a benchmark page, 2026-11-09, under its consent banner),
+  // not parking everything below the fold out of reach; whether the
+  // document reaches a target is isHiddenFromPointer's question.
+  const { body, documentElement } = element.ownerDocument;
+  let { left, right, top, bottom } = rect;
+  for (let parent = element.parentElement; parent && parent !== body && parent !== documentElement; parent = parent.parentElement) {
     const style = getComputedStyle(parent);
     if (style.display === 'contents') continue; // no principal box to clip its children
     const x = /^(hidden|clip)$/.test(style.overflowX);
     const y = /^(hidden|clip)$/.test(style.overflowY);
-    if (!x && !y) continue;
+    const scrollsX = /^(auto|scroll)$/.test(style.overflowX);
+    const scrollsY = /^(auto|scroll)$/.test(style.overflowY);
+    if (!x && !y && !scrollsX && !scrollsY) continue;
     const clip = parent.getBoundingClientRect();
-    if ((x && (clip.width === 0 || rect.right <= clip.left || rect.left >= clip.right))
-      || (y && (clip.height === 0 || rect.bottom <= clip.top || rect.top >= clip.bottom))) return true;
+    if ((x && (clip.width === 0 || right <= clip.left || left >= clip.right))
+      || (y && (clip.height === 0 || bottom <= clip.top || top >= clip.bottom))) return true;
+    if (scrollsX) { left = clip.left; right = clip.right; }
+    if (scrollsY) { top = clip.top; bottom = clip.bottom; }
   }
   return false;
 }
@@ -145,7 +161,7 @@ function reachableRects(element, rect) {
     // Anything above it that is part of the same control is not an
     // obstruction: a button's own icon paints over the button, an overlay
     // label over its input. Only a genuinely separate element blocks it.
-    if (stack.slice(0, index).every((layer) => layer.contains(element) || element.contains(layer))) {
+    if (stack.slice(0, index).every((layer) => containsNode(layer, element) || containsNode(element, layer))) {
       reachable.push(fragment);
     }
   }
@@ -358,13 +374,17 @@ export function createTargetSizeRule({ id, tags, help, helpUrl, min, spacingExce
     // Inert targets accept no pointer action at all, so they are neither
     // judged nor counted as crowders (bbc.com/news keeps 28 controls of a
     // closed menu in an inert subtree; the browser ignores every click on
-    // them, and so must the size judgment).
+    // them, and so must the size judgment). Nor are targets wholly outside
+    // an ancestor that hides its overflow: the slides a carousel has moved
+    // out of its window are painted nowhere and take no click until it
+    // moves them back (the benchmark's Mars demo, 2026-11-06, where links
+    // on the off-screen slides were failed as crowded by each other).
     const laidOut = [];
     for (let i = 0; i < elements.length; i++) {
       if (i % 64 === 0) await yieldToMain();
       const r = rects[i], element = elements[i];
       laidOut.push(r.width > 0 && r.height > 0 && !element.matches(':disabled') && !isInert(element)
-        && !isHiddenFromPointer(element, r) && !layoutSkipped(element));
+        && !isHiddenFromPointer(element, r) && !layoutSkipped(element) && !outsideHiddenOverflow(element, r));
     }
     const undersized = rects.map((r, i) => laidOut[i] && (r.width < min || r.height < min));
     // One rect fully inside another is one control drawn twice (stretched-
@@ -438,8 +458,8 @@ export function createTargetSizeRule({ id, tags, help, helpUrl, min, spacingExce
       if (!win || typeof doc.elementsFromPoint !== 'function'
         || x < 0 || y < 0 || x >= win.innerWidth || y >= win.innerHeight) return false;
       for (const layer of doc.elementsFromPoint(x, y)) {
-        const inJ = elements[j] === layer || elements[j].contains(layer);
-        const inI = elements[i] === layer || elements[i].contains(layer);
+        const inJ = elements[j] === layer || containsNode(elements[j], layer);
+        const inI = elements[i] === layer || containsNode(elements[i], layer);
         if (inJ && !inI) return true;
         if (inI && !inJ) return false;
       }
@@ -504,7 +524,7 @@ export function createTargetSizeRule({ id, tags, help, helpUrl, min, spacingExce
     const calculateObscuredRect = (i) => {
       let areas = null;
       for (const j of nearbyCandidates(i)) {
-        if (elements[j].contains(elements[i]) || elements[i].contains(elements[j])) continue; // same control, nested markup
+        if (containsNode(elements[j], elements[i]) || containsNode(elements[i], elements[j])) continue; // same control, nested markup
         if (encloses(rects[j], rects[i]) || encloses(rects[i], rects[j])) continue; // one control drawn twice
         // Two links to the same place are one control in two boxes (a
         // card's image link over its title link): clicks in the overlap

package/engine/rules/wcag/4.1.2-aria-hidden-focus.js

@@ -1,5 +1,6 @@
 // WCAG SC 4.1.2 Name, Role, Value (Level A)
 import { cumulativeOpacity } from '../../lib/contrast.js';
+import { containsNode } from '../../lib/dom.js';
 
 const FOCUSABLE = 'a[href], area[href], button, input, select, textarea, summary, iframe, '
   + 'audio[controls], video[controls], [contenteditable]:not([contenteditable="false"]), [tabindex]';
@@ -44,7 +45,7 @@ export default {
     let modal = null;
     try { modal = doc.querySelector('dialog:modal'); } catch { /* older engine */ }
     modal ??= [...doc.querySelectorAll('[aria-modal="true"]')].find(isRendered) ?? null;
-    if (modal && !element.contains(modal) && !modal.contains(element)) {
+    if (modal && !containsNode(element, modal) && !containsNode(modal, element)) {
       return {
         status: 'incomplete',
         message: `This aria-hidden element contains ${focusable.length} focusable element(s) while a modal dialog is open — fine if the modal traps keyboard focus, a failure if Tab can reach them. Check the trap by keyboard.`,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "pour-engine",
-  "version": "1.46.1",
+  "version": "1.46.3",
   "description": "Accessibility (WCAG 2.2) audit engine written from the W3C specifications — runs entirely in the browser, no dependencies.",
   "type": "module",
   "main": "engine/index.js",