@surea11y/core 1.6.0 → 1.8.0

package/src/checks/automatic/spinbutton-name-present.js

@@ -20,6 +20,9 @@
  *   accepted: text sitting inside a custom spinbutton widget is not reliably
  *   exposed as its name. On a labelable element (<input role="spinbutton">)
  *   an associated <label> counts as well.
+ *   On a text-like <input> or a <textarea>, the placeholder counts last
+ *   (HTML-AAM's final name source): a placeholder-only label is a 3.3.2
+ *   question, not a missing name.
  */
 
 const id = 'spinbutton-name-present';
@@ -149,21 +152,6 @@ function runInPage(ctx) {
     }
   }
 
-  function buildLabelForMap(doc) {
-    const map = new Map(); // id -> label element (first)
-    try {
-      const labels = doc && doc.getElementsByTagName ? doc.getElementsByTagName('label') : [];
-      for (let i = 0; i < labels.length; i += 1) {
-        const lab = labels[i];
-        if (!lab || !lab.getAttribute) continue;
-        const f = normalizeWs(lab.getAttribute('for'));
-        if (!f) continue;
-        if (!map.has(f)) map.set(f, lab);
-      }
-    } catch {}
-    return map;
-  }
-
   const occurrences = [];
   let applicableCount = 0;
 
@@ -172,42 +160,27 @@ function runInPage(ctx) {
     ? helpers.queryAllSmart(selector)
     : helpers.queryAll(selector);
 
-  // Precompute label[for] map for spinbutton elements that are labelable
-  // native form controls (e.g. <input role="spinbutton">).
-  const labelForMap = buildLabelForMap(document);
-
+  // Delegates to the shared, spec-guarded lookup (dom-helpers.js's
+  // getAssociatedLabelElements): a <label> -- wrapping or via `for` --
+  // only ever associates with a genuinely labelable element, so this
+  // correctly returns nothing for role-only widgets a <label> merely sits
+  // next to, and the real thing for a labelable element like
+  // <input role="spinbutton">.
   function getNativeLabelText(el) {
+    if (!helpers || typeof helpers.getAssociatedLabelElements !== 'function') return '';
+    let labels;
     try {
-      if ('labels' in el && el.labels && el.labels.length) {
-        const parts = [];
-        const max = Math.min(4, el.labels.length);
-        for (let i = 0; i < max; i += 1) {
-          const lab = el.labels[i];
-          const t = lab ? getLabelText(lab) : '';
-          if (t) parts.push(t);
-        }
-        const joined = normalizeWs(parts.join(' '));
-        if (joined) return joined;
-      }
-    } catch {}
-    try {
-      if (el.closest) {
-        const wrap = el.closest('label');
-        if (wrap) {
-          const t = getLabelText(wrap);
-          if (t) return t;
-        }
-      }
-    } catch {}
-    try {
-      const idAttr = getAttr(el, 'id');
-      if (idAttr && labelForMap.has(idAttr)) {
-        const lab = labelForMap.get(idAttr);
-        const t = lab ? getLabelText(lab) : '';
-        if (t) return t;
-      }
-    } catch {}
-    return '';
+      labels = helpers.getAssociatedLabelElements(el) || [];
+    } catch {
+      labels = [];
+    }
+    const parts = [];
+    const max = Math.min(4, labels.length);
+    for (let i = 0; i < max; i += 1) {
+      const t = getLabelText(labels[i]);
+      if (t) parts.push(t);
+    }
+    return normalizeWs(parts.join(' '));
   }
 
   function hasName(el) {
@@ -224,6 +197,16 @@ function runInPage(ctx) {
     const lab = getNativeLabelText(el);
     if (lab) return { ok: true, method: 'label' };
 
+    // HTML-AAM's last name source for a text-like <input> or a <textarea>,
+    // after title: the placeholder. A placeholder-only label is a 3.3.2
+    // question, not a missing name.
+    if (helpers.getNativeHostNameInfo) {
+      try {
+        const host = helpers.getNativeHostNameInfo(el, ctx, { placeholder: true });
+        if (host && host.present) return { ok: true, method: host.mechanism };
+      } catch {}
+    }
+
     // role="spinbutton" is name-from-author-only per WAI-ARIA: it must NOT
     // fall back to subtree content.
     return { ok: false, method: 'none' };

package/src/checks/automatic/target-size-minimum.js

@@ -124,17 +124,6 @@ const meta = {
   }
 };
 
-// ---- constants (deterministic, CSS pixels) ----
-const MIN_SIZE = 24;
-const MIN_RADIUS = 12; // spacing exception circle radius (24px diameter)
-
-// Grid sampling configuration (kept small for perf; only used for undersized targets)
-const GRID_POINTS = 25; // 5x5
-const GRID_N = 5;
-
-// Circle sampling configuration (perimeter)
-const CIRCLE_SAMPLES = 16; // deterministic, fixed
-
 function runInPage(ctx) {
   'use strict';
 
@@ -293,14 +282,29 @@ function runInPage(ctx) {
     }
   }
 
+  // Per-run memoization: getComputedStyle is a real, non-trivial cost in an
+  // actual browser (unlike jsdom, which no-ops it), and hasSpacingConflict
+  // below calls getStyle on the SAME candidate element repeatedly -- once
+  // per undersized target it's compared against, via
+  // isInlineTextExceptionTarget/isInlineLinkTarget -- so with U undersized
+  // targets and N total candidates this was an uncached O(U * N)
+  // getComputedStyle call count. The DOM is read-only for the rest of this
+  // rule's run (no writes between reads), so caching per element here is
+  // safe -- style cannot change mid-run.
+  const __styleCache = new WeakMap();
   function getStyle(el) {
+    if (__styleCache.has(el)) return __styleCache.get(el);
+    let cs;
     try {
-      return document && document.defaultView && document.defaultView.getComputedStyle
-        ? document.defaultView.getComputedStyle(el)
-        : null;
+      cs =
+        document && document.defaultView && document.defaultView.getComputedStyle
+          ? document.defaultView.getComputedStyle(el)
+          : null;
     } catch {
-      return null;
+      cs = null;
     }
+    __styleCache.set(el, cs);
+    return cs;
   }
 
   function isPointerReachable(el) {
@@ -431,6 +435,46 @@ function runInPage(ctx) {
 
   const undersized = items.filter((it) => it.rect.width < MIN || it.rect.height < MIN);
 
+  // Spatial grid over ALL items, cell size = MIN (24px), so hasSpacingConflict's
+  // proximity check below doesn't have to compare every undersized target
+  // against every other item -- an O(items^2) cost that dominates real-browser
+  // (not jsdom -- see this rule's own perf note further down) runtime on a
+  // page with many small targets. A point can only be within MIN of another
+  // point that shares its grid cell or one of the 8 adjacent cells: cell size
+  // equals the search radius, so two points in cells 2+ apart on either axis
+  // are, on that axis alone, already >= MIN apart. Restricting the candidate
+  // set to that 3x3 neighborhood is therefore never a false negative -- the
+  // exact same dist() < MIN check still runs on every candidate it returns,
+  // just skipping candidates that are geometrically guaranteed too far away.
+  // This changes performance only, never which targets conflict.
+  const grid = new Map(); // "cx,cy" -> item[]
+  function cellKeyFor(cx, cy) {
+    return cx + ',' + cy;
+  }
+  for (const it of items) {
+    const cx = Math.floor(it.center.cx / MIN);
+    const cy = Math.floor(it.center.cy / MIN);
+    const key = cellKeyFor(cx, cy);
+    let bucket = grid.get(key);
+    if (!bucket) {
+      bucket = [];
+      grid.set(key, bucket);
+    }
+    bucket.push(it);
+  }
+  function nearbyItems(center) {
+    const cx = Math.floor(center.cx / MIN);
+    const cy = Math.floor(center.cy / MIN);
+    const out = [];
+    for (let dx = -1; dx <= 1; dx++) {
+      for (let dy = -1; dy <= 1; dy++) {
+        const bucket = grid.get(cellKeyFor(cx + dx, cy + dy));
+        if (bucket) for (const it of bucket) out.push(it);
+      }
+    }
+    return out;
+  }
+
   // --- spacing/occlusion evaluation ---
   function hasSpacingConflict(target) {
     // 0) Pure geometry: deterministic center-distance check against ANY
@@ -438,7 +482,7 @@ function runInPage(ctx) {
     // spacing exception depends on proximity to any adjacent target, so an
     // undersized target sitting flush against an adequately-sized one still
     // fails the exception, which an undersized-only comparison would miss.
-    for (const other of items) {
+    for (const other of nearbyItems(target.center)) {
       if (!other || !other.el || isRelated(target.el, other.el)) continue;
 
       // Ignore inline-text exception targets when evaluating spacing conflicts.
@@ -614,6 +658,14 @@ function runInPage(ctx) {
             hintKey: 'targetSizeMinimum_hint_cantTell_ambiguousSpacing',
             params: {}
           },
+          uncertainty: {
+            code: 'not-computable',
+            needed: 'A reliable measurement of the spacing between this target and its neighbour.',
+            evidence: {
+              measured: { width: it.rect.width, height: it.rect.height },
+              conflictHitCount: info.hitCount
+            }
+          },
           data: {
             details: {
               measured: { width: it.rect.width, height: it.rect.height },
@@ -643,6 +695,14 @@ function runInPage(ctx) {
               hintKey: 'targetSizeMinimum_hint_cantTell_plausiblyEssential',
               params: {}
             },
+            uncertainty: {
+              code: 'judgement-required',
+              needed: 'Whether this target’s size is essential, which WCAG exempts.',
+              evidence: {
+                measured: { width: it.rect.width, height: it.rect.height },
+                conflictHitCount: info.hitCount
+              }
+            },
             data: {
               details: {
                 measured: { width: it.rect.width, height: it.rect.height },
@@ -671,6 +731,14 @@ function runInPage(ctx) {
               hintKey: 'targetSizeMinimum_hint_cantTell_inlineLinkRun',
               params: {}
             },
+            uncertainty: {
+              code: 'judgement-required',
+              needed: 'Whether this target is a link in a sentence, which WCAG exempts.',
+              evidence: {
+                measured: { width: it.rect.width, height: it.rect.height },
+                conflictHitCount: info.hitCount
+              }
+            },
             data: {
               details: {
                 measured: { width: it.rect.width, height: it.rect.height },

package/src/checks/automatic/td-has-header.js

@@ -12,15 +12,23 @@
  *   `<table>` elements with at least 4 rows and at least 4 columns
  *   (a "large" table, where implicit row/column header association is
  *   useful; small tables are usually self-evident), and with
- *   NO `colspan`/`rowspan` anywhere in the table.
+ *   NO `colspan`/`rowspan` anywhere in the table. A table whose role (first
+ *   token) is anything but table, grid or treegrid, such as a layout table
+ *   with role="presentation", is left out: it has no data cells.
  * @expectation
- *   Every `<td>` has an associated header, via one of:
+ *   Every non-empty `<td>` has an associated header, via one of:
  *     - a non-empty `headers` attribute (trusted here; whether it
  *       resolves to real `<th>` ids is `table-headers-attr-valid`'s
  *       concern, not this rule's), OR
- *     - an implicit column header: some `<th>` in the same column, in an
+ *     - an implicit column header: a header cell in the same column, in an
  *       earlier row, OR
- *     - an implicit row header: some `<th>` earlier in the same row.
+ *     - an implicit row header: a header cell earlier in the same row.
+ *   A header cell is a `<th>` with no other role, or any cell with
+ *   role="columnheader" or role="rowheader" (such a `<td>` is a header,
+ *   not a data cell). A `<td>` with no text and no content that could carry
+ *   a name (an image, a control, an element with an ARIA label) holds no
+ *   data, so it needs no header; the empty corner cell above row headers is
+ *   the usual case.
  * @implementation-notes
  * - Closes the gap `table-th-has-data-cells` deferred (see
  *   that rule's own implementation notes): this is the fuller positional
@@ -84,6 +92,25 @@ function runInPage(ctx) {
     }
   }
 
+  const TABLE_ROLES = ['table', 'grid', 'treegrid'];
+
+  function firstRole(el) {
+    return trim(el.getAttribute('role')).toLowerCase().split(/\s+/)[0];
+  }
+
+  // Content that can carry a name or a value even without text.
+  const NAMED_CONTENT =
+    'img, svg, canvas, input, select, textarea, button, object, embed, video, audio, iframe, meter, progress, [role], [aria-label], [aria-labelledby], [title]';
+
+  function isEmptyCell(cell) {
+    if (trim(cell.textContent)) return false;
+    try {
+      return !cell.querySelector(NAMED_CONTENT);
+    } catch {
+      return false;
+    }
+  }
+
   const tables = helpers.queryAllSmart ? helpers.queryAllSmart('table') : helpers.queryAll('table');
 
   const occurrences = [];
@@ -92,6 +119,9 @@ function runInPage(ctx) {
   for (const table of tables) {
     if (!table || !table.rows) continue;
 
+    const tableRole = firstRole(table);
+    if (tableRole && !TABLE_ROLES.includes(tableRole)) continue;
+
     const rows = Array.from(table.rows);
     if (rows.length < MIN_SIZE) continue;
 
@@ -115,30 +145,34 @@ function runInPage(ctx) {
     // another cell's row/column header, even though it's still structurally
     // a <th>.
     function isHeaderCell(cell) {
-      return !!(cell && cell.tagName && cell.tagName.toLowerCase() === 'th' && isEligible(cell));
+      if (!cell || !cell.tagName || !isEligible(cell)) return false;
+      const role = firstRole(cell);
+      if (role === 'columnheader' || role === 'rowheader') return true;
+      return cell.tagName.toLowerCase() === 'th' && !role;
     }
 
-    function hasColumnHeaderAbove(r, c) {
-      for (let ri = 0; ri < r; ri++) {
-        const cell = rowCells[ri] && rowCells[ri][c];
-        if (isHeaderCell(cell)) return true;
-      }
-      return false;
-    }
-
-    function hasRowHeaderBefore(r, c) {
-      const cells = rowCells[r] || [];
-      for (let ci = 0; ci < c; ci++) {
-        if (isHeaderCell(cells[ci])) return true;
-      }
-      return false;
-    }
+    // "Was there a <th> above this cell's column" and "was there a <th>
+    // earlier in this cell's row" are both prefix questions over a scan
+    // already in progress (rows top to bottom, cells left to right within a
+    // row), so each is tracked incrementally instead of rescanning the
+    // rows/columns already passed for every cell: colHasHeaderAbove[c]
+    // carries forward across rows, rowHasHeaderBefore resets at the start
+    // of each row. One pass over every cell, not one rescan per cell.
+    const colHasHeaderAbove = new Array(maxCols).fill(false);
 
     for (let r = 0; r < rowCells.length; r++) {
       const cells = rowCells[r];
+      let rowHasHeaderBefore = false;
+
       for (let c = 0; c < cells.length; c++) {
         const cell = cells[c];
-        if (!cell || isHeaderCell(cell)) continue;
+        if (!cell) continue;
+
+        if (isHeaderCell(cell)) {
+          colHasHeaderAbove[c] = true;
+          rowHasHeaderBefore = true;
+          continue;
+        }
 
         // An aria-hidden data cell isn't exposed to AT either, so it has
         // no need for an accessible header association.
@@ -147,8 +181,11 @@ function runInPage(ctx) {
         const headersAttr = trim(cell.getAttribute('headers'));
         if (headersAttr) continue;
 
-        if (hasColumnHeaderAbove(r, c)) continue;
-        if (hasRowHeaderBefore(r, c)) continue;
+        // An empty cell holds no data to associate with a header.
+        if (isEmptyCell(cell)) continue;
+
+        if (colHasHeaderAbove[c]) continue;
+        if (rowHasHeaderBefore) continue;
 
         occurrences.push(
           helpers.reportOccurrence(cell, {