Implement the ACT label in name algorithm for 2ee8b8 (#463)

Upstream rewrote ACT rule 2ee8b8 "Visible label is part of accessible
name", growing it from 11 to 32 test cases and replacing the informal
check with a formal label in name algorithm. CI re-syncs testcases.json
from the ACT feed on every run, so every open PR started failing the
same nine cases.

Replace the case-insensitive substring test with the specified
algorithm: tokenize both sides (strip parenthesised asides, case fold,
NFKD, reduce non-letter/non-digit characters to whitespace, split into
words) and check that the label is a contiguous subsequence of the name.

Compute visible inner text per the ACT glossary, which fixes three
bugs in the old text walk: whitespace was trimmed at every recursion
level, aria-hidden descendants were excluded even though they are still
rendered, and CSS-hidden content was not excluded at all.

The ACT tests parse fixtures with DOMParser, so the document has no
browsing context and neither getComputedStyle nor stylesheets are
available. Resolve the few properties the rule needs from computed
styles when there is a view, and otherwise from <style> text plus
inline attributes.

2ee8b8 goes from 10/11 to 31/32; the remaining case needs icon font
rendering and stays skipped.

Co-authored-by: Claude Opus 5 (1M context) <noreply@anthropic.com>

Author: koddsson

README.md

@@ -11,7 +11,7 @@ The W3C [ACT implementations report](https://www.w3.org/WAI/standards-guidelines
 - **20** ACT rules pass every generated test case (W3C "consistent implementation" criterion).
 - **14** more rules pass at least one test case but not all.
 - **53 / 88** ACT rules have some scanner implementation, even if untested.
-- **296 / 843** ACT test cases (35%) are exercised against the scanner.
+- **317 / 865** ACT test cases (37%) are exercised against the scanner.
 
 | Implemented | ACT Rule                                                                                                                                         | WCAG                | axe-core rule(s)                                                          | Test cases |
 | :---------- | :----------------------------------------------------------------------------------------------------------------------------------------------- | :------------------ | :------------------------------------------------------------------------ | :--------- |
@@ -43,7 +43,7 @@ The W3C [ACT implementations report](https://www.w3.org/WAI/standards-guidelines
 | ✅          | [6cfa84](https://act-rules.github.io/rules/6cfa84) — Element with aria-hidden has no content in sequential focus navigation                      | 4.1.2               | `aria-hidden-focus`                                                       | 11 / 12    |
 | ✅          | [de46e4](https://act-rules.github.io/rules/de46e4) — Element with lang attribute has valid language tag                                          | 3.1.2               | `valid-lang`                                                              | 14 / 14    |
 | ✅          | [307n5z](https://act-rules.github.io/rules/307n5z) — Element with presentational children has no focusable content                               | 4.1.2               | `nested-interactive`                                                      | 0 / 9      |
-| ✅          | [4e8ab6](https://act-rules.github.io/rules/4e8ab6) — Element with role attribute has required states and properties                              | 1.3.1, 4.1.2        | `aria-required-attr`                                                      | 0 / 11     |
+| ✅          | [4e8ab6](https://act-rules.github.io/rules/4e8ab6) — Element with role attribute has required states and properties                              | 1.3.1, 4.1.2        | `aria-required-attr`                                                      | 0 / 12     |
 | ✅          | [36b590](https://act-rules.github.io/rules/36b590) — Error message describes invalid form field value                                            | 3.3.1               | `error-message`                                                           | 8 / 8      |
 | ❌          | [80af7b](https://act-rules.github.io/rules/80af7b) — Focusable element has no keyboard trap                                                      | 2.1.2               | —                                                                         | 0 / 12     |
 | ❌          | [ebe86a](https://act-rules.github.io/rules/ebe86a) — Focusable element has no keyboard trap via non-standard navigation                          | —                   | —                                                                         | 0 / 6      |
@@ -101,7 +101,7 @@ The W3C [ACT implementations report](https://www.w3.org/WAI/standards-guidelines
 | ❌          | [d7ba54](https://act-rules.github.io/rules/d7ba54) — Video element visual-only content has audio track alternative                               | —                   | —                                                                         | 0 / 3      |
 | ❌          | [ee13b5](https://act-rules.github.io/rules/ee13b5) — Video element visual-only content has transcript                                            | 1.2.1, 1.3.1        | —                                                                         | 0 / 6      |
 | ❌          | [fd26cf](https://act-rules.github.io/rules/fd26cf) — Video element visual-only content is media alternative for text                             | —                   | —                                                                         | 0 / 5      |
-| ✅          | [2ee8b8](https://act-rules.github.io/rules/2ee8b8) — Visible label is part of accessible name                                                    | 2.5.3               | `label-content-name-mismatch`                                             | 10 / 11    |
+| ✅          | [2ee8b8](https://act-rules.github.io/rules/2ee8b8) — Visible label is part of accessible name                                                    | 2.5.3               | `label-content-name-mismatch`                                             | 31 / 32    |
 | ❌          | [59br37](https://act-rules.github.io/rules/59br37) — Zoomed text node is not clipped with CSS overflow                                           | 1.4.4               | —                                                                         | 0 / 9      |
 
 

src/rules/label-content-name-mismatch.ts

@@ -23,11 +23,240 @@ const widgetRolesWithNameFromContent = new Set([
   "option",
   "radio",
   "rowheader",
+  "searchbox",
   "switch",
   "tab",
   "treeitem",
 ]);
 
+type StyleMap = Record<string, string>;
+
+const styledProperties = [
+  "display",
+  "visibility",
+  "opacity",
+  "clip",
+  "clip-path",
+  "width",
+  "height",
+] as const;
+
+function parseDeclarations(block: string): StyleMap {
+  const declarations: StyleMap = {};
+  for (const declaration of block.split(";")) {
+    const separator = declaration.indexOf(":");
+    if (separator === -1) continue;
+    const property = declaration.slice(0, separator).trim().toLowerCase();
+    if (
+      !styledProperties.includes(property as (typeof styledProperties)[number])
+    )
+      continue;
+    declarations[property] = declaration
+      .slice(separator + 1)
+      .replaceAll(/\s*!important\s*$/gi, "")
+      .trim()
+      .toLowerCase();
+  }
+  return declarations;
+}
+
+const documentRules = new WeakMap<
+  Document,
+  { selector: string; declarations: StyleMap }[]
+>();
+
+/**
+ * Documents produced by `DOMParser` have no browsing context, so their
+ * `<style>` elements are never turned into `CSSStyleSheet`s and
+ * `getComputedStyle` is unavailable. Parse the stylesheets by hand so the
+ * rule can still resolve the handful of properties it cares about.
+ */
+function getDocumentRules(document: Document) {
+  const cached = documentRules.get(document);
+  if (cached) return cached;
+
+  const rules: { selector: string; declarations: StyleMap }[] = [];
+  for (const styleElement of document.querySelectorAll("style")) {
+    const css = (styleElement.textContent ?? "").replaceAll(
+      /\/\*[\S\s]*?\*\//g,
+      "",
+    );
+    for (const [, selector, block] of css.matchAll(/([^{}]+){([^{}]*)}/g)) {
+      const trimmed = selector.trim();
+      if (!trimmed || trimmed.startsWith("@")) continue;
+      rules.push({ selector: trimmed, declarations: parseDeclarations(block) });
+    }
+  }
+
+  documentRules.set(document, rules);
+  return rules;
+}
+
+function matchesSelector(element: Element, selector: string): boolean {
+  try {
+    return element.matches(selector);
+  } catch {
+    return false;
+  }
+}
+
+function getStyle(element: Element): StyleMap {
+  const view = element.ownerDocument?.defaultView;
+  if (element.isConnected && view) {
+    const computed = view.getComputedStyle(element);
+    const style: StyleMap = {};
+    for (const property of styledProperties) {
+      style[property] = computed.getPropertyValue(property);
+    }
+    return style;
+  }
+
+  const style: StyleMap = {};
+  for (const { selector, declarations } of getDocumentRules(
+    element.ownerDocument,
+  )) {
+    if (matchesSelector(element, selector)) Object.assign(style, declarations);
+  }
+  Object.assign(style, parseDeclarations(element.getAttribute("style") ?? ""));
+  return style;
+}
+
+const neverRenderedTags = new Set([
+  "head",
+  "link",
+  "meta",
+  "noscript",
+  "script",
+  "style",
+  "template",
+  "title",
+]);
+
+const blockLevelTags = new Set([
+  "address",
+  "article",
+  "aside",
+  "blockquote",
+  "body",
+  "details",
+  "dd",
+  "dialog",
+  "div",
+  "dl",
+  "dt",
+  "fieldset",
+  "figcaption",
+  "figure",
+  "footer",
+  "form",
+  "h1",
+  "h2",
+  "h3",
+  "h4",
+  "h5",
+  "h6",
+  "header",
+  "hgroup",
+  "hr",
+  "main",
+  "nav",
+  "ol",
+  "p",
+  "pre",
+  "section",
+  "ul",
+]);
+
+function getDisplay(element: Element): string {
+  const declared = getStyle(element).display;
+  if (declared) return declared;
+
+  const tag = element.tagName.toLowerCase();
+  if (tag === "td" || tag === "th") return "table-cell";
+  if (tag === "tr") return "table-row";
+  if (tag === "caption") return "table-caption";
+  if (tag === "table") return "table";
+  if (tag === "li") return "list-item";
+  if (blockLevelTags.has(tag)) return "block";
+  return "inline";
+}
+
+function hasBlockOuterDisplay(display: string): boolean {
+  return (
+    display.startsWith("block") ||
+    display.startsWith("flow-root") ||
+    display === "list-item" ||
+    display === "table" ||
+    display === "flex" ||
+    display === "grid"
+  );
+}
+
+function isTinyLength(value: string | undefined): boolean {
+  if (!value) return false;
+  const length = Number.parseFloat(value);
+  return Number.isFinite(length) && length <= 1;
+}
+
+/**
+ * Detects the "visually hidden" pattern — a clipped box collapsed to a pixel —
+ * which renders nothing on screen even though it stays in the accessibility
+ * tree.
+ */
+function isClippedOutOfView(style: StyleMap): boolean {
+  const clipPath = style["clip-path"];
+  const clip = style.clip;
+  const clipped =
+    (clipPath && clipPath !== "none") || (clip && clip !== "auto");
+  if (!clipped) return false;
+  return isTinyLength(style.width) || isTinyLength(style.height);
+}
+
+/**
+ * The "visible inner text" of a node, per the ACT glossary. It differs from
+ * both `textContent` (which includes content hidden with CSS) and `innerText`
+ * (which collapses whitespace-only inline elements).
+ *
+ * Note that `aria-hidden` content is deliberately *included*: it is removed
+ * from the accessibility tree but still rendered on screen, so it forms part
+ * of the visible label.
+ */
+function getVisibleInnerText(node: Node): string {
+  if (node.nodeType === Node.TEXT_NODE) {
+    return (node.textContent ?? "").replaceAll(/\s+/g, " ");
+  }
+
+  if (node.nodeType !== Node.ELEMENT_NODE) {
+    return getChildrenVisibleInnerText(node);
+  }
+
+  const element = node as Element;
+  const tag = element.tagName.toLowerCase();
+  if (neverRenderedTags.has(tag)) return "";
+  if (tag === "br") return "\n";
+
+  const style = getStyle(element);
+  const display = getDisplay(element);
+  if (display === "none") return "";
+  if (style.visibility && style.visibility !== "visible") return " ";
+  if (style.opacity && Number.parseFloat(style.opacity) === 0) return " ";
+  if (isClippedOutOfView(style)) return " ";
+
+  const inner = getChildrenVisibleInnerText(element);
+  if (display === "table-cell" || display === "table-row") return ` ${inner} `;
+  if (display === "table-caption" || hasBlockOuterDisplay(display))
+    return `\n${inner}\n`;
+  return inner;
+}
+
+function getChildrenVisibleInnerText(node: Node): string {
+  let result = "";
+  for (const child of node.childNodes) {
+    result += getVisibleInnerText(child);
+  }
+  return result;
+}
+
 /**
  * Map from HTML element tag names to their implicit ARIA roles
  * (only for widget roles that name from content).
@@ -57,39 +286,6 @@ function getEffectiveRole(element: Element): string | null {
   return getImplicitRole(element);
 }
 
-/**
- * Get the visible text content of an element, considering only direct
- * text node descendants (not alt text of images, etc.).
- */
-function getVisibleText(element: Element): string {
-  let text = "";
-  for (const node of element.childNodes) {
-    if (node.nodeType === Node.TEXT_NODE) {
-      text += node.textContent || "";
-    } else if (node.nodeType === Node.ELEMENT_NODE) {
-      const child = node as Element;
-      // Skip hidden elements
-      if (child.getAttribute("aria-hidden") === "true") continue;
-      // Skip img elements (their alt text is not "visible text")
-      if (child.tagName.toLowerCase() === "img") continue;
-      // Recurse into child elements for their text nodes
-      text += getVisibleText(child);
-    }
-  }
-  // Normalize whitespace
-  return text.trim().replaceAll(/\s+/g, " ");
-}
-
-/**
- * Check if the visible text is a single character, which the ACT rule
- * considers potentially symbolic/iconic and therefore excluded.
- */
-function isSingleCharacter(text: string): boolean {
-  // After normalization, check if it's a single unicode character
-  const chars = [...text];
-  return chars.length === 1;
-}
-
 /**
  * Get the accessible name of an element (from aria-label or aria-labelledby)
  */
@@ -124,18 +320,57 @@ function getAccessibleName(element: Element): string | null {
 }
 
 /**
- * Check if the visible text is a substring of the accessible name (case-insensitive)
+ * Tokenize a string as described by the ACT "label in name algorithm":
+ * drop parenthesised asides, case fold and normalise, reduce everything that
+ * is neither a letter nor a digit to whitespace, then split into words.
  */
-function isTextPartOfAccessibleName(
-  visibleText: string,
-  accessibleName: string,
+function tokenize(value: string): string[] {
+  const withoutParentheticals = value.replaceAll(/\([^()]*\)/g, " ");
+  const folded = withoutParentheticals.toLowerCase().normalize("NFKD");
+
+  let letters = "";
+  for (const character of folded) {
+    letters += /[\p{L}\p{N}]/u.test(character) ? character : " ";
+  }
+
+  return letters.split(/\s+/).filter(Boolean);
+}
+
+/**
+ * Whether `needle` appears as a run of consecutive entries in `haystack`.
+ */
+function isContiguousSubsequence(
+  needle: string[],
+  haystack: string[],
 ): boolean {
-  if (!visibleText || !accessibleName) return true;
+  if (needle.length === 0) return true;
+  if (needle.length > haystack.length) return false;
 
-  const normalizedVisible = visibleText.toLowerCase();
-  const normalizedAccessible = accessibleName.toLowerCase();
+  for (let start = 0; start <= haystack.length - needle.length; start++) {
+    let matches = true;
+    for (const [offset, element] of needle.entries()) {
+      if (haystack[start + offset] !== element) {
+        matches = false;
+        break;
+      }
+    }
+    if (matches) return true;
+  }
 
-  return normalizedAccessible.includes(normalizedVisible);
+  return false;
+}
+
+/**
+ * A label made of a single letter — "X" for "close", say — is a character
+ * expressing non-text content, which the algorithm ignores. A single digit is
+ * ordinary text and is not excluded.
+ */
+function expressesNonTextContent(tokens: string[]): boolean {
+  return (
+    tokens.length === 1 &&
+    [...tokens[0]].length === 1 &&
+    /\p{L}/u.test(tokens[0])
+  );
 }
 
 export default function (element: Element): AccessibilityError[] {
@@ -165,19 +400,14 @@ export default function (element: Element): AccessibilityError[] {
     const role = getEffectiveRole(el);
     if (!role || !widgetRolesWithNameFromContent.has(role)) continue;
 
-    const visibleText = getVisibleText(el);
     const accessibleName = getAccessibleName(el);
+    if (!accessibleName) continue;
 
-    // Only check if:
-    // 1. Element has visible text content
-    // 2. Element has an accessible name from aria-label or aria-labelledby
-    if (!visibleText || !accessibleName) continue;
-
-    // Skip single-character visible text (treated as potentially symbolic)
-    if (isSingleCharacter(visibleText)) continue;
+    const label = tokenize(getVisibleInnerText(el));
+    if (label.length === 0) continue;
+    if (expressesNonTextContent(label)) continue;
 
-    // Check if visible text is part of accessible name
-    if (!isTextPartOfAccessibleName(visibleText, accessibleName)) {
+    if (!isContiguousSubsequence(label, tokenize(accessibleName))) {
       errors.push({
         id,
         element: el,