accented 0.0.0-20250404114312 → 0.0.0-20250618181418

package/src/utils/supports-anchor-positioning.ts

@@ -1,7 +1,7 @@
 type WindowWithCSS = Window & {
-  CSS: typeof CSS
-}
+  CSS: typeof CSS;
+};
 
-export default function supportsAnchorPositioning(win: WindowWithCSS) {
+export function supportsAnchorPositioning(win: WindowWithCSS) {
   return win.CSS.supports('anchor-name: --foo') && win.CSS.supports('position-anchor: --foo');
 }

package/src/utils/transform-violations.test.ts

@@ -1,6 +1,6 @@
 import assert from 'node:assert/strict';
-import {suite, test} from 'node:test';
-import transformViolations from './transform-violations';
+import { suite, test } from 'node:test';
+import { transformViolations } from './transform-violations';
 
 import type { AxeResults } from 'axe-core';
 type Violation = AxeResults['violations'][number];
@@ -12,7 +12,7 @@ const commonViolationProps1: Omit<Violation, 'nodes'> = {
   helpUrl: 'http://example.com',
   description: 'description1',
   tags: [],
-  impact: 'serious'
+  impact: 'serious',
 };
 
 const commonViolationProps2: Omit<Violation, 'nodes'> = {
@@ -21,51 +21,51 @@ const commonViolationProps2: Omit<Violation, 'nodes'> = {
   helpUrl: 'http://example.com',
   description: 'description2',
   tags: [],
-  impact: 'serious'
+  impact: 'serious',
 };
 
-const getRootNode = (): Node => ({} as Node);
+const getRootNode = (): Node => ({}) as Node;
 
 // @ts-expect-error element is not HTMLElement
-const element1: HTMLElement = {getRootNode};
+const element1: HTMLElement = { getRootNode };
 // @ts-expect-error element is not HTMLElement
-const element2: HTMLElement = {getRootNode};
+const element2: HTMLElement = { getRootNode };
 // @ts-expect-error element is not HTMLElement
-const element3: HTMLElement = {getRootNode};
+const element3: HTMLElement = { getRootNode };
 
 const commonNodeProps = {
   html: '<div></div>',
   any: [],
   all: [],
-  none: []
+  none: [],
 };
 
 const node1: Node = {
   ...commonNodeProps,
   element: element1,
   target: ['div'],
-  failureSummary: 'summary1'
+  failureSummary: 'summary1',
 };
 
 const node2: Node = {
   ...commonNodeProps,
   element: element2,
   target: ['div'],
-  failureSummary: 'summary2'
+  failureSummary: 'summary2',
 };
 
 const node3: Node = {
   ...commonNodeProps,
   element: element3,
   target: ['div'],
-  failureSummary: 'summary3'
+  failureSummary: 'summary3',
 };
 
 suite('transformViolations', () => {
   test('one violation, one element', () => {
     const violation: Violation = {
       ...commonViolationProps1,
-      nodes: [node1]
+      nodes: [node1],
     };
     const elementsWithIssues = transformViolations([violation], 'accented');
     assert.equal(elementsWithIssues.length, 1);
@@ -78,15 +78,17 @@ suite('transformViolations', () => {
   test('two violations, two elements each', () => {
     const violation1: Violation = {
       ...commonViolationProps1,
-      nodes: [node1, node2]
+      nodes: [node1, node2],
     };
     const violation2: Violation = {
       ...commonViolationProps2,
-      nodes: [node1, node3]
+      nodes: [node1, node3],
     };
     const elementsWithIssues = transformViolations([violation1, violation2], 'accented');
     assert.equal(elementsWithIssues.length, 3);
-    const elementWithTwoIssues = elementsWithIssues.find(elementWithIssues => elementWithIssues.element === element1);
+    const elementWithTwoIssues = elementsWithIssues.find(
+      (elementWithIssues) => elementWithIssues.element === element1,
+    );
     assert.equal(elementWithTwoIssues?.issues.length, 2);
   });
 
@@ -96,11 +98,11 @@ suite('transformViolations', () => {
       element: element1,
       // A target array whose length is > 1 signifies an element in an iframe
       target: ['iframe', 'div'],
-      failureSummary: 'summary1'
+      failureSummary: 'summary1',
     };
     const violation: Violation = {
       ...commonViolationProps1,
-      nodes: [node]
+      nodes: [node],
     };
 
     const elementsWithIssues = transformViolations([violation], 'accented');
@@ -113,11 +115,11 @@ suite('transformViolations', () => {
       element: element1,
       // A target that contains an array within the outer array signifies an element in shadow DOM
       target: [['div', 'div']],
-      failureSummary: 'summary1'
+      failureSummary: 'summary1',
     };
     const violation: Violation = {
       ...commonViolationProps1,
-      nodes: [node]
+      nodes: [node],
     };
 
     const elementsWithIssues = transformViolations([violation], 'accented');

package/src/utils/transform-violations.ts

@@ -1,5 +1,5 @@
 import type { AxeResults, ImpactValue } from 'axe-core';
-import type { Issue, ElementWithIssues } from '../types';
+import type { ElementWithIssues, Issue } from '../types.ts';
 
 // This is a list of axe-core violations (their ids) that may be flagged by axe-core
 // as false positives if an Accented trigger is a descendant of the element with the issue.
@@ -10,12 +10,14 @@ const violationsAffectedByAccentedTriggers = [
   'label-content-name-mismatch',
   'list',
   'nested-interactive',
-  'scrollable-region-focusable' // The Accented trigger might make the content grow such that scrolling is required.
+  'scrollable-region-focusable', // The Accented trigger might make the content grow such that scrolling is required.
 ];
 
 function maybeCausedByAccented(violationId: string, element: HTMLElement, name: string) {
-  return violationsAffectedByAccentedTriggers.includes(violationId)
-    && Boolean(element.querySelector(`${name}-trigger`));
+  return (
+    violationsAffectedByAccentedTriggers.includes(violationId) &&
+    Boolean(element.querySelector(`${name}-trigger`))
+  );
 }
 
 function impactCompare(a: ImpactValue, b: ImpactValue) {
@@ -23,7 +25,7 @@ function impactCompare(a: ImpactValue, b: ImpactValue) {
   return impactOrder.indexOf(a) - impactOrder.indexOf(b);
 }
 
-export default function transformViolations(violations: typeof AxeResults.violations, name: string) {
+export function transformViolations(violations: typeof AxeResults.violations, name: string) {
   const elementsWithIssues: Array<ElementWithIssues> = [];
 
   for (const violation of violations) {
@@ -44,17 +46,19 @@ export default function transformViolations(violations: typeof AxeResults.violat
           title: violation.help,
           description: node.failureSummary ?? violation.description,
           url: violation.helpUrl,
-          impact: violation.impact ?? null
+          impact: violation.impact ?? null,
         };
-        const existingElementIndex = elementsWithIssues.findIndex(elementWithIssues => elementWithIssues.element === element);
-        if (existingElementIndex === -1) {
+        const existingElement = elementsWithIssues.find(
+          (elementWithIssues) => elementWithIssues.element === element,
+        );
+        if (existingElement === undefined) {
           elementsWithIssues.push({
             element,
             rootNode: element.getRootNode(),
-            issues: [issue]
+            issues: [issue],
           });
         } else {
-          elementsWithIssues[existingElementIndex]!.issues.push(issue);
+          existingElement.issues.push(issue);
         }
       }
     }

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,41 +15,43 @@ const win: Window & { CSS: typeof CSS } = {
     // @ts-expect-error the return value is of incorrect type.
     createElement: () => ({
       style: {
-        setProperty: () => {}
+        setProperty: () => {},
       },
-      dataset: {}
-    })
+      dataset: {},
+    }),
+    contains: () => true,
   },
   // @ts-expect-error we're missing a lot of properties
   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 = {};
@@ -60,7 +62,7 @@ const position = signal({
   left: 0,
   width: 100,
   top: 0,
-  height: 100
+  height: 100,
 });
 
 const visible = signal(true);
@@ -72,7 +74,7 @@ const commonNodeProps = {
   any: [],
   all: [],
   none: [],
-  target: ['div']
+  target: ['div'],
 };
 
 const node1: AxeNode = {
@@ -95,53 +97,58 @@ 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: [],
 };
 
 suite('updateElementsWithIssues', () => {
@@ -151,26 +158,34 @@ suite('updateElementsWithIssues', () => {
         id: 1,
         element: element1,
         rootNode,
+        skipRender: false,
         position,
         visible,
         trigger,
         anchorNameValue: 'none',
         scrollableAncestors,
-        issues: signal([issue1])
+        issues: signal([issue1]),
       },
       {
         id: 2,
         element: element2,
         rootNode,
+        skipRender: false,
         position,
         visible,
         trigger,
         anchorNameValue: 'none',
         scrollableAncestors,
-        issues: signal([issue2])
-      }
+        issues: signal([issue2]),
+      },
     ]);
-    updateElementsWithIssues(extendedElementsWithIssues, [violation1, violation2], win, 'accented');
+    updateElementsWithIssues({
+      extendedElementsWithIssues,
+      scanContext,
+      violations: [violation1, violation2],
+      win,
+      name: 'accented',
+    });
     assert.equal(extendedElementsWithIssues.value.length, 2);
     assert.equal(extendedElementsWithIssues.value[0]?.element, element1);
     assert.equal(extendedElementsWithIssues.value[0]?.issues.value.length, 1);
@@ -184,26 +199,34 @@ suite('updateElementsWithIssues', () => {
         id: 1,
         element: element1,
         rootNode,
+        skipRender: false,
         position,
         visible,
         trigger,
         anchorNameValue: 'none',
         scrollableAncestors,
-        issues: signal([issue1])
+        issues: signal([issue1]),
       },
       {
         id: 2,
         element: element2,
         rootNode,
+        skipRender: false,
         position,
         visible,
         trigger,
         anchorNameValue: 'none',
         scrollableAncestors,
-        issues: signal([issue2])
-      }
+        issues: signal([issue2]),
+      },
     ]);
-    updateElementsWithIssues(extendedElementsWithIssues, [violation1, violation2, violation3], win, 'accented');
+    updateElementsWithIssues({
+      extendedElementsWithIssues,
+      scanContext,
+      violations: [violation1, violation2, violation3],
+      win,
+      name: 'accented',
+    });
     assert.equal(extendedElementsWithIssues.value.length, 2);
     assert.equal(extendedElementsWithIssues.value[0]?.element, element1);
     assert.equal(extendedElementsWithIssues.value[0]?.issues.value.length, 1);
@@ -217,26 +240,34 @@ suite('updateElementsWithIssues', () => {
         id: 1,
         element: element1,
         rootNode,
+        skipRender: false,
         position,
         visible,
         trigger,
         anchorNameValue: 'none',
         scrollableAncestors,
-        issues: signal([issue1])
+        issues: signal([issue1]),
       },
       {
         id: 2,
         element: element2,
         rootNode,
+        skipRender: false,
         position,
         visible,
         trigger,
         anchorNameValue: 'none',
         scrollableAncestors,
-        issues: signal([issue2, issue3])
-      }
+        issues: signal([issue2, issue3]),
+      },
     ]);
-    updateElementsWithIssues(extendedElementsWithIssues, [violation1, violation2], win, 'accented');
+    updateElementsWithIssues({
+      extendedElementsWithIssues,
+      scanContext,
+      violations: [violation1, violation2],
+      win,
+      name: 'accented',
+    });
     assert.equal(extendedElementsWithIssues.value.length, 2);
     assert.equal(extendedElementsWithIssues.value[0]?.element, element1);
     assert.equal(extendedElementsWithIssues.value[0]?.issues.value.length, 1);
@@ -250,15 +281,22 @@ suite('updateElementsWithIssues', () => {
         id: 1,
         element: element1,
         rootNode,
+        skipRender: false,
         position,
         visible,
         trigger,
         anchorNameValue: 'none',
         scrollableAncestors,
-        issues: signal([issue1])
-      }
+        issues: signal([issue1]),
+      },
     ]);
-    updateElementsWithIssues(extendedElementsWithIssues, [violation1, violation2], win, 'accented');
+    updateElementsWithIssues({
+      extendedElementsWithIssues,
+      scanContext,
+      violations: [violation1, violation2],
+      win,
+      name: 'accented',
+    });
     assert.equal(extendedElementsWithIssues.value.length, 2);
     assert.equal(extendedElementsWithIssues.value[0]?.element, element1);
     assert.equal(extendedElementsWithIssues.value[0]?.issues.value.length, 1);
@@ -272,15 +310,22 @@ suite('updateElementsWithIssues', () => {
         id: 1,
         element: element1,
         rootNode,
+        skipRender: false,
         position,
         visible,
         trigger,
         anchorNameValue: 'none',
         scrollableAncestors,
-        issues: signal([issue1])
-      }
+        issues: signal([issue1]),
+      },
     ]);
-    updateElementsWithIssues(extendedElementsWithIssues, [violation1, violation4], win, 'accented');
+    updateElementsWithIssues({
+      extendedElementsWithIssues,
+      scanContext,
+      violations: [violation1, violation4],
+      win,
+      name: 'accented',
+    });
     assert.equal(extendedElementsWithIssues.value.length, 1);
     assert.equal(extendedElementsWithIssues.value[0]?.element, element1);
   });
@@ -291,26 +336,34 @@ suite('updateElementsWithIssues', () => {
         id: 1,
         element: element1,
         rootNode,
+        skipRender: false,
         position,
         visible,
         trigger,
         anchorNameValue: 'none',
         scrollableAncestors,
-        issues: signal([issue1])
+        issues: signal([issue1]),
       },
       {
         id: 2,
         element: element2,
         rootNode,
+        skipRender: false,
         position,
         visible,
         trigger,
         anchorNameValue: 'none',
         scrollableAncestors,
-        issues: signal([issue2])
-      }
+        issues: signal([issue2]),
+      },
     ]);
-    updateElementsWithIssues(extendedElementsWithIssues, [violation1], win, 'accented');
+    updateElementsWithIssues({
+      extendedElementsWithIssues,
+      scanContext,
+      violations: [violation1],
+      win,
+      name: 'accented',
+    });
     assert.equal(extendedElementsWithIssues.value.length, 1);
     assert.equal(extendedElementsWithIssues.value[0]?.element, element1);
     assert.equal(extendedElementsWithIssues.value[0]?.issues.value.length, 1);