pour-engine 1.37.1 → 1.38.0

package/config/project.config.js

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

package/engine/lib/contrast.js

@@ -1690,10 +1690,16 @@ export function pseudoTextColors(element, style) {
   return found;
 }
 
+/** The font weight from which text counts as bold for the large-scale
+ *  test. WCAG's glossary says "bold" and no number; CSS's bold keyword is
+ *  700, and the semibold 600 that most modern faces ship reads as bold at
+ *  14pt on screen, so it counts here too (David, 2026-09-02; was 700). */
+export const BOLD_WEIGHT = 600;
+
 /** WCAG "large text": ≥24px, or ≥18.66px (14pt) bold. */
 export function isLargeText(style) {
   const size = parseFloat(style.fontSize);
   const weight = parseInt(style.fontWeight, 10) || 400;
   // 18pt and 14pt at CSS's 96dpi: 24px, and 56/3 = 18.666…px exactly.
-  return size >= 24 || (size >= 56 / 3 && weight >= 700);
+  return size >= 24 || (size >= 56 / 3 && weight >= BOLD_WEIGHT);
 }

package/engine/rules/wcag/1.4.12-text-spacing.js

@@ -4,13 +4,19 @@
 // The override is injected and removed inside one synchronous pass — the
 // engine only yields to the renderer between rules, so the page never
 // paints the probed state.
-// The probe reflows the whole page for a moment. Two guards keep that
+// The probe reflows the whole page for a moment. Three guards keep that
 // invisible to the user: scroll anchoring is disabled while the override
 // is in (or Chrome re-anchors during the inflated layout and leaves the
 // page scrolled somewhere else when the probe lifts — measured at 884px
-// of drift on a long report page), and the window scroll is restored
-// after removal in case the browser clamped it anyway.
-const OVERRIDE = `html { overflow-anchor: none !important; }
+// of drift on a long report page); the document keeps at least its own
+// height, because a page set with a line height above 1.5 gets SHORTER
+// under the override, the browser clamps the scroll position to the new
+// end, and that clamp paints (measured on rocketvalidator.com: 2500px to
+// 1966px in one frame, David, 2026-09-02); and the window scroll is put
+// back instantly after removal, instantly whatever the page's own
+// scroll-behavior says, since a smooth restore is the visible half of the
+// jump.
+const override = (minHeight) => `html { overflow-anchor: none !important; min-height: ${minHeight}px !important; }
 * {
   line-height: 1.5 !important;
   letter-spacing: 0.12em !important;
@@ -56,7 +62,7 @@ export default {
     const scrollY = win?.scrollY ?? 0;
     const probe = doc.createElement('style');
     probe.dataset.pourAudit = 'probe';
-    probe.textContent = OVERRIDE;
+    probe.textContent = override(doc.documentElement.scrollHeight);
     doc.documentElement.append(probe);
     let after;
     try {
@@ -68,7 +74,7 @@ export default {
       // The audit must never move the page: put the scroll back exactly
       // where the user had it, after the removal's own reflow settles.
       void doc.documentElement.offsetHeight;
-      if (win && (win.scrollX !== scrollX || win.scrollY !== scrollY)) win.scrollTo(scrollX, scrollY);
+      if (win && (win.scrollX !== scrollX || win.scrollY !== scrollY)) win.scrollTo({ left: scrollX, top: scrollY, behavior: 'instant' });
     }
 
     return elements.map((element, i) => {

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

@@ -6,8 +6,7 @@ import {
   opacityAnimating, restingOpacity, mediaRects, inZeroClipSubtree,
   paintedBackdrop, opaquePanelRects, viewportVeil, textShadowHalo, textShadowNegligible,
   pseudoBackdropForText, filmedContrastBounds, backgroundColorSource, scrimPaint, applyOverlays,
-  showRatio, splitBackgroundLayers, backgroundLayerUrl, sampleGridFor, opacityGroupPaint, pseudoTextColors,
-} from '../../lib/contrast.js';
+  showRatio, splitBackgroundLayers, backgroundLayerUrl, sampleGridFor, opacityGroupPaint, pseudoTextColors, BOLD_WEIGHT } from '../../lib/contrast.js';
 
 /** The first url() among a background-image list's layers, or null. */
 const firstLayerUrl = (css) => splitBackgroundLayers(css ?? '').map(backgroundLayerUrl).find(Boolean) ?? null;
@@ -407,7 +406,8 @@ async function sampledVerdict(source, foreground, required, doc, overlays = [],
  */
 export function createContrastRule({ id, tags, help, helpUrl, thresholds }) {
   // When the colour pair already clears the LARGE-scale minimum, the miss
-  // is about scale, not colour: name the boundary (14pt bold / 18pt), or
+  // is about scale, not colour: name the boundary (14pt bold / 18pt, bold
+  // meaning BOLD_WEIGHT and up), or
   // a bold-but-just-under button reads as the checker ignoring its weight.
   const largeScaleNoteFor = (style, required, ratio) => {
     if (required !== thresholds.normal || ratio < thresholds.large) return '';
@@ -418,15 +418,16 @@ export function createContrastRule({ id, tags, help, helpUrl, thresholds }) {
     // twentieth of a pixel of a cutoff the size is shown to two decimals,
     // and when even that rounds onto the cutoff it is named as just under
     // it. (2026-08-25 overnight audit, defect 9.)
-    const cutoff = weightNum >= 700 ? 56 / 3 : 24;
-    const cutoffText = weightNum >= 700 ? '18.67px' : '24px';
+    const bold = weightNum >= BOLD_WEIGHT;
+    const cutoff = bold ? 56 / 3 : 24;
+    const cutoffText = bold ? '18.67px' : '24px';
     const nearCutoff = Math.abs(sizePx - cutoff) < 0.05;
     let shown = nearCutoff ? `${sizePx.toFixed(2)}px` : `${Math.round(sizePx * 10) / 10}px`;
     if (nearCutoff && parseFloat(shown) >= parseFloat(cutoffText)) shown = `just under ${cutoffText}`;
-    if (weightNum >= 700 && sizePx < 56 / 3) {
+    if (bold && sizePx < 56 / 3) {
       return ` This text is bold at ${shown}; bold text counts as large scale from 18.67px (14pt), where the ${thresholds.large}:1 minimum would apply and these colours would pass.`;
     }
-    if (weightNum < 700 && sizePx >= 56 / 3 && sizePx < 24) {
+    if (!bold && sizePx >= 56 / 3 && sizePx < 24) {
       return ` At ${shown} regular weight this is not large scale; from 24px (18pt), or bold at this size, the ${thresholds.large}:1 minimum would apply and these colours would pass.`;
     }
     return '';

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

@@ -8,11 +8,35 @@
 // finding goes to a human with the evidence attached, never asserted: the
 // same verdict discipline as pause-stop-hide's ticker branch.
 //
+// One shape of that mechanism is stated in the markup and needs no human:
+// a visible button whose aria-controls names the video, or a container
+// holding it. That is what aria-controls is for, the element whose
+// presence or contents the control changes, and a page that wires its
+// pause button that way has answered the question the review would ask
+// (pour.dev's own hero and sense videos, David, 2026-09-02). A button that
+// merely sits near the video, or one that is hidden, settles nothing.
+//
 // 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.
+/** 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) {
+  const root = video.getRootNode();
+  if (!root.querySelectorAll) return null;
+  const byId = (id) => (root.getElementById ? root.getElementById(id) : root.querySelector(`#${CSS.escape(id)}`));
+  for (const control of root.querySelectorAll('button[aria-controls], [role="button"][aria-controls], input[type="button"][aria-controls]')) {
+    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;
+    }
+  }
+  return null;
+}
+
 export default {
   id: 'video-loop-motion',
   name: 'Looping video control',
@@ -23,7 +47,7 @@ export default {
   selector: 'video[autoplay][loop]:not([controls])',
   // Movement is a visual matter: an aria-hidden hero still moves on screen.
   visibility: 'visual',
-  evaluate(element) {
+  evaluate(element, { isVisible }) {
     // 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();
@@ -32,6 +56,7 @@ export default {
     // 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' };
+    if (pauseControlFor(element, isVisible)) 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.',

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "pour-engine",
-  "version": "1.37.1",
+  "version": "1.38.0",
   "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",