accented 0.0.0-20250424114613 → 0.0.0-20250701143712

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

@@ -1,9 +1,9 @@
-import {suite, test} from 'node:test';
 import assert from 'node:assert/strict';
+import { suite, test } from 'node:test';
 import type { Signal } from '@preact/signals-core';
 import { signal } from '@preact/signals-core';
 import type { ExtendedElementWithIssues, Issue } from '../types';
-import updateElementsWithIssues from './update-elements-with-issues';
+import { updateElementsWithIssues } from './update-elements-with-issues';
 
 import type { AxeResults, ImpactValue } from 'axe-core';
 import type { AccentedTrigger } from '../elements/accented-trigger';
@@ -15,9 +15,9 @@ const win: Window & { CSS: typeof CSS } = {
     // @ts-expect-error the return value is of incorrect type.
     createElement: () => ({
       style: {
-        setProperty: () => {}
+        setProperty: () => {},
       },
-      dataset: {}
+      dataset: {},
     }),
     contains: () => true,
   },
@@ -25,33 +25,33 @@ const win: Window & { CSS: typeof CSS } = {
   getComputedStyle: () => ({
     zIndex: '',
     direction: 'ltr',
-    getPropertyValue: () => 'none'
+    getPropertyValue: () => 'none',
   }),
   // @ts-expect-error we're missing a lot of properties
   CSS: {
-    supports: () => true
-  }
-}
+    supports: () => true,
+  },
+};
 
 const getBoundingClientRect = () => ({});
 
-const getRootNode = (): Node => ({} as Node);
+const getRootNode = (): Node => ({}) as Node;
 
 const baseElement = {
   getBoundingClientRect,
   getRootNode,
   style: {
-    getPropertyValue: () => ''
+    getPropertyValue: () => '',
   },
   closest: () => null,
-}
+};
 
 // @ts-expect-error element is not HTMLElement
-const element1: HTMLElement = {...baseElement, isConnected: true};
+const element1: HTMLElement = { ...baseElement, isConnected: true };
 // @ts-expect-error element is not HTMLElement
-const element2: HTMLElement = {...baseElement, isConnected: true};
+const element2: HTMLElement = { ...baseElement, isConnected: true };
 // @ts-expect-error element is not HTMLElement
-const element3: HTMLElement = {...baseElement, isConnected: false};
+const element3: HTMLElement = { ...baseElement, isConnected: false };
 
 // @ts-expect-error rootNode is not Node
 const rootNode: Node = {};
@@ -62,7 +62,7 @@ const position = signal({
   left: 0,
   width: 100,
   top: 0,
-  height: 100
+  height: 100,
 });
 
 const visible = signal(true);
@@ -74,7 +74,7 @@ const commonNodeProps = {
   any: [],
   all: [],
   none: [],
-  target: ['div']
+  target: ['div'],
 };
 
 const node1: AxeNode = {
@@ -97,59 +97,59 @@ const commonViolationProps = {
   helpUrl: 'http://example.com',
   description: 'description',
   tags: [],
-  impact: 'serious' as ImpactValue
+  impact: 'serious' as ImpactValue,
 };
 
 const violation1: Violation = {
   ...commonViolationProps,
   id: 'id1',
-  nodes: [node1]
+  nodes: [node1],
 };
 
 const violation2: Violation = {
   ...commonViolationProps,
   id: 'id2',
-  nodes: [node2]
+  nodes: [node2],
 };
 
 const violation3: Violation = {
   ...commonViolationProps,
   id: 'id3',
-  nodes: [node2]
+  nodes: [node2],
 };
 
 const violation4: Violation = {
   ...commonViolationProps,
   id: 'id4',
-  nodes: [node3]
+  nodes: [node3],
 };
 
 const commonIssueProps = {
   title: 'help',
   description: 'description',
   url: 'http://example.com',
-  impact: 'serious'
+  impact: 'serious',
 } as const;
 
 const issue1: Issue = {
   id: 'id1',
-  ...commonIssueProps
+  ...commonIssueProps,
 };
 
 const issue2: Issue = {
   id: 'id2',
-  ...commonIssueProps
+  ...commonIssueProps,
 };
 
 const issue3: Issue = {
   id: 'id3',
-  ...commonIssueProps
+  ...commonIssueProps,
 };
 
 const scanContext = {
   include: [win.document],
-  exclude: []
-}
+  exclude: [],
+};
 
 suite('updateElementsWithIssues', () => {
   test('no changes', () => {
@@ -164,7 +164,7 @@ suite('updateElementsWithIssues', () => {
         trigger,
         anchorNameValue: 'none',
         scrollableAncestors,
-        issues: signal([issue1])
+        issues: signal([issue1]),
       },
       {
         id: 2,
@@ -176,15 +176,15 @@ suite('updateElementsWithIssues', () => {
         trigger,
         anchorNameValue: 'none',
         scrollableAncestors,
-        issues: signal([issue2])
-      }
+        issues: signal([issue2]),
+      },
     ]);
     updateElementsWithIssues({
       extendedElementsWithIssues,
       scanContext,
       violations: [violation1, violation2],
       win,
-      name: 'accented'
+      name: 'accented',
     });
     assert.equal(extendedElementsWithIssues.value.length, 2);
     assert.equal(extendedElementsWithIssues.value[0]?.element, element1);
@@ -205,7 +205,7 @@ suite('updateElementsWithIssues', () => {
         trigger,
         anchorNameValue: 'none',
         scrollableAncestors,
-        issues: signal([issue1])
+        issues: signal([issue1]),
       },
       {
         id: 2,
@@ -217,15 +217,15 @@ suite('updateElementsWithIssues', () => {
         trigger,
         anchorNameValue: 'none',
         scrollableAncestors,
-        issues: signal([issue2])
-      }
+        issues: signal([issue2]),
+      },
     ]);
     updateElementsWithIssues({
       extendedElementsWithIssues,
       scanContext,
       violations: [violation1, violation2, violation3],
       win,
-      name: 'accented'
+      name: 'accented',
     });
     assert.equal(extendedElementsWithIssues.value.length, 2);
     assert.equal(extendedElementsWithIssues.value[0]?.element, element1);
@@ -246,7 +246,7 @@ suite('updateElementsWithIssues', () => {
         trigger,
         anchorNameValue: 'none',
         scrollableAncestors,
-        issues: signal([issue1])
+        issues: signal([issue1]),
       },
       {
         id: 2,
@@ -258,15 +258,15 @@ suite('updateElementsWithIssues', () => {
         trigger,
         anchorNameValue: 'none',
         scrollableAncestors,
-        issues: signal([issue2, issue3])
-      }
+        issues: signal([issue2, issue3]),
+      },
     ]);
     updateElementsWithIssues({
       extendedElementsWithIssues,
       scanContext,
       violations: [violation1, violation2],
       win,
-      name: 'accented'
+      name: 'accented',
     });
     assert.equal(extendedElementsWithIssues.value.length, 2);
     assert.equal(extendedElementsWithIssues.value[0]?.element, element1);
@@ -287,15 +287,15 @@ suite('updateElementsWithIssues', () => {
         trigger,
         anchorNameValue: 'none',
         scrollableAncestors,
-        issues: signal([issue1])
-      }
+        issues: signal([issue1]),
+      },
     ]);
     updateElementsWithIssues({
       extendedElementsWithIssues,
       scanContext,
       violations: [violation1, violation2],
       win,
-      name: 'accented'
+      name: 'accented',
     });
     assert.equal(extendedElementsWithIssues.value.length, 2);
     assert.equal(extendedElementsWithIssues.value[0]?.element, element1);
@@ -316,15 +316,15 @@ suite('updateElementsWithIssues', () => {
         trigger,
         anchorNameValue: 'none',
         scrollableAncestors,
-        issues: signal([issue1])
-      }
+        issues: signal([issue1]),
+      },
     ]);
     updateElementsWithIssues({
       extendedElementsWithIssues,
       scanContext,
       violations: [violation1, violation4],
       win,
-      name: 'accented'
+      name: 'accented',
     });
     assert.equal(extendedElementsWithIssues.value.length, 1);
     assert.equal(extendedElementsWithIssues.value[0]?.element, element1);
@@ -342,7 +342,7 @@ suite('updateElementsWithIssues', () => {
         trigger,
         anchorNameValue: 'none',
         scrollableAncestors,
-        issues: signal([issue1])
+        issues: signal([issue1]),
       },
       {
         id: 2,
@@ -354,15 +354,15 @@ suite('updateElementsWithIssues', () => {
         trigger,
         anchorNameValue: 'none',
         scrollableAncestors,
-        issues: signal([issue2])
-      }
+        issues: signal([issue2]),
+      },
     ]);
     updateElementsWithIssues({
       extendedElementsWithIssues,
       scanContext,
       violations: [violation1],
       win,
-      name: 'accented'
+      name: 'accented',
     });
     assert.equal(extendedElementsWithIssues.value.length, 1);
     assert.equal(extendedElementsWithIssues.value[0]?.element, element1);

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

@@ -1,21 +1,20 @@
-import type { AxeResults } from 'axe-core';
 import type { Signal } from '@preact/signals-core';
 import { batch, signal } from '@preact/signals-core';
-import type { ExtendedElementWithIssues, ScanContext } from '../types';
-import transformViolations from './transform-violations.js';
-import areElementsWithIssuesEqual from './are-elements-with-issues-equal.js';
-import areIssueSetsEqual from './are-issue-sets-equal.js';
-import isNodeInScanContext from './is-node-in-scan-context.js';
-import type { AccentedTrigger } from '../elements/accented-trigger';
-import type { AccentedDialog } from '../elements/accented-dialog';
-import getElementPosition from './get-element-position.js';
-import getScrollableAncestors from './get-scrollable-ancestors.js';
-import supportsAnchorPositioning from './supports-anchor-positioning.js';
+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 { areElementsWithIssuesEqual } from './are-elements-with-issues-equal.js';
+import { areIssueSetsEqual } from './are-issue-sets-equal.js';
 import { isSvgElement } from './dom-helpers.js';
-import getParent from './get-parent.js';
+import { getElementPosition } from './get-element-position.js';
+import { getParent } from './get-parent.js';
+import { getScrollableAncestors } from './get-scrollable-ancestors.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);
@@ -33,86 +32,112 @@ function shouldSkipRender(element: Element): boolean {
 
 let count = 0;
 
-export default function updateElementsWithIssues({
+export function updateElementsWithIssues({
   extendedElementsWithIssues,
   scanContext,
   violations,
   win,
-  name
+  name,
 }: {
-  extendedElementsWithIssues: Signal<Array<ExtendedElementWithIssues>>,
-  scanContext: ScanContext,
-  violations: typeof AxeResults.violations,
-  win: Window & { CSS: typeof CSS },
-  name: string
+  extendedElementsWithIssues: Signal<Array<ExtendedElementWithIssues>>;
+  scanContext: ScanContext;
+  violations: typeof AxeResults.violations;
+  win: Window & { CSS: typeof CSS };
+  name: string;
 }) {
   const updatedElementsWithIssues = transformViolations(violations, name);
 
   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;
+      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;
       }
     }
 
-    const addedElementsWithIssues = updatedElementsWithIssues.filter(updatedElementWithIssues => {
-      return !extendedElementsWithIssues.value.some(extendedElementWithIssues => areElementsWithIssuesEqual(extendedElementWithIssues, updatedElementWithIssues));
+    const addedElementsWithIssues = updatedElementsWithIssues.filter((updatedElementWithIssues) => {
+      return !extendedElementsWithIssues.value.some((extendedElementWithIssues) =>
+        areElementsWithIssuesEqual(extendedElementWithIssues, updatedElementWithIssues),
+      );
     });
 
     // 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;
-    });
+    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;
+      },
+    );
 
     if (addedElementsWithIssues.length > 0 || removedElementsWithIssues.length > 0) {
       extendedElementsWithIssues.value = [...extendedElementsWithIssues.value]
-        .filter(extendedElementWithIssues => {
-          return !removedElementsWithIssues.some(removedElementWithIssues => areElementsWithIssuesEqual(removedElementWithIssues, extendedElementWithIssues));
+        .filter((extendedElementWithIssues) => {
+          return !removedElementsWithIssues.some((removedElementWithIssues) =>
+            areElementsWithIssuesEqual(removedElementWithIssues, extendedElementWithIssues),
+          );
         })
-        .concat(addedElementsWithIssues
-          .filter(addedElementWithIssues => addedElementWithIssues.element.isConnected)
-          .map(addedElementWithIssues => {
-            const id = count++;
-            const trigger = win.document.createElement(`${name}-trigger`) as AccentedTrigger;
-            const elementZIndex = parseInt(win.getComputedStyle(addedElementWithIssues.element).zIndex, 10);
-            if (!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 = win.document.createElement(`${name}-dialog`) as AccentedDialog;
-            trigger.dialog = accentedDialog;
-            const position = getElementPosition(addedElementWithIssues.element, win);
-            trigger.position = signal(position);
-            trigger.visible = signal(true);
-            trigger.element = addedElementWithIssues.element;
-            const scrollableAncestors = supportsAnchorPositioning(win) ?
-              new Set<HTMLElement>() :
-              getScrollableAncestors(addedElementWithIssues.element, win);
-            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')
-                || win.getComputedStyle(addedElementWithIssues.element).getPropertyValue('anchor-name'),
-              trigger,
-              issues
-            };
-          })
+        .concat(
+          addedElementsWithIssues
+            .filter((addedElementWithIssues) => addedElementWithIssues.element.isConnected)
+            .map((addedElementWithIssues) => {
+              const id = count++;
+              const trigger = win.document.createElement(`${name}-trigger`) as AccentedTrigger;
+              const elementZIndex = Number.parseInt(
+                win.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 = win.document.createElement(`${name}-dialog`) as AccentedDialog;
+              trigger.dialog = accentedDialog;
+              const position = getElementPosition(addedElementWithIssues.element, win);
+              trigger.position = signal(position);
+              trigger.visible = signal(true);
+              trigger.element = addedElementWithIssues.element;
+              const scrollableAncestors = supportsAnchorPositioning(win)
+                ? new Set<HTMLElement>()
+                : getScrollableAncestors(addedElementWithIssues.element, win);
+              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') ||
+                  win
+                    .getComputedStyle(addedElementWithIssues.element)
+                    .getPropertyValue('anchor-name'),
+                trigger,
+                issues,
+              };
+            }),
         );
     }
   });