pour-engine 1.46.0 → 1.46.2

package/config/project.config.js

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

package/engine/lib/contrast.js

@@ -1,4 +1,5 @@
 // WCAG contrast math (WCAG 2.x, relative luminance per sRGB).
+import { 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
@@ -145,6 +146,7 @@ let uncoveredEffectCache = new WeakMap();
 let blendBackdropCache = new WeakMap();
 let labelReferrersCache = new WeakMap();
 let stackingContextCache = new WeakMap();
+let backgroundRulesCache = new WeakMap();
 const HAS_IMAGE = Symbol('background-image in chain');
 
 export function resetAuditCaches() {
@@ -161,6 +163,7 @@ export function resetAuditCaches() {
   blendBackdropCache = new WeakMap();
   labelReferrersCache = new WeakMap();
   stackingContextCache = new WeakMap();
+  backgroundRulesCache = new WeakMap();
 }
 
 /**
@@ -608,7 +611,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);
@@ -981,6 +984,14 @@ export function filmedContrastBounds(foreground, background, film) {
   };
 }
 
+/** A layer's own opacity. 0 is a real value, not a missing one: consent
+ *  dimmers commonly fade to opacity 0 and stay in the DOM once dismissed
+ *  (CSS Color 4, the opacity property: 0 is fully transparent). */
+const opacityOf = (style) => {
+  const opacity = parseFloat(style.opacity);
+  return Number.isNaN(opacity) ? 1 : opacity;
+};
+
 /** A layer qualifies as a scrim over `element` when it is translucent paint
  *  (or a backdrop-filter) covering most of the viewport and the whole
  *  element — the shape of a modal/loading veil, not a badge or header.
@@ -991,10 +1002,10 @@ 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) * (parseFloat(style.opacity) || 1);
+    const alpha = (color ? color.a : 0) * opacityOf(style);
     const hasBackdropFilter = style.backdropFilter && style.backdropFilter !== 'none';
     // Fully opaque covers simply hide the text (nothing to judge through);
     // near-invisible tints don't meaningfully change presented contrast.
@@ -1027,7 +1038,7 @@ export function scrimPaint(layers) {
     if (style.backgroundImage !== 'none') return null;
     const color = parseColor(style.backgroundColor);
     if (!color) return null;
-    const alpha = color.a * (parseFloat(style.opacity) || 1);
+    const alpha = color.a * opacityOf(style);
     if (alpha <= 0) continue;
     paints.push({ ...color, a: alpha });
   }
@@ -1090,7 +1101,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);
@@ -1179,7 +1190,7 @@ export function opaquePanelRects(doc) {
         // hazard that scrolling cannot escape.
         if (!panelRectsCache.veil && (style.position === 'fixed' || style.position === 'sticky')
           && style.visibility !== 'hidden') {
-          const alpha = (color ? color.a : 0) * (parseFloat(style.opacity) || 1);
+          const alpha = (color ? color.a : 0) * opacityOf(style);
           const hasBackdropFilter = style.backdropFilter && style.backdropFilter !== 'none';
           const coversViewport = rect.width >= 0.9 * win.innerWidth && rect.height >= 0.9 * win.innerHeight;
           if (coversViewport && (hasBackdropFilter || (alpha >= 0.15 && alpha < 1))) {
@@ -1456,7 +1467,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);
@@ -1469,7 +1480,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);
@@ -1479,7 +1490,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;
 }
@@ -1988,6 +1999,71 @@ function rootHasFirstLineRules(root) {
   return has;
 }
 
+/**
+ * The stylesheet rules behind lazy-loaded backgrounds, per root per audit:
+ * `gates` hold background images back until a loader marks the element
+ * loaded (`background-image: none` on a selector that excludes a lazy-load
+ * class, as in `.section:not(.lazyloaded) { background-image: none }`), and
+ * `images` give an element a background image of its own. Rules under a
+ * media or support condition count only while it holds; an unreadable
+ * cross-origin sheet contributes nothing.
+ */
+const LAZY_EXCLUSION = /:not\(\s*\.[\w-]*lazy[\w-]*\s*\)/i;
+const PAINTS_IMAGE = /url\(|gradient\(|image-set\(|var\(/i;
+function backgroundRules(root) {
+  let found = backgroundRulesCache.get(root);
+  if (found) return found;
+  found = { gates: [], images: [] };
+  const win = (root.ownerDocument ?? root).defaultView;
+  const scan = (rules) => {
+    for (const rule of rules) {
+      if (rule.styleSheet) {
+        if (rule.media?.mediaText && !win.matchMedia(rule.media.mediaText).matches) continue;
+        try { scan(rule.styleSheet.cssRules); } catch { /* unreadable import */ }
+        continue;
+      }
+      if (rule.media) {
+        if (!win.matchMedia(rule.media.mediaText).matches) continue;
+      } else if (win.CSSSupportsRule && rule instanceof win.CSSSupportsRule) {
+        if (!win.CSS.supports(rule.conditionText)) continue;
+      }
+      if (rule.selectorText && rule.style) {
+        const image = rule.style.getPropertyValue('background-image').trim();
+        if (image === 'none' && LAZY_EXCLUSION.test(rule.selectorText)) found.gates.push(rule.selectorText);
+        else if (PAINTS_IMAGE.test(image || rule.style.getPropertyValue('background'))) found.images.push(rule.selectorText);
+      }
+      if (rule.cssRules) scan(rule.cssRules);
+    }
+  };
+  for (const sheet of [...(root.styleSheets ?? []), ...(root.adoptedStyleSheets ?? [])]) {
+    try { scan(sheet.cssRules); } catch { /* cross-origin */ }
+  }
+  backgroundRulesCache.set(root, found);
+  return found;
+}
+
+const matchesAny = (node, selectors) => selectors.some((selector) => {
+  try { return node.matches(selector); } catch { return false; }
+});
+
+/**
+ * Is the background behind this text still to be lazy-loaded? True when an
+ * element on its chain is given a background image by the page's styles, a
+ * lazy-load gate matches it, and it computes no background image now. Page
+ * builders defer section backgrounds this way until the section nears the
+ * viewport, so text the visitor has not scrolled to yet is measured against
+ * a placeholder they never see: the loader restores the image first.
+ */
+export function lazyWithheldBackground(element) {
+  for (let node = element; node?.nodeType === 1; node = flatParentOf(node)) {
+    const { gates, images } = backgroundRules(node.getRootNode());
+    if (!gates.length || !matchesAny(node, gates)) continue;
+    if (getComputedStyle(node).backgroundImage !== 'none') continue;
+    if (PAINTS_IMAGE.test(node.style?.backgroundImage ?? '') || matchesAny(node, images)) return true;
+  }
+  return false;
+}
+
 /**
  * Colours that repaint part of this element's own text through ::first-line
  * or ::first-letter, when they differ from the colour the element itself

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 } from '../../lib/contrast.js';
+  showRatio, asRgb, splitBackgroundLayers, backgroundLayerUrl, sampleGridFor, opacityGroupPaint, pseudoTextColors, BOLD_WEIGHT, hasPaintEffects, isolatedBlendBackdrop, labelReferrers, beneathOpaqueAncestor, lazyWithheldBackground } 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);
@@ -1508,6 +1509,16 @@ export function createContrastRule({ id, name, tags, help, helpUrl, thresholds }
   rule.evaluate = async (element, helpers) => {
     const verdict = await judge(element, helpers);
     if (verdict.status !== 'fail') return verdict;
+    // The background this was measured against is a placeholder: the page
+    // holds its background image back until a lazy loader marks it loaded,
+    // which happens before the visitor scrolls it into view. A failure has
+    // to be shown against the paint the visitor sees.
+    if (lazyWithheldBackground(element)) {
+      return {
+        status: 'incomplete',
+        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.',
+      };
+    }
     // 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;
@@ -145,7 +145,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);
     }
   }
@@ -438,8 +438,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 +504,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.0",
+  "version": "1.46.2",
   "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",