accented 0.0.0-20250424114613 → 0.0.0-20250701143712

package/src/utils/get-scan-context.test.ts

@@ -1,7 +1,7 @@
-import { JSDOM } from 'jsdom';
 import assert from 'node:assert/strict';
 import { suite, test } from 'node:test';
-import getScanContext from './get-scan-context';
+import { JSDOM } from 'jsdom';
+import { getScanContext } from './get-scan-context';
 
 suite('getScanContext', () => {
   test('when context doesn’t overlap with nodes, the result is empty', () => {
@@ -13,7 +13,7 @@ suite('getScanContext', () => {
 
     assert.deepEqual(scanContext, {
       include: [],
-      exclude: []
+      exclude: [],
     });
   });
 
@@ -27,7 +27,7 @@ suite('getScanContext', () => {
 
     assert.deepEqual(scanContext, {
       include: [contextNode],
-      exclude: []
+      exclude: [],
     });
   });
 
@@ -44,13 +44,16 @@ suite('getScanContext', () => {
     const { document } = dom.window;
     global.document = document;
     const mutatedNode = document.querySelector('#mutated-node')!;
-    const scanContext = getScanContext([mutatedNode], {include: ['.include'], exclude: ['.exclude']});
+    const scanContext = getScanContext([mutatedNode], {
+      include: ['.include'],
+      exclude: ['.exclude'],
+    });
     const innerExclude = document.querySelector('#inner-exclude')!;
     const innerInclude = document.querySelector('#inner-include')!;
 
     assert.deepEqual(scanContext, {
       include: [mutatedNode, innerInclude],
-      exclude: [innerExclude]
+      exclude: [innerExclude],
     });
   });
 
@@ -67,13 +70,16 @@ suite('getScanContext', () => {
     const { document } = dom.window;
     global.document = document;
     const mutatedNode = document.querySelector('#mutated-node')!;
-    const scanContext = getScanContext([mutatedNode], {include: ['.include'], exclude: ['.exclude']});
+    const scanContext = getScanContext([mutatedNode], {
+      include: ['.include'],
+      exclude: ['.exclude'],
+    });
     const innerExclude = document.querySelector('#inner-exclude')!;
     const innerInclude = document.querySelector('#inner-include')!;
 
     assert.deepEqual(scanContext, {
       include: [innerInclude],
-      exclude: [innerExclude]
+      exclude: [innerExclude],
     });
   });
 });

package/src/utils/get-scan-context.ts

@@ -1,21 +1,18 @@
-import type { Context, ScanContext } from '../types';
-import contains from './contains.js';
+import type { Context, ScanContext } from '../types.ts';
+import { contains } from './contains.js';
 import { deduplicateNodes } from './deduplicate-nodes.js';
-import isNodeInScanContext from './is-node-in-scan-context.js';
-import normalizeContext from './normalize-context.js';
+import { isNodeInScanContext } from './is-node-in-scan-context.js';
+import { normalizeContext } from './normalize-context.js';
 
-export default function getScanContext(nodes: Array<Node>, context: Context): ScanContext {
-  const {
-    include: contextInclude,
-    exclude: contextExclude
-  } = normalizeContext(context);
+export function getScanContext(nodes: Array<Node>, context: Context): ScanContext {
+  const { include: contextInclude, exclude: contextExclude } = normalizeContext(context);
 
   // Filter only nodes that are included by context (see isNodeInContext above).
-  const nodesInContext = nodes.filter(node =>
+  const nodesInContext = nodes.filter((node) =>
     isNodeInScanContext(node, {
       include: contextInclude,
-      exclude: contextExclude
-    })
+      exclude: contextExclude,
+    }),
   );
 
   const include: Array<Node> = [];
@@ -26,14 +23,14 @@ export default function getScanContext(nodes: Array<Node>, context: Context): Sc
 
   // Now add any included and excluded context nodes that are contained by any of the original nodes.
   for (const node of nodes) {
-    const includeDescendants = contextInclude.filter(item => contains(node, item));
+    const includeDescendants = contextInclude.filter((item) => contains(node, item));
     include.push(...includeDescendants);
-    const excludeDescendants = contextExclude.filter(item => contains(node, item));
+    const excludeDescendants = contextExclude.filter((item) => contains(node, item));
     exclude.push(...excludeDescendants);
   }
 
   return {
     include: deduplicateNodes(include),
-    exclude: deduplicateNodes(exclude)
+    exclude: deduplicateNodes(exclude),
   };
 }

package/src/utils/get-scrollable-ancestors.ts

@@ -1,19 +1,22 @@
-import getParent from './get-parent.js';
+import { getParent } from './get-parent.js';
 
 const scrollableOverflowValues = new Set(['auto', 'scroll', 'hidden']);
 
-export default function getScrollableAncestors (element: Element, win: Window) {
+export function getScrollableAncestors(element: Element, win: Window) {
   let currentElement: Element | null = element;
-  let scrollableAncestors = new Set<Element>();
+  const scrollableAncestors = new Set<Element>();
   while (true) {
     currentElement = getParent(currentElement);
     if (!currentElement) {
       break;
     }
     const computedStyle = win.getComputedStyle(currentElement);
-    if (scrollableOverflowValues.has(computedStyle.overflowX) || scrollableOverflowValues.has(computedStyle.overflowY)) {
+    if (
+      scrollableOverflowValues.has(computedStyle.overflowX) ||
+      scrollableOverflowValues.has(computedStyle.overflowY)
+    ) {
       scrollableAncestors.add(currentElement);
     }
   }
   return scrollableAncestors;
-};
+}

package/src/utils/is-node-in-scan-context.test.ts

@@ -1,7 +1,7 @@
-import { JSDOM } from 'jsdom';
 import assert from 'node:assert/strict';
-import {suite, test} from 'node:test';
-import isNodeInScanContext from './is-node-in-scan-context';
+import { suite, test } from 'node:test';
+import { JSDOM } from 'jsdom';
+import { isNodeInScanContext } from './is-node-in-scan-context';
 
 suite('isNodeInScanContext', () => {
   test('doesn’t include an element if scan context is empty', () => {

package/src/utils/is-node-in-scan-context.ts

@@ -1,8 +1,8 @@
 /* Adapted from https://github.com/dequelabs/axe-core/blob/fd6239bfc97ebc904044f93f68d7e49137f744ad/lib/core/utils/is-node-in-context.js */
 
-import type { ScanContext } from '../types';
-import contains from './contains.js';
-import ensureNonEmpty from './ensure-non-empty.js';
+import type { ScanContext } from '../types.ts';
+import { contains } from './contains.js';
+import { ensureNonEmpty } from './ensure-non-empty.js';
 
 function getDeepest(nodes: [Node, ...Node[]]): Node {
   let deepest = nodes[0];
@@ -14,12 +14,12 @@ function getDeepest(nodes: [Node, ...Node[]]): Node {
   return deepest;
 }
 
-export default function isNodeInScanContext(node: Node, { include, exclude }: ScanContext): boolean {
-  const filteredInclude = include.filter(includeNode => contains(includeNode, node));
+export function isNodeInScanContext(node: Node, { include, exclude }: ScanContext): boolean {
+  const filteredInclude = include.filter((includeNode) => contains(includeNode, node));
   if (filteredInclude.length === 0) {
     return false;
   }
-  const filteredExclude = exclude.filter(excludeNode => contains(excludeNode, node));
+  const filteredExclude = exclude.filter((excludeNode) => contains(excludeNode, node));
   if (filteredExclude.length === 0) {
     return true;
   }

package/src/utils/is-non-empty.ts

@@ -0,0 +1,3 @@
+export function isNonEmpty<T>(arr: T[]): arr is [T, ...T[]] {
+  return arr.length > 0;
+}

package/src/utils/normalize-context.test.ts

@@ -1,7 +1,7 @@
-import { JSDOM } from 'jsdom';
 import assert from 'node:assert/strict';
 import { suite, test } from 'node:test';
-import normalizeContext from './normalize-context';
+import { JSDOM } from 'jsdom';
+import { normalizeContext } from './normalize-context';
 
 suite('normalizeContext', () => {
   test('when document is passed, only document is returned in include', () => {
@@ -11,7 +11,7 @@ suite('normalizeContext', () => {
 
     assert.deepEqual(normalizedContext, {
       include: [document],
-      exclude: []
+      exclude: [],
     });
   });
 
@@ -23,7 +23,7 @@ suite('normalizeContext', () => {
 
     assert.deepEqual(normalizedContext, {
       include: [element],
-      exclude: []
+      exclude: [],
     });
   });
 
@@ -41,7 +41,7 @@ suite('normalizeContext', () => {
     assert.equal(matchingElements.length, 2);
     assert.deepEqual(normalizedContext, {
       include: matchingElements,
-      exclude: []
+      exclude: [],
     });
   });
 
@@ -57,7 +57,7 @@ suite('normalizeContext', () => {
 
     assert.deepEqual(normalizedContext, {
       include: [],
-      exclude: []
+      exclude: [],
     });
   });
 
@@ -74,7 +74,7 @@ suite('normalizeContext', () => {
     assert.equal(matchingElements.length, 2);
     assert.deepEqual(normalizedContext, {
       include: Array.from(matchingElements),
-      exclude: []
+      exclude: [],
     });
   });
 
@@ -94,12 +94,12 @@ suite('normalizeContext', () => {
       shadowRoot.appendChild(matchingElement);
       matchingElements.push(matchingElement);
     }
-    const normalizedContext = normalizeContext({fromShadowDom: ['.host', '.matches']});
+    const normalizedContext = normalizeContext({ fromShadowDom: ['.host', '.matches'] });
 
     assert.equal(matchingElements.length, 2);
     assert.deepEqual(normalizedContext, {
       include: matchingElements,
-      exclude: []
+      exclude: [],
     });
   });
 });

package/src/utils/normalize-context.ts

@@ -1,13 +1,20 @@
-import type { Context, ContextProp, Selector, ScanContext } from '../types';
-import { isNode, isNodeList } from './dom-helpers.js';
+import type { Context, ContextProp, ScanContext, Selector } from '../types.ts';
 import { deduplicateNodes } from './deduplicate-nodes.js';
+import { isNode, isNodeList } from './dom-helpers.js';
+import { isNonEmpty } from './is-non-empty.js';
 
-function recursiveSelectAll(selectors: Array<string>, root: Document | ShadowRoot): Array<Node> {
-  const nodesOnCurrentLevel = root.querySelectorAll(selectors[0]!);
+function recursiveSelectAll(
+  selectors: [string, ...string[]],
+  root: Document | ShadowRoot,
+): Array<Node> {
+  const nodesOnCurrentLevel = root.querySelectorAll(selectors[0]);
   if (selectors.length === 1) {
     return Array.from(nodesOnCurrentLevel);
   }
   const restSelectors: Array<string> = selectors.slice(1);
+  if (!isNonEmpty(restSelectors)) {
+    throw new Error('Error: the restSelectors array must not be empty.');
+  }
   const selected = [];
   for (const node of nodesOnCurrentLevel) {
     if (node.shadowRoot) {
@@ -20,24 +27,24 @@ function recursiveSelectAll(selectors: Array<string>, root: Document | ShadowRoo
 function selectorToNodes(selector: Selector): Array<Node> {
   if (typeof selector === 'string') {
     return recursiveSelectAll([selector], document);
-  } else if (isNode(selector)) {
+  }
+  if (isNode(selector)) {
     return [selector];
-  } else {
-    return recursiveSelectAll(selector.fromShadowDom, document);
   }
+  return recursiveSelectAll(selector.fromShadowDom, document);
 }
 
 function contextPropToNodes(contextProp: ContextProp): Array<Node> {
   let nodes: Array<Node> = [];
   if (typeof contextProp === 'object' && (Array.isArray(contextProp) || isNodeList(contextProp))) {
-    nodes = Array.from(contextProp).map(item => selectorToNodes(item)).flat();
+    nodes = Array.from(contextProp).flatMap((item) => selectorToNodes(item));
   } else {
     nodes = selectorToNodes(contextProp);
   }
   return deduplicateNodes(nodes);
 }
 
-export default function normalizeContext(context: Context): ScanContext {
+export function normalizeContext(context: Context): ScanContext {
   let contextInclude: Array<Node> = [];
   let contextExclude: Array<Node> = [];
   if (typeof context === 'object' && ('include' in context || 'exclude' in context)) {
@@ -53,6 +60,6 @@ export default function normalizeContext(context: Context): ScanContext {
 
   return {
     include: contextInclude,
-    exclude: contextExclude
+    exclude: contextExclude,
   };
 }

package/src/utils/recalculate-positions.ts

@@ -1,11 +1,11 @@
 import { batch } from '@preact/signals-core';
+import { logAndRethrow } from '../log-and-rethrow.js';
 import { extendedElementsWithIssues } from '../state.js';
-import getElementPosition from './get-element-position.js';
-import logAndRethrow from '../log-and-rethrow.js';
+import { getElementPosition } from './get-element-position.js';
 
 let frameRequested = false;
 
-export default function recalculatePositions() {
+export function recalculatePositions() {
   if (frameRequested) {
     return;
   }
@@ -14,11 +14,11 @@ export default function recalculatePositions() {
     try {
       frameRequested = false;
       batch(() => {
-        extendedElementsWithIssues.value.forEach(({ element, position, visible }) => {
+        for (const { element, position, visible } of extendedElementsWithIssues.value) {
           if (visible.value && element.isConnected) {
             position.value = getElementPosition(element, window);
           }
-        });
+        }
       });
     } catch (error) {
       logAndRethrow(error);

package/src/utils/recalculate-scrollable-ancestors.ts

@@ -1,13 +1,13 @@
 import { batch } from '@preact/signals-core';
 import { extendedElementsWithIssues } from '../state.js';
-import getScrollableAncestors from './get-scrollable-ancestors.js';
+import { getScrollableAncestors } from './get-scrollable-ancestors.js';
 
-export default function recalculateScrollableAncestors() {
+export function recalculateScrollableAncestors() {
   batch(() => {
-    extendedElementsWithIssues.value.forEach(({ element, scrollableAncestors }) => {
+    for (const { element, scrollableAncestors } of extendedElementsWithIssues.value) {
       if (element.isConnected) {
         scrollableAncestors.value = getScrollableAncestors(element, window);
       }
-    });
+    }
   });
 }

package/src/utils/shadow-dom-aware-mutation-observer.ts

@@ -1,7 +1,7 @@
-import { isElement, isDocument, isDocumentFragment } from './dom-helpers.js';
 import { getAccentedElementNames } from '../constants.js';
+import { isDocument, isDocumentFragment, isElement } from './dom-helpers.js';
 
-export default function createShadowDOMAwareMutationObserver (name: string, callback: MutationCallback) {
+export function createShadowDOMAwareMutationObserver(name: string, callback: MutationCallback) {
   class ShadowDOMAwareMutationObserver extends MutationObserver {
     #shadowRoots = new Set();
 
@@ -10,22 +10,19 @@ export default function createShadowDOMAwareMutationObserver (name: string, call
     constructor(callback: MutationCallback) {
       super((mutations, observer) => {
         const accentedElementNames = getAccentedElementNames(name);
-        const childListMutations = mutations
-          .filter(mutation => mutation.type === 'childList')
+        const childListMutations = mutations.filter((mutation) => mutation.type === 'childList');
 
         const newElements = childListMutations
-          .map(mutation => [...mutation.addedNodes])
-          .flat()
-          .filter(node => isElement(node))
-          .filter(node => !accentedElementNames.includes(node.nodeName.toLowerCase()));
+          .flatMap((mutation) => [...mutation.addedNodes])
+          .filter((node) => isElement(node))
+          .filter((node) => !accentedElementNames.includes(node.nodeName.toLowerCase()));
 
         this.#observeShadowRoots(newElements);
 
         const removedElements = childListMutations
-          .map(mutation => [...mutation.removedNodes])
-          .flat()
-          .filter(node => isElement(node))
-          .filter(node => !accentedElementNames.includes(node.nodeName.toLowerCase()));
+          .flatMap((mutation) => [...mutation.removedNodes])
+          .filter((node) => isElement(node))
+          .filter((node) => !accentedElementNames.includes(node.nodeName.toLowerCase()));
 
         // Mutation observer has no "unobserve" method, so we're simply deleting
         // the elements from the set of shadow roots.
@@ -50,28 +47,28 @@ export default function createShadowDOMAwareMutationObserver (name: string, call
 
     #observeShadowRoots = (elements: Array<Element | Document | DocumentFragment>) => {
       const shadowRoots = elements
-        .map(element => [...element.querySelectorAll('*')])
-        .flat()
-        .filter(element => element.shadowRoot)
-        .map(element => element.shadowRoot!);
+        .flatMap((element) => [...element.querySelectorAll('*')])
+        .filter((element) => element.shadowRoot)
+        .map((element) => element.shadowRoot);
 
       for (const shadowRoot of shadowRoots) {
-        this.#shadowRoots.add(shadowRoot);
-        this.observe(shadowRoot, this.#options);
+        if (shadowRoot) {
+          this.#shadowRoots.add(shadowRoot);
+          this.observe(shadowRoot, this.#options);
+        }
       }
-    }
+    };
 
     #deleteShadowRoots = (elements: Array<Element | Document | DocumentFragment>) => {
       const shadowRoots = elements
-        .map(element => [...element.querySelectorAll('*')])
-        .flat()
-        .filter(element => element.shadowRoot)
-        .map(element => element.shadowRoot!);
+        .flatMap((element) => [...element.querySelectorAll('*')])
+        .filter((element) => element.shadowRoot)
+        .map((element) => element.shadowRoot);
 
       for (const shadowRoot of shadowRoots) {
         this.#shadowRoots.delete(shadowRoot);
       }
-    }
+    };
   }
 
   return new ShadowDOMAwareMutationObserver(callback);

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);
         }
       }
     }