accented 1.2.5 → 1.3.0

package/src/utils/update-elements-with-issues.test.ts

@@ -77,6 +77,11 @@ const node3: AxeNode = {
   element: element3,
 };
 
+const htmlNode: AxeNode = {
+  ...commonNodeProps,
+  element: document.documentElement,
+};
+
 const commonViolationProps = {
   help: 'help',
   helpUrl: 'http://example.com',
@@ -109,6 +114,18 @@ const violation4: Violation = {
   nodes: [node3],
 };
 
+const headingViolation: Violation = {
+  ...commonViolationProps,
+  id: 'page-has-heading-one',
+  nodes: [htmlNode],
+};
+
+const langViolation: Violation = {
+  ...commonViolationProps,
+  id: 'html-has-lang',
+  nodes: [htmlNode],
+};
+
 const commonIssueProps = {
   title: 'help',
   description: 'description',
@@ -131,43 +148,56 @@ const issue3: Issue = {
   ...commonIssueProps,
 };
 
-const scanContext = {
+const headingIssue: Issue = {
+  id: 'page-has-heading-one',
+  ...commonIssueProps,
+};
+
+const langIssue: Issue = {
+  id: 'html-has-lang',
+  ...commonIssueProps,
+};
+
+const fullDocumentContext = {
   include: [document],
   exclude: [],
 };
 
+const narrowContext = {
+  include: [element1],
+  exclude: [],
+};
+
+function createElementsWithIssues(
+  items: Array<{ id: number; element: HTMLElement; issues: Array<Issue> }>,
+): Signal<Array<ExtendedElementWithIssues>> {
+  return signal(
+    items.map(({ id, element, issues }) => ({
+      id,
+      element,
+      rootNode,
+      skipRender: false,
+      position,
+      visible,
+      trigger,
+      anchorNameValue: 'none',
+      scrollableAncestors,
+      issues: signal(issues),
+    })),
+  );
+}
+
 suite('updateElementsWithIssues', () => {
   test('no changes', () => {
-    const extendedElementsWithIssues: Signal<Array<ExtendedElementWithIssues>> = signal([
-      {
-        id: 1,
-        element: element1,
-        rootNode,
-        skipRender: false,
-        position,
-        visible,
-        trigger,
-        anchorNameValue: 'none',
-        scrollableAncestors,
-        issues: signal([issue1]),
-      },
-      {
-        id: 2,
-        element: element2,
-        rootNode,
-        skipRender: false,
-        position,
-        visible,
-        trigger,
-        anchorNameValue: 'none',
-        scrollableAncestors,
-        issues: signal([issue2]),
-      },
+    const extendedElementsWithIssues = createElementsWithIssues([
+      { id: 1, element: element1, issues: [issue1] },
+      { id: 2, element: element2, issues: [issue2] },
     ]);
     updateElementsWithIssues({
       extendedElementsWithIssues,
-      scanContext,
-      violations: [violation1, violation2],
+      limitedContext: fullDocumentContext,
+      limitedContextViolations: [violation1, violation2],
+      fullContextViolations: [],
       name: 'accented',
     });
     assert.equal(extendedElementsWithIssues.value.length, 2);
@@ -178,36 +208,15 @@ suite('updateElementsWithIssues', () => {
   });
 
   test('one issue added', () => {
-    const extendedElementsWithIssues: Signal<Array<ExtendedElementWithIssues>> = signal([
-      {
-        id: 1,
-        element: element1,
-        rootNode,
-        skipRender: false,
-        position,
-        visible,
-        trigger,
-        anchorNameValue: 'none',
-        scrollableAncestors,
-        issues: signal([issue1]),
-      },
-      {
-        id: 2,
-        element: element2,
-        rootNode,
-        skipRender: false,
-        position,
-        visible,
-        trigger,
-        anchorNameValue: 'none',
-        scrollableAncestors,
-        issues: signal([issue2]),
-      },
+    const extendedElementsWithIssues = createElementsWithIssues([
+      { id: 1, element: element1, issues: [issue1] },
+      { id: 2, element: element2, issues: [issue2] },
     ]);
     updateElementsWithIssues({
       extendedElementsWithIssues,
-      scanContext,
-      violations: [violation1, violation2, violation3],
+      limitedContext: fullDocumentContext,
+      limitedContextViolations: [violation1, violation2, violation3],
+      fullContextViolations: [],
       name: 'accented',
     });
     assert.equal(extendedElementsWithIssues.value.length, 2);
@@ -218,36 +227,15 @@ suite('updateElementsWithIssues', () => {
   });
 
   test('one issue removed', () => {
-    const extendedElementsWithIssues: Signal<Array<ExtendedElementWithIssues>> = signal([
-      {
-        id: 1,
-        element: element1,
-        rootNode,
-        skipRender: false,
-        position,
-        visible,
-        trigger,
-        anchorNameValue: 'none',
-        scrollableAncestors,
-        issues: signal([issue1]),
-      },
-      {
-        id: 2,
-        element: element2,
-        rootNode,
-        skipRender: false,
-        position,
-        visible,
-        trigger,
-        anchorNameValue: 'none',
-        scrollableAncestors,
-        issues: signal([issue2, issue3]),
-      },
+    const extendedElementsWithIssues = createElementsWithIssues([
+      { id: 1, element: element1, issues: [issue1] },
+      { id: 2, element: element2, issues: [issue2, issue3] },
     ]);
     updateElementsWithIssues({
       extendedElementsWithIssues,
-      scanContext,
-      violations: [violation1, violation2],
+      limitedContext: fullDocumentContext,
+      limitedContextViolations: [violation1, violation2],
+      fullContextViolations: [],
       name: 'accented',
     });
     assert.equal(extendedElementsWithIssues.value.length, 2);
@@ -258,24 +246,14 @@ suite('updateElementsWithIssues', () => {
   });
 
   test('one element added', () => {
-    const extendedElementsWithIssues: Signal<Array<ExtendedElementWithIssues>> = signal([
-      {
-        id: 1,
-        element: element1,
-        rootNode,
-        skipRender: false,
-        position,
-        visible,
-        trigger,
-        anchorNameValue: 'none',
-        scrollableAncestors,
-        issues: signal([issue1]),
-      },
+    const extendedElementsWithIssues = createElementsWithIssues([
+      { id: 1, element: element1, issues: [issue1] },
     ]);
     updateElementsWithIssues({
       extendedElementsWithIssues,
-      scanContext,
-      violations: [violation1, violation2],
+      limitedContext: fullDocumentContext,
+      limitedContextViolations: [violation1, violation2],
+      fullContextViolations: [],
       name: 'accented',
     });
     assert.equal(extendedElementsWithIssues.value.length, 2);
@@ -286,24 +264,14 @@ suite('updateElementsWithIssues', () => {
   });
 
   test('one disconnected element added', () => {
-    const extendedElementsWithIssues: Signal<Array<ExtendedElementWithIssues>> = signal([
-      {
-        id: 1,
-        element: element1,
-        rootNode,
-        skipRender: false,
-        position,
-        visible,
-        trigger,
-        anchorNameValue: 'none',
-        scrollableAncestors,
-        issues: signal([issue1]),
-      },
+    const extendedElementsWithIssues = createElementsWithIssues([
+      { id: 1, element: element1, issues: [issue1] },
     ]);
     updateElementsWithIssues({
       extendedElementsWithIssues,
-      scanContext,
-      violations: [violation1, violation4],
+      limitedContext: fullDocumentContext,
+      limitedContextViolations: [violation1, violation4],
+      fullContextViolations: [],
       name: 'accented',
     });
     assert.equal(extendedElementsWithIssues.value.length, 1);
@@ -311,40 +279,156 @@ suite('updateElementsWithIssues', () => {
   });
 
   test('one element removed', () => {
-    const extendedElementsWithIssues: Signal<Array<ExtendedElementWithIssues>> = signal([
-      {
-        id: 1,
-        element: element1,
-        rootNode,
-        skipRender: false,
-        position,
-        visible,
-        trigger,
-        anchorNameValue: 'none',
-        scrollableAncestors,
-        issues: signal([issue1]),
-      },
-      {
-        id: 2,
-        element: element2,
-        rootNode,
-        skipRender: false,
-        position,
-        visible,
-        trigger,
-        anchorNameValue: 'none',
-        scrollableAncestors,
-        issues: signal([issue2]),
-      },
+    const extendedElementsWithIssues = createElementsWithIssues([
+      { id: 1, element: element1, issues: [issue1] },
+      { id: 2, element: element2, issues: [issue2] },
     ]);
     updateElementsWithIssues({
       extendedElementsWithIssues,
-      scanContext,
-      violations: [violation1],
+      limitedContext: fullDocumentContext,
+      limitedContextViolations: [violation1],
+      fullContextViolations: [],
       name: 'accented',
     });
     assert.equal(extendedElementsWithIssues.value.length, 1);
     assert.equal(extendedElementsWithIssues.value[0]?.element, element1);
     assert.equal(extendedElementsWithIssues.value[0]?.issues.value.length, 1);
   });
+
+  test('strips descendant-dependent issue from element outside limited context when full context no longer reports it', () => {
+    const extendedElementsWithIssues = createElementsWithIssues([
+      { id: 1, element: document.documentElement, issues: [headingIssue] },
+    ]);
+    updateElementsWithIssues({
+      extendedElementsWithIssues,
+      limitedContext: narrowContext,
+      limitedContextViolations: [],
+      fullContextViolations: [],
+      name: 'accented',
+    });
+    assert.equal(extendedElementsWithIssues.value.length, 0);
+  });
+
+  test('keeps descendant-dependent issue on element outside limited context when full context still reports it', () => {
+    const extendedElementsWithIssues = createElementsWithIssues([
+      { id: 1, element: document.documentElement, issues: [headingIssue] },
+    ]);
+    updateElementsWithIssues({
+      extendedElementsWithIssues,
+      limitedContext: narrowContext,
+      limitedContextViolations: [],
+      fullContextViolations: [headingViolation],
+      name: 'accented',
+    });
+    assert.equal(extendedElementsWithIssues.value.length, 1);
+    assert.equal(extendedElementsWithIssues.value[0]?.element, document.documentElement);
+    assert.equal(extendedElementsWithIssues.value[0]?.issues.value.length, 1);
+    assert.equal(extendedElementsWithIssues.value[0]?.issues.value[0]?.id, 'page-has-heading-one');
+  });
+
+  test('keeps non-descendant-dependent issue on element outside limited context', () => {
+    const extendedElementsWithIssues = createElementsWithIssues([
+      { id: 1, element: document.documentElement, issues: [langIssue] },
+    ]);
+    updateElementsWithIssues({
+      extendedElementsWithIssues,
+      limitedContext: narrowContext,
+      limitedContextViolations: [],
+      fullContextViolations: [],
+      name: 'accented',
+    });
+    assert.equal(extendedElementsWithIssues.value.length, 1);
+    assert.equal(extendedElementsWithIssues.value[0]?.element, document.documentElement);
+    assert.equal(extendedElementsWithIssues.value[0]?.issues.value.length, 1);
+    assert.equal(extendedElementsWithIssues.value[0]?.issues.value[0]?.id, 'html-has-lang');
+  });
+
+  test('adds a new element reported only by full context violations', () => {
+    const extendedElementsWithIssues = createElementsWithIssues([]);
+    updateElementsWithIssues({
+      extendedElementsWithIssues,
+      limitedContext: narrowContext,
+      limitedContextViolations: [],
+      fullContextViolations: [headingViolation],
+      name: 'accented',
+    });
+    assert.equal(extendedElementsWithIssues.value.length, 1);
+    assert.equal(extendedElementsWithIssues.value[0]?.element, document.documentElement);
+    assert.equal(extendedElementsWithIssues.value[0]?.issues.value.length, 1);
+    assert.equal(extendedElementsWithIssues.value[0]?.issues.value[0]?.id, 'page-has-heading-one');
+  });
+
+  test('adds a new element with merged issues from limited and full context violations', () => {
+    const extendedElementsWithIssues = createElementsWithIssues([]);
+    updateElementsWithIssues({
+      extendedElementsWithIssues,
+      limitedContext: fullDocumentContext,
+      limitedContextViolations: [langViolation],
+      fullContextViolations: [headingViolation],
+      name: 'accented',
+    });
+    assert.equal(extendedElementsWithIssues.value.length, 1);
+    assert.equal(extendedElementsWithIssues.value[0]?.element, document.documentElement);
+    assert.deepEqual(
+      extendedElementsWithIssues.value[0]?.issues.value.map((issue) => issue.id),
+      ['html-has-lang', 'page-has-heading-one'],
+    );
+  });
+
+  test('merges limited and full context violations onto an existing element', () => {
+    const extendedElementsWithIssues = createElementsWithIssues([
+      { id: 1, element: document.documentElement, issues: [langIssue] },
+    ]);
+    updateElementsWithIssues({
+      extendedElementsWithIssues,
+      limitedContext: fullDocumentContext,
+      limitedContextViolations: [langViolation],
+      fullContextViolations: [headingViolation],
+      name: 'accented',
+    });
+    assert.equal(extendedElementsWithIssues.value.length, 1);
+    assert.equal(extendedElementsWithIssues.value[0]?.element, document.documentElement);
+    assert.deepEqual(
+      extendedElementsWithIssues.value[0]?.issues.value.map((issue) => issue.id),
+      ['html-has-lang', 'page-has-heading-one'],
+    );
+  });
+
+  test('strips only descendant-dependent issues from an element outside limited context with mixed issues', () => {
+    const extendedElementsWithIssues = createElementsWithIssues([
+      { id: 1, element: document.documentElement, issues: [langIssue, headingIssue] },
+    ]);
+    updateElementsWithIssues({
+      extendedElementsWithIssues,
+      limitedContext: narrowContext,
+      limitedContextViolations: [],
+      fullContextViolations: [],
+      name: 'accented',
+    });
+    assert.equal(extendedElementsWithIssues.value.length, 1);
+    assert.equal(extendedElementsWithIssues.value[0]?.element, document.documentElement);
+    assert.deepEqual(
+      extendedElementsWithIssues.value[0]?.issues.value.map((issue) => issue.id),
+      ['html-has-lang'],
+    );
+  });
+
+  test('keeps existing issue on element outside limited context and adds a new full context issue', () => {
+    const extendedElementsWithIssues = createElementsWithIssues([
+      { id: 1, element: document.documentElement, issues: [langIssue] },
+    ]);
+    updateElementsWithIssues({
+      extendedElementsWithIssues,
+      limitedContext: narrowContext,
+      limitedContextViolations: [],
+      fullContextViolations: [headingViolation],
+      name: 'accented',
+    });
+    assert.equal(extendedElementsWithIssues.value.length, 1);
+    assert.equal(extendedElementsWithIssues.value[0]?.element, document.documentElement);
+    assert.deepEqual(
+      extendedElementsWithIssues.value[0]?.issues.value.map((issue) => issue.id),
+      ['html-has-lang', 'page-has-heading-one'],
+    );
+  });
 });

package/src/utils/update-elements-with-issues.ts

@@ -1,139 +1,108 @@
 import type { Signal } from '@preact/signals-core';
-import { batch, signal } from '@preact/signals-core';
+import { batch } from '@preact/signals-core';
 import type { AxeResults } from 'axe-core';
-import type { AccentedDialog } from '../elements/accented-dialog.ts';
-import type { AccentedTrigger } from '../elements/accented-trigger.ts';
-import type { ExtendedElementWithIssues, ScanContext } from '../types.ts';
+import { descendantDependentRules } from '../constants.js';
+import type {
+  BaseElementWithIssues,
+  ElementWithIssues,
+  ExtendedElementWithIssues,
+  Issue,
+  ScanContext,
+} from '../types.ts';
 import { areElementsWithIssuesEqual } from './are-elements-with-issues-equal.js';
 import { areIssueSetsEqual } from './are-issue-sets-equal.js';
-import { isSvgElement } from './dom-helpers.js';
-import { getElementPosition } from './get-element-position.js';
-import { getParent } from './get-parent.js';
-import { getScrollableAncestors } from './get-scrollable-ancestors.js';
+import { createExtendedElementWithIssues } from './create-extended-element-with-issues.js';
 import { isNodeInScanContext } from './is-node-in-scan-context.js';
-import { supportsAnchorPositioning } from './supports-anchor-positioning.js';
 import { transformViolations } from './transform-violations.js';
 
-function shouldSkipRender(element: Element): boolean {
-  // Skip rendering if the element is inside an SVG:
-  // https://github.com/pomerantsev/accented/issues/62
-  const parent = getParent(element);
-  const isInsideSvg = Boolean(parent && isSvgElement(parent));
-
-  // Some issues, such as meta-viewport, are on <head> descendants,
-  // but since <head> is never rendered, we don't want to output anything
-  // for those in the DOM.
-  // We're not anticipating the use of shadow DOM in <head>,
-  // so the use of .closest() should be fine.
-  const isInsideHead = element.closest('head') !== null;
-
-  return isInsideSvg || isInsideHead;
+function getIssuesForElement(
+  element: BaseElementWithIssues,
+  list: Array<ElementWithIssues>,
+): Array<Issue> {
+  return list.find((entry) => areElementsWithIssuesEqual(entry, element))?.issues ?? [];
 }
 
-let count = 0;
+function mergeLimitedContextAndFullContextViolations(
+  elementsFromLimitedContext: Array<ElementWithIssues>,
+  elementsFromFullContext: Array<ElementWithIssues>,
+): Array<ElementWithIssues> {
+  const fromLimitedWithFullIssuesMerged = elementsFromLimitedContext.map((limited) => {
+    const fullMatch = elementsFromFullContext.find((full) =>
+      areElementsWithIssuesEqual(full, limited),
+    );
+    return fullMatch ? { ...limited, issues: [...limited.issues, ...fullMatch.issues] } : limited;
+  });
+  const onlyInFullContext = elementsFromFullContext.filter(
+    (full) =>
+      !elementsFromLimitedContext.some((limited) => areElementsWithIssuesEqual(limited, full)),
+  );
+  return [...fromLimitedWithFullIssuesMerged, ...onlyInFullContext];
+}
 
 export function updateElementsWithIssues({
   extendedElementsWithIssues,
-  scanContext,
-  violations,
+  limitedContext,
+  limitedContextViolations,
+  fullContextViolations,
   name,
 }: {
   extendedElementsWithIssues: Signal<Array<ExtendedElementWithIssues>>;
-  scanContext: ScanContext;
-  violations: typeof AxeResults.violations;
+  limitedContext: ScanContext;
+  limitedContextViolations: AxeResults['violations'];
+  fullContextViolations: AxeResults['violations'];
   name: string;
 }) {
-  const updatedElementsWithIssues = transformViolations(violations, name);
+  const updatedElementsFromLimitedContext = transformViolations(limitedContextViolations, name);
+  const updatedElementsFromFullContext = transformViolations(fullContextViolations, name);
+
+  const allUpdatedElements = mergeLimitedContextAndFullContextViolations(
+    updatedElementsFromLimitedContext,
+    updatedElementsFromFullContext,
+  );
 
   batch(() => {
-    for (const updatedElementWithIssues of updatedElementsWithIssues) {
-      const existingElementIndex = extendedElementsWithIssues.value.findIndex(
-        (extendedElementWithIssues) =>
-          areElementsWithIssuesEqual(extendedElementWithIssues, updatedElementWithIssues),
-      );
-      if (
-        existingElementIndex > -1 &&
-        extendedElementsWithIssues.value[existingElementIndex] &&
-        !areIssueSetsEqual(
-          extendedElementsWithIssues.value[existingElementIndex].issues.value,
-          updatedElementWithIssues.issues,
-        )
-      ) {
-        extendedElementsWithIssues.value[existingElementIndex].issues.value =
-          updatedElementWithIssues.issues;
+    for (const existing of extendedElementsWithIssues.value) {
+      // If the element is inside the limited context, axe just rescanned
+      // it — replace its issues with whatever was reported. If it's outside, keep its
+      // existing issues, except descendant-dependent ones, which may have changed due
+      // to mutations elsewhere; those get repopulated from the full-context scan below.
+      const newLimitedContextIssues = isNodeInScanContext(existing.element, limitedContext)
+        ? getIssuesForElement(existing, updatedElementsFromLimitedContext)
+        : existing.issues.value.filter((issue) => !descendantDependentRules.has(issue.id));
+
+      const newFullContextIssues = getIssuesForElement(existing, updatedElementsFromFullContext);
+
+      const newIssues = [...newLimitedContextIssues, ...newFullContextIssues];
+
+      if (!areIssueSetsEqual(existing.issues.value, newIssues)) {
+        existing.issues.value = newIssues;
       }
     }
 
-    const addedElementsWithIssues = updatedElementsWithIssues.filter((updatedElementWithIssues) => {
-      return !extendedElementsWithIssues.value.some((extendedElementWithIssues) =>
-        areElementsWithIssuesEqual(extendedElementWithIssues, updatedElementWithIssues),
-      );
-    });
+    const addedElementsWithIssues = allUpdatedElements.filter(
+      (updated) =>
+        updated.element.isConnected &&
+        !extendedElementsWithIssues.value.some((existing) =>
+          areElementsWithIssuesEqual(existing, updated),
+        ),
+    );
 
-    // Only consider an element to be removed in two cases:
-    // 1. It has been removed from the DOM.
-    // 2. It is within the scan context, but not among updatedElementsWithIssues.
     const removedElementsWithIssues = extendedElementsWithIssues.value.filter(
-      (extendedElementWithIssues) => {
-        const isConnected = extendedElementWithIssues.element.isConnected;
-        const hasNoMoreIssues =
-          isNodeInScanContext(extendedElementWithIssues.element, scanContext) &&
-          !updatedElementsWithIssues.some((updatedElementWithIssues) =>
-            areElementsWithIssuesEqual(updatedElementWithIssues, extendedElementWithIssues),
-          );
-        return !isConnected || hasNoMoreIssues;
-      },
+      (existing) => !existing.element.isConnected || existing.issues.value.length === 0,
     );
 
+    // Only rebuild the outer signal when set membership changes; per-element issue
+    // updates were already made in the loop above.
     if (addedElementsWithIssues.length > 0 || removedElementsWithIssues.length > 0) {
       extendedElementsWithIssues.value = [...extendedElementsWithIssues.value]
-        .filter((extendedElementWithIssues) => {
-          return !removedElementsWithIssues.some((removedElementWithIssues) =>
-            areElementsWithIssuesEqual(removedElementWithIssues, extendedElementWithIssues),
-          );
-        })
+        .filter(
+          (existing) =>
+            !removedElementsWithIssues.some((removed) =>
+              areElementsWithIssuesEqual(removed, existing),
+            ),
+        )
         .concat(
-          addedElementsWithIssues
-            .filter((addedElementWithIssues) => addedElementWithIssues.element.isConnected)
-            .map((addedElementWithIssues) => {
-              const id = count++;
-              const trigger = document.createElement(`${name}-trigger`) as AccentedTrigger;
-              const elementZIndex = Number.parseInt(
-                getComputedStyle(addedElementWithIssues.element).zIndex,
-                10,
-              );
-              if (!Number.isNaN(elementZIndex)) {
-                trigger.style.setProperty('z-index', (elementZIndex + 1).toString(), 'important');
-              }
-              trigger.style.setProperty('position-anchor', `--${name}-anchor-${id}`, 'important');
-              trigger.dataset.id = id.toString();
-              const accentedDialog = document.createElement(`${name}-dialog`) as AccentedDialog;
-              trigger.dialog = accentedDialog;
-              const position = getElementPosition(addedElementWithIssues.element);
-              trigger.position = signal(position);
-              trigger.visible = signal(true);
-              trigger.element = addedElementWithIssues.element;
-              const scrollableAncestors = supportsAnchorPositioning()
-                ? new Set<HTMLElement>()
-                : getScrollableAncestors(addedElementWithIssues.element);
-              const issues = signal(addedElementWithIssues.issues);
-              accentedDialog.issues = issues;
-              accentedDialog.element = addedElementWithIssues.element;
-              return {
-                id,
-                element: addedElementWithIssues.element,
-                skipRender: shouldSkipRender(addedElementWithIssues.element),
-                rootNode: addedElementWithIssues.rootNode,
-                visible: trigger.visible,
-                position: trigger.position,
-                scrollableAncestors: signal(scrollableAncestors),
-                anchorNameValue:
-                  addedElementWithIssues.element.style.getPropertyValue('anchor-name') ||
-                  getComputedStyle(addedElementWithIssues.element).getPropertyValue('anchor-name'),
-                trigger,
-                issues,
-              };
-            }),
+          addedElementsWithIssues.map((added) => createExtendedElementWithIssues(added, name)),
         );
     }
   });