pour-engine 1.31.2 → 1.32.0

package/config/project.config.js

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

package/engine/rules/wcag/1.3.1-definition-list.js

@@ -11,12 +11,28 @@ export default {
   selector: 'dl:not([role])', // a role attribute replaces the dl semantics
   evaluate(element) {
     const invalid = [...element.children].filter((child) => !ALLOWED.has(child.tagName));
-    if (!invalid.length) return { status: 'pass' };
-    const tags = [...new Set(invalid.map((child) => `<${child.tagName.toLowerCase()}>`))].join(', ');
-    return {
-      status: 'fail',
-      message: `This <dl> contains ${tags} directly — only <dt>, <dd> (optionally grouped in <div>) are allowed, otherwise the term/description pairing breaks.`,
-      fix: 'Restructure the list into <dt>/<dd> pairs, or use a different element.',
-    };
+    if (invalid.length) {
+      const tags = [...new Set(invalid.map((child) => `<${child.tagName.toLowerCase()}>`))].join(', ');
+      return {
+        status: 'fail',
+        message: `This <dl> contains ${tags} directly — only <dt>, <dd> (optionally grouped in <div>) are allowed, otherwise the term/description pairing breaks.`,
+        fix: 'Restructure the list into <dt>/<dd> pairs, or use a different element.',
+      };
+    }
+    // A <div> child is only a valid wrapper when it holds the dt/dd group
+    // ITSELF (HTML: each div contains one or more dt followed by one or
+    // more dd). Pairs buried another level down (dl > div > div > dt) fall
+    // out of the dl's content model, so the term/description association is
+    // no longer guaranteed to assistive technology.
+    const emptyWrappers = [...element.children].filter((child) =>
+      child.tagName === 'DIV' && ![...child.children].some((inner) => inner.tagName === 'DT' || inner.tagName === 'DD'));
+    if (emptyWrappers.length) {
+      return {
+        status: 'fail',
+        message: `${emptyWrappers.length} <div> wrapper(s) in this <dl> hold no <dt>/<dd> directly — the term/description pairing breaks when the pairs sit deeper than the wrapper.`,
+        fix: 'Make each <div> child of the <dl> contain its <dt>/<dd> pair directly, or flatten the pairs into the <dl> itself.',
+      };
+    }
+    return { status: 'pass' };
   },
 };

package/engine/rules/wcag/1.3.1-table-headers.js

@@ -26,11 +26,13 @@ export default {
     if (!isGrid || textCells < 4) return { status: 'pass' }; // likely layout or trivial
     // Nested tables are the signature of legacy LAYOUT markup, not data —
     // asserting "missing headers" there flags email-style scaffolding. A
-    // human can tell in a glance; the machine can't.
-    if (!element.querySelector('th') && element.querySelector('table')) {
+    // human can tell in a glance; the machine can't. The signature reads in
+    // both directions: a table INSIDE another table (Hacker News's story
+    // list inside its page-scaffold table) is the same legacy layout.
+    if (!element.querySelector('th') && (element.querySelector('table') || element.parentElement?.closest('table'))) {
       return {
         status: 'incomplete',
-        message: 'This table has no header cells but contains nested tables — a layout-table signature. If it really presents data, mark its header cells with <th>; if it is layout scaffolding, add role="presentation".',
+        message: 'This table has no header cells and is part of a nested-table structure — a layout-table signature. If it really presents data, mark its header cells with <th>; if it is layout scaffolding, add role="presentation".',
       };
     }
 

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

@@ -26,20 +26,31 @@ export default {
     if (ownText(parent).replace(/\s+/g, '').length < 10) return { status: 'pass' };
 
     const style = getComputedStyle(element);
-    if ((style.textDecorationLine ?? style.textDecoration ?? '').includes('underline')) return { status: 'pass' };
-    // Underline substitutes count as non-colour cues too: border-bottom
-    // "underlines", box-shadow underlines, and background chips/pills all
-    // mark the link by shape, not colour alone.
-    if (parseFloat(style.borderBottomWidth) > 0 && style.borderBottomStyle !== 'none') return { status: 'pass' };
-    if (style.boxShadow && style.boxShadow !== 'none') return { status: 'pass' };
-    const ownBackground = parseColor(style.backgroundColor);
-    if (ownBackground && ownBackground.a > 0) return { status: 'pass' };
-    if (style.backgroundImage !== 'none') return { status: 'pass' }; // gradient/image underline technique
-
-    // A clear weight difference is a non-colour distinction too.
     const parentStyle = getComputedStyle(parent);
     const weight = (s) => parseInt(s.fontWeight, 10) || 400;
-    if (Math.abs(weight(style) - weight(parentStyle)) >= 300) return { status: 'pass' };
+    // A cue counts wherever it is painted: sites routinely reset
+    // text-decoration on the anchor and underline (or embolden) an inner
+    // span that carries the text, so every visible text-bearing element in
+    // the link vouches, not just the anchor. The >1px rect floor keeps
+    // 1×1 sr-only clip spans from vouching for a cue nobody can see.
+    const cueBearers = [style];
+    for (const el of element.querySelectorAll('*')) {
+      if (!el.textContent.trim()) continue;
+      if ([...el.getClientRects()].some((r) => r.width > 1 && r.height > 1)) cueBearers.push(getComputedStyle(el));
+    }
+    for (const s of cueBearers) {
+      if ((s.textDecorationLine ?? s.textDecoration ?? '').includes('underline')) return { status: 'pass' };
+      // Underline substitutes count as non-colour cues too: border-bottom
+      // "underlines", box-shadow underlines, and background chips/pills all
+      // mark the link by shape, not colour alone.
+      if (parseFloat(s.borderBottomWidth) > 0 && s.borderBottomStyle !== 'none') return { status: 'pass' };
+      if (s.boxShadow && s.boxShadow !== 'none') return { status: 'pass' };
+      const ownBackground = parseColor(s.backgroundColor);
+      if (ownBackground && ownBackground.a > 0) return { status: 'pass' };
+      if (s.backgroundImage !== 'none') return { status: 'pass' }; // gradient/image underline technique
+      // A clear weight difference is a non-colour distinction too.
+      if (Math.abs(weight(s) - weight(parentStyle)) >= 300) return { status: 'pass' };
+    }
 
     const linkColor = parseColor(style.color);
     const textColor = parseColor(parentStyle.color);

package/package.json

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