pour-engine 1.24.0 → 1.26.0

package/config/project.config.js

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

package/engine/lib/contrast.js

@@ -1296,5 +1296,6 @@ export function rangeVerdict(foreground, range, required) {
 export function isLargeText(style) {
   const size = parseFloat(style.fontSize);
   const weight = parseInt(style.fontWeight, 10) || 400;
-  return size >= 24 || (size >= 18.66 && weight >= 700);
+  // 18pt and 14pt at CSS's 96dpi: 24px, and 56/3 = 18.666…px exactly.
+  return size >= 24 || (size >= 56 / 3 && weight >= 700);
 }

package/engine/lib/dom.js

@@ -47,7 +47,13 @@ export function isVisible(element) {
 
 /** Selector for an element within its own root (document or shadow root). */
 function cssPathInRoot(element) {
-  if (element.id) return `#${CSS.escape(element.id)}`;
+  // An id anchors the selector only when it is UNIQUE in this root: real
+  // pages duplicate ids (three carousel pagers all id="default"), and a
+  // bare #id selector would round-trip every one of them to the first,
+  // collapsing distinct findings onto a single element.
+  const root = element.getRootNode();
+  const uniqueId = (el) => el.id && root.querySelectorAll(`#${CSS.escape(el.id)}`).length === 1;
+  if (uniqueId(element)) return `#${CSS.escape(element.id)}`;
   const parts = [];
   let current = element;
   while (current && current.nodeType === Node.ELEMENT_NODE && current !== document.documentElement) {
@@ -66,7 +72,7 @@ function cssPathInRoot(element) {
       if (repeated) part += `:nth-of-type(${index})`;
     }
     parts.unshift(part);
-    if (current.parentElement?.id) {
+    if (current.parentElement && uniqueId(current.parentElement)) {
       parts.unshift(`#${CSS.escape(current.parentElement.id)}`);
       break;
     }

package/engine/rules/wcag/1.3.1-form-label.js

@@ -21,16 +21,23 @@ export default {
       const style = getComputedStyle(label);
       return style.display !== 'none' && style.visibility !== 'hidden';
     });
-    // Label content includes aria-labels on things inside it (icon-only
-    // labels like <label><svg aria-label="Dark mode"/></label> still name)
-    // and image alts (<label><img alt="…"></label> is a visible, named
-    // label — alt text feeds name-from-contents per accname).
-    const labelsText = visibleLabels
-      .map((l) =>
-        `${l.textContent} ${[...l.querySelectorAll('[aria-label], img[alt], area[alt]')]
-          .map((e) => e.getAttribute('aria-label') ?? e.getAttribute('alt')).join(' ')}`)
-      .join(' ')
-      .trim();
+    // A label's contribution is its ACCESSIBLE text, not its raw textContent:
+    // aria-hidden subtrees inside the label are excluded from the name
+    // computation (a custom radio whose only visible text sits in an
+    // aria-hidden styled twin names NOTHING — the browser's tree computes an
+    // empty name), while aria-label on the label itself or on things inside
+    // it (icon-only labels) and image alts DO feed the name per accname.
+    const accessibleText = (node) => {
+      if (node.nodeType === Node.TEXT_NODE) return node.textContent;
+      if (node.nodeType !== Node.ELEMENT_NODE) return '';
+      if (node.getAttribute('aria-hidden') === 'true') return '';
+      const aria = node.getAttribute('aria-label');
+      if (aria?.trim()) return aria;
+      const alt = (node.tagName === 'IMG' || node.tagName === 'AREA') ? node.getAttribute('alt') : null;
+      if (alt?.trim()) return alt;
+      return [...node.childNodes].map(accessibleText).join(' ');
+    };
+    const labelsText = visibleLabels.map(accessibleText).join(' ').trim();
     const ariaLabel = element.getAttribute('aria-label')?.trim();
     const labelledby = labelledByName(element);
     if (labelsText || ariaLabel || labelledby) return { status: 'pass' };
@@ -65,10 +72,18 @@ export default {
       };
     }
     if (element.labels?.length) {
+      // The label may LOOK fine while announcing nothing: all its text
+      // sitting inside an aria-hidden subtree (the styled-twin custom
+      // control pattern) is excluded from the name computation.
+      const looksLabelled = visibleLabels.some((l) => l.textContent.trim());
       return {
         status: 'fail',
-        message: 'This field has a <label>, but the label is empty — it announces nothing.',
-        fix: 'Put visible text inside the label.',
+        message: looksLabelled
+          ? 'This field\'s <label> shows text, but all of it is inside aria-hidden content — the accessible name computes to nothing.'
+          : 'This field has a <label>, but the label is empty — it announces nothing.',
+        fix: looksLabelled
+          ? 'Move the visible text out of the aria-hidden wrapper, or add aria-label to the field.'
+          : 'Put visible text inside the label.',
       };
     }
     return {

package/engine/rules/wcag/1.4.11-non-text-contrast.js

@@ -77,7 +77,12 @@ export default {
     // the visible boundary (border, or a fill contrasting with the page
     // around it). The FIELD the user perceives is the wrapper — but only a
     // SNUG wrapper counts: a page section's border is not a field boundary.
-    for (let wrapper = element.parentElement, depth = 0; wrapper && depth < 2; wrapper = wrapper.parentElement, depth++) {
+    // Snugness is the guard, so the walk continues through transparent
+    // intermediate wrappers (autocomplete shells, JS mount points) as long
+    // as each stays field-sized — a search plate three levels up is still
+    // the field the user sees, while a page section fails the size check
+    // long before any depth cap would matter.
+    for (let wrapper = element.parentElement, depth = 0; wrapper && depth < 4; wrapper = wrapper.parentElement, depth++) {
       const wrapperRect = wrapper.getBoundingClientRect();
       if (wrapperRect.height > ownRect.height + 24 || wrapperRect.width > ownRect.width + 160) break;
       const wrapperStyle = getComputedStyle(wrapper);

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

@@ -876,9 +876,25 @@ 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
+    // a bold-but-just-under button reads as the checker ignoring its weight.
+    const largeScaleNote = (() => {
+      if (required !== thresholds.normal || ratio < thresholds.large) return '';
+      const sizePx = parseFloat(style.fontSize) || 0;
+      const weightNum = parseInt(style.fontWeight, 10) || 400;
+      const shown = `${Math.round(sizePx * 10) / 10}px`;
+      if (weightNum >= 700 && 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) {
+        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 '';
+    })();
     return {
       status: 'fail',
-      message: `Contrast is ${showRatio(ratio)}:1 — below the ${required}:1 WCAG minimum for this text size.`,
+      message: `Contrast is ${showRatio(ratio)}:1 — below the ${required}:1 WCAG minimum for this text size.${largeScaleNote}`,
       fix: `Darken the text or lighten the background until the ratio reaches ${required}:1 (currently ${foregroundRgb} on ${backgroundRgb}).`
         + (authored ? ` Your CSS writes ${authored}, so searching it for the sRGB values above won't find them.` : '')
         + dimmedNote,

package/engine/rules/wcag/4.1.2-nested-interactive.js

@@ -17,9 +17,19 @@ export default {
     // Only descendants a user can actually reach count: hidden inputs,
     // disabled controls, display:none templates, and tabindex="-1" nodes
     // inside a control are inert markup, not competing tab stops.
+    // Two more shapes are unreachable by the same principle: aria-hidden
+    // content (AT ignores it wholesale — a decorative svg role="button"
+    // aria-hidden="true" inside a play button competes with nothing; if it
+    // is natively focusable that is aria-hidden-focus's finding, not a
+    // second one here), and role-only widgets never given a tabindex (a
+    // role="button" with no tabindex is not in the tab order — keyboard
+    // users cannot reach it, so it cannot be a competing stop).
+    const NATIVE = 'a[href], button, input, select, textarea, summary, audio[controls], video[controls]';
     const nested = [...element.querySelectorAll(INTERACTIVE)].find((el) =>
       !el.matches(':disabled') && el.getAttribute('tabindex') !== '-1'
-      && !(el.tagName === 'INPUT' && el.type === 'hidden') && isRendered(el));
+      && !(el.tagName === 'INPUT' && el.type === 'hidden') && isRendered(el)
+      && !el.closest('[aria-hidden="true"]')
+      && (el.matches(NATIVE) || el.hasAttribute('tabindex')));
     if (!nested) return { status: 'pass' };
     return {
       status: 'fail',

package/engine/rules/wcag/4.1.2-role-required-aria.js

@@ -20,12 +20,16 @@ export default {
     const role = element.getAttribute('role');
     const required = REQUIRED[role];
     if (element.hasAttribute(required)) return { status: 'pass' };
-    // A redundant explicit role on the native element (input type=checkbox
-    // role=checkbox — common framework output) needs no ARIA state: the
-    // host language supplies checkedness/value natively.
+    // Native semantics supply the state regardless of WHICH state-bearing
+    // role is claimed: HTML-AAM maps an input's checkedness to aria-checked
+    // (input type=checkbox role="switch" — the standard toggle pattern —
+    // exposes checked=false/true in the browser's tree with no ARIA at all),
+    // and a range input's value to aria-valuenow likewise.
     const type = element.tagName === 'INPUT' ? element.type : null;
-    const NATIVE_STATE = { checkbox: 'checkbox', radio: 'radio', range: 'slider' };
-    if (type && NATIVE_STATE[type] === role) return { status: 'pass' };
+    if (type === 'checkbox' || type === 'radio') {
+      if (required === 'aria-checked') return { status: 'pass' };
+    }
+    if (type === 'range' && required === 'aria-valuenow') return { status: 'pass' };
     if (element.tagName === 'SELECT' && role === 'combobox') return { status: 'pass' };
     return {
       status: 'fail',

package/package.json

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