accented 0.0.0-20250404114312 → 0.0.0-20250424114613

package/src/scanner.ts

@@ -1,7 +1,7 @@
 import axe from 'axe-core';
 import TaskQueue from './task-queue.js';
 import { elementsWithIssues, enabled, extendedElementsWithIssues } from './state.js';
-import type { AxeOptions, Throttle, Callback, AxeContext } from './types';
+import type { AxeOptions, Throttle, Callback, Context } from './types';
 import updateElementsWithIssues from './utils/update-elements-with-issues.js';
 import recalculatePositions from './utils/recalculate-positions.js';
 import recalculateScrollableAncestors from './utils/recalculate-scrollable-ancestors.js';
@@ -9,11 +9,12 @@ import supportsAnchorPositioning from './utils/supports-anchor-positioning.js';
 import { getAccentedElementNames, issuesUrl } from './constants.js';
 import logAndRethrow from './log-and-rethrow.js';
 import createShadowDOMAwareMutationObserver from './utils/shadow-dom-aware-mutation-observer.js';
+import getScanContext from './utils/get-scan-context.js';
 
-export default function createScanner(name: string, axeContext: AxeContext, axeOptions: AxeOptions, throttle: Required<Throttle>, callback: Callback) {
+export default function createScanner(name: string, context: Context, axeOptions: AxeOptions, throttle: Required<Throttle>, callback: Callback) {
   const axeRunningWindowProp = `__${name}_axe_running__`;
   const win: Record<string, any> = window;
-  const taskQueue = new TaskQueue<Node>(async () => {
+  const taskQueue = new TaskQueue<Node>(async (nodes) => {
     // We may see errors coming from axe-core when Accented is toggled off and on in qiuck succession,
     // which I've seen happen with hot reloading of a React application.
     // This window property serves as a circuit breaker for that particular case.
@@ -27,12 +28,12 @@ export default function createScanner(name: string, axeContext: AxeContext, axeO
 
       win[axeRunningWindowProp] = true;
 
+      const scanContext = getScanContext(nodes, context);
+
       let result;
 
       try {
-        // TODO (https://github.com/pomerantsev/accented/issues/102):
-        // only run Axe on what's changed, not on the whole axeContext
-        result = await axe.run(axeContext, {
+        result = await axe.run(scanContext, {
           elementRef: true,
           // Although axe-core can perform iframe scanning, I haven't succeeded in it,
           // and the docs suggest that the axe-core script should be explicitly included
@@ -64,7 +65,13 @@ export default function createScanner(name: string, axeContext: AxeContext, axeO
 
       performance.mark('dom-update-start');
 
-      updateElementsWithIssues(extendedElementsWithIssues, result.violations, window, name);
+      updateElementsWithIssues({
+        extendedElementsWithIssues,
+        scanContext,
+        violations: result.violations,
+        win: window,
+        name
+      });
 
       const domUpdateMeasure = performance.measure('dom-update', 'dom-update-start');
       const domUpdateDuration = Math.round(domUpdateMeasure.duration);
@@ -74,7 +81,11 @@ export default function createScanner(name: string, axeContext: AxeContext, axeO
         performance: {
           totalBlockingTime: scanDuration + domUpdateDuration,
           scan: scanDuration,
-          domUpdate: domUpdateDuration
+          domUpdate: domUpdateDuration,
+          // Assuming that the {include, exclude} shape of the context object will be used less often
+          // than other variants, we'll output just the `include` array in case nothing is excluded
+          // in the scan.
+          scanContext: scanContext.exclude.length > 0 ? scanContext : scanContext.include
         }
       });
     } catch (error) {
@@ -83,9 +94,6 @@ export default function createScanner(name: string, axeContext: AxeContext, axeO
     }
   }, throttle);
 
-  // TODO (https://github.com/pomerantsev/accented/issues/102):
-  // limit to what's in axeContext,
-  // if that's an element or array of elements (not a selector).
   taskQueue.add(document);
 
   const accentedElementNames = getAccentedElementNames(name);
@@ -128,15 +136,13 @@ export default function createScanner(name: string, axeContext: AxeContext, axeO
         return !elementsWithAccentedAttributeChanges.has(mutationRecord.target);
       });
 
-      taskQueue.addMultiple(filteredMutationList.map(mutationRecord => mutationRecord.target));
+      const nodes = filteredMutationList.map(mutationRecord => mutationRecord.target);
+      taskQueue.addMultiple(nodes);
     } catch (error) {
       logAndRethrow(error);
     }
   });
 
-  // TODO (https://github.com/pomerantsev/accented/issues/102):
-  // possibly limit the observer to what's in axeContext,
-  // if that's an element or array of elements (not a selector).
   mutationObserver.observe(document, {
     subtree: true,
     childList: true,

package/src/task-queue.ts

@@ -1,15 +1,15 @@
 import type { Throttle } from './types';
 
-type TaskCallback = () => void;
+type TaskCallback<T> = (items: Array<T>) => void;
 
 export default class TaskQueue<T> {
   #throttle: Throttle;
-  #asyncCallback: TaskCallback | null = null;
+  #asyncCallback: TaskCallback<T> | null = null;
 
   #items = new Set<T>();
   #inRunLoop = false;
 
-  constructor(asyncCallback: TaskCallback, throttle: Required<Throttle>) {
+  constructor(asyncCallback: TaskCallback<T>, throttle: Required<Throttle>) {
     this.#asyncCallback = asyncCallback;
     this.#throttle = throttle;
   }
@@ -33,10 +33,12 @@ export default class TaskQueue<T> {
       return;
     }
 
+    const items = Array.from(this.#items);
+
     this.#items.clear();
 
     if (this.#asyncCallback) {
-      await this.#asyncCallback();
+      await this.#asyncCallback(items);
     }
 
     await new Promise((resolve) => setTimeout(resolve, this.#throttle.wait));

package/src/types.ts

@@ -29,7 +29,31 @@ export type Output = {
   console?: boolean
 }
 
-export type AxeContext = axe.ElementContext;
+/**
+ * Model context type based on axe.ElementContext,
+ * excluding frame selectors (since we don't support scanning iframes).
+ */
+
+export type Selector = Exclude<axe.Selector, axe.LabelledFramesSelector>;
+
+// axe.SelectorList also can have FrameSelector elements in the array.
+// We're not allowing that.
+export type SelectorList = Array<Selector> | NodeList;
+
+// The rest of the type is structured the same as in axe-core.
+export type ContextProp = Selector | SelectorList;
+
+export type ContextObject = {
+  include: ContextProp;
+  exclude?: ContextProp;
+} | {
+  exclude: ContextProp;
+  include?: ContextProp;
+};
+
+export type Context = ContextProp | ContextObject;
+
+
 
 export const allowedAxeOptions = ['rules', 'runOnly'] as const;
 
@@ -47,11 +71,14 @@ type CallbackParams = {
    *   It’s further divided into the `scan` and `domUpdate` phases.
    * * `scan`: how long the `scan` phase took, in milliseconds.
    * * `domUpdate`: how long the `domUpdate` phase took, in milliseconds.
+   * * `scanContext`: nodes that got scanned. Either an array of nodes,
+   *   or an object with `include` and `exclude` properties (if any nodes were excluded).
    * */
   performance: {
     totalBlockingTime: number,
     scan: number,
-    domUpdate: number
+    domUpdate: number,
+    scanContext: ScanContext | Array<Node>
   }
 }
 
@@ -75,7 +102,7 @@ export type AccentedOptions = {
    *
    * Default: `document`.
    */
-  axeContext?: AxeContext,
+  context?: Context,
 
   /**
    * The `options` parameter for `axe.run()`.
@@ -150,11 +177,11 @@ export type Issue = {
 };
 
 export type BaseElementWithIssues = {
-  element: HTMLElement,
+  element: HTMLElement | SVGElement,
   rootNode: Node
 };
 
-export type ElementWithIssues = BaseElementWithIssues &{
+export type ElementWithIssues = BaseElementWithIssues & {
   issues: Array<Issue>
 };
 
@@ -163,7 +190,13 @@ export type ExtendedElementWithIssues = BaseElementWithIssues & {
   visible: Signal<boolean>,
   trigger: AccentedTrigger,
   position: Signal<Position>,
+  skipRender: boolean,
   anchorNameValue: string,
   scrollableAncestors: Signal<Set<Element>>
   id: number
 };
+
+export type ScanContext = {
+  include: Array<Node>,
+  exclude: Array<Node>
+};

package/src/utils/containing-blocks.ts

@@ -0,0 +1,57 @@
+/**
+ * Tests whether a particular combination of CSS property and value on an element
+ * makes that element a containing block.
+ * https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_display/Containing_block
+ *
+ * The function is meant to be run with properties that behave inconsistently across browsers.
+ *
+ * It's only meant to be used during initialization.
+ */
+function testContainingBlockCreation<T extends keyof CSSStyleDeclaration>(prop: T, value: CSSStyleDeclaration[T]) {
+  const container = document.createElement('div');
+  container.style[prop] = value;
+  container.style.position = 'fixed';
+  container.style.insetInlineStart = '10px';
+  container.style.insetBlockStart = '10px';
+
+  const element = document.createElement('div');
+  element.style.position = 'fixed';
+  element.style.insetInlineStart = '0';
+  element.style.insetBlockStart = '0';
+
+  container.appendChild(element);
+  document.body.appendChild(container);
+  const containerRect = container.getBoundingClientRect();
+  const elementRect = element.getBoundingClientRect();
+
+  container.remove();
+
+  return containerRect.top === elementRect.top && containerRect.left === elementRect.left;
+}
+
+// This is the set we'll use to store the properties that _may_ create containing blocks
+// (the behavior of the ones that we'll be checking is inconsistent across browsers
+// at the time of writing this comment).
+const propsAffectingContainingBlocks = new Set<keyof CSSStyleDeclaration>();
+
+export function createsContainingBlock(prop: keyof CSSStyleDeclaration) {
+  return propsAffectingContainingBlocks.has(prop);
+}
+
+export function initializeContainingBlockSupportSet() {
+  type StyleEntry<T extends keyof CSSStyleDeclaration> = {
+    [K in T]: { prop: K; value: CSSStyleDeclaration[K] }
+  }[T];
+
+  const propsToTest: Array<StyleEntry<'filter' | 'backdropFilter' | 'containerType'>> = [
+    { prop: 'filter', value: 'blur(1px)' },
+    { prop: 'backdropFilter', value: 'blur(1px)' },
+    { prop: 'containerType', value: 'size' }
+  ];
+
+  for (const { prop, value } of propsToTest) {
+    if (testContainingBlockCreation(prop, value)) {
+      propsAffectingContainingBlocks.add(prop);
+    }
+  }
+}

package/src/utils/contains.test.ts

@@ -0,0 +1,55 @@
+import { JSDOM } from 'jsdom';
+import assert from 'node:assert/strict';
+import { suite, test } from 'node:test';
+import contains from './contains';
+
+suite('contains', () => {
+  test('an element contains itself', () => {
+    const dom = new JSDOM('<div id="test"></div>');
+    const { document } = dom.window;
+    const element = document.querySelector('#test')!;
+
+    assert.equal(contains(element, element), true);
+  });
+
+  test('an element does not contain its sibling', () => {
+    const dom = new JSDOM('<div><div id="sibling1"></div><div id="sibling2"></div></div>');
+    const { document } = dom.window;
+    const sibling1 = document.querySelector('#sibling1')!;
+    const sibling2 = document.querySelector('#sibling2')!;
+
+    assert.equal(contains(sibling1, sibling2), false);
+  });
+
+  test('an element contain its descendant', () => {
+    const dom = new JSDOM('<div id="ancestor"><div id="descendant"></div></div>');
+    const { document } = dom.window;
+    const ancestor = document.querySelector('#ancestor')!;
+    const descendant = document.querySelector('#descendant')!;
+
+    assert.equal(contains(ancestor, descendant), true);
+  });
+
+  test('an element contain its descendant', () => {
+    const dom = new JSDOM('<div id="ancestor"><div id="descendant"></div></div>');
+    const { document } = dom.window;
+    const ancestor = document.querySelector('#ancestor')!;
+    const descendant = document.querySelector('#descendant')!;
+
+    assert.equal(contains(descendant, ancestor), false);
+  });
+
+  test('an element contain its descendant if the descendant is in a shadow DOM', () => {
+    const dom = new JSDOM('<div id="ancestor"><div id="host"></div></div>');
+    global.Node = dom.window.Node;
+    const { document } = dom.window;
+    const ancestor = document.querySelector('#ancestor')!;
+    const host = document.querySelector('#host')!;
+    const shadowRoot = host.attachShadow({ mode: 'open' });
+    shadowRoot.innerHTML = '<div id="descendant"></div>';
+    const descendant = shadowRoot.querySelector('#descendant')!;
+    console.log(descendant);
+
+    assert.equal(contains(ancestor, descendant), true);
+  });
+});

package/src/utils/contains.ts

@@ -0,0 +1,19 @@
+import { isDocumentFragment, isShadowRoot } from './dom-helpers.js';
+
+export default function contains(ancestor: Node, descendant: Node): boolean {
+  if (ancestor.contains(descendant)) {
+    return true;
+  }
+  let rootNode = descendant.getRootNode();
+  while (rootNode) {
+    if (!(isDocumentFragment(rootNode) && isShadowRoot(rootNode))) {
+      return false;
+    }
+    const host = rootNode.host;
+    if (ancestor.contains(host)) {
+      return true;
+    }
+    rootNode = host.getRootNode();
+  }
+  return false;
+}

package/src/utils/deduplicate-nodes.ts

@@ -0,0 +1,3 @@
+export function deduplicateNodes(nodes: Array<Node>): Array<Node> {
+  return [...new Set(nodes)];;
+}

package/src/utils/dom-helpers.ts

@@ -1,3 +1,12 @@
+export function isNode(obj: object): obj is Node {
+  return 'nodeType' in obj && typeof obj.nodeType === 'number' &&
+    'nodeName' in obj && typeof obj.nodeName === 'string';
+}
+
+export function isNodeList(obj: object): obj is NodeList {
+  return Object.prototype.toString.call(obj) === '[object NodeList]';
+}
+
 export function isElement(node: Node): node is Element {
   return typeof Node !== 'undefined' && node.nodeType === Node.ELEMENT_NODE;
 }
@@ -20,3 +29,10 @@ export function isHtmlElement(element: Element): element is HTMLElement {
   // This heuristic seems to be the most robust and fastest that I could think of.
   return element.constructor.name.startsWith('HTML');
 }
+
+export function isSvgElement(element: Element): element is SVGElement {
+  // We can't use instanceof because it may not work across contexts
+  // (such as when an element is moved from an iframe).
+  // This heuristic seems to be the most robust and fastest that I could think of.
+  return element.constructor.name.startsWith('SVG');
+}

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

@@ -0,0 +1,6 @@
+export default function ensureNonEmpty<T>(arr: T[]): [T, ...T[]] {
+  if (arr.length === 0) {
+    throw new Error("Array must not be empty");
+  }
+  return arr as [T, ...T[]];
+}

package/src/utils/get-element-position.ts

@@ -1,15 +1,23 @@
 import type { Position } from '../types';
 import { isHtmlElement } from './dom-helpers.js';
 import getParent from './get-parent.js';
+import { createsContainingBlock } from './containing-blocks.js';
 
 // https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_display/Containing_block#identifying_the_containing_block
 function isContainingBlock(element: Element, win: Window): boolean {
   const style = win.getComputedStyle(element);
-  const { transform, perspective } = style;
-  // TODO: https://github.com/pomerantsev/accented/issues/119
-  // Support other types of containing blocks
+  const { transform, perspective, contain, contentVisibility, containerType, filter, backdropFilter, willChange } = style;
+  const containItems = contain.split(' ');
+  const willChangeItems = willChange.split(/\s*,\s*/);
+
   return transform !== 'none'
-    || perspective !== 'none';
+    || perspective !== 'none'
+    || containItems.some((item) => ['layout', 'paint', 'strict', 'content'].includes(item))
+    || contentVisibility === 'auto'
+    || (createsContainingBlock('containerType') && containerType !== 'normal')
+    || (createsContainingBlock('filter') && filter !== 'none')
+    || (createsContainingBlock('backdropFilter') && backdropFilter !== 'none')
+    || willChangeItems.some((item) => ['transform', 'perspective', 'contain', 'filter', 'backdrop-filter'].includes(item));
 }
 
 function getNonInitialContainingBlock(element: Element, win: Window): Element | null {
@@ -23,10 +31,20 @@ function getNonInitialContainingBlock(element: Element, win: Window): Element |
   return null;
 }
 
+/**
+ * https://github.com/pomerantsev/accented/issues/116
+ *
+ * This calculation leads to incorrectly positioned Accented triggers when all of the following are true:
+ * * The element is an SVG element.
+ * * The element itself, or one of the element's ancestors has a scale or rotate transform.
+ * * The browser doesn't support anchor positioning.
+ */
 export default function getElementPosition(element: Element, win: Window): Position {
   const nonInitialContainingBlock = getNonInitialContainingBlock(element, win);
-  // If an element has an ancestor whose transform is not 'none',
+  // If an element has a containing block as an ancestor,
+  // and that containing block is not the <html> element (the initial containing block),
   // fixed positioning works differently.
+  // https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_display/Containing_block#effects_of_the_containing_block
   // https://achrafkassioui.com/blog/position-fixed-and-CSS-transforms/
   if (nonInitialContainingBlock) {
     if (isHtmlElement(element)) {
@@ -43,8 +61,6 @@ export default function getElementPosition(element: Element, win: Window): Posit
       }
       return { top, left, width, height };
     } else {
-      // TODO: https://github.com/pomerantsev/accented/issues/116
-      // This is half-baked. It works incorrectly with scaled / rotated elements with issues.
       const elementRect = element.getBoundingClientRect();
       const nonInitialContainingBlockRect = nonInitialContainingBlock.getBoundingClientRect();
       return {

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

@@ -0,0 +1,79 @@
+import { JSDOM } from 'jsdom';
+import assert from 'node:assert/strict';
+import { suite, test } from 'node:test';
+import getScanContext from './get-scan-context';
+
+suite('getScanContext', () => {
+  test('when context doesn’t overlap with nodes, the result is empty', () => {
+    const dom = new JSDOM('<div><div id="context"></div><div id="mutated-node"></div></div>');
+    const { document } = dom.window;
+    global.document = document;
+    const mutatedNode = document.querySelector('#mutated-node')!;
+    const scanContext = getScanContext([mutatedNode], '#context');
+
+    assert.deepEqual(scanContext, {
+      include: [],
+      exclude: []
+    });
+  });
+
+  test('when context is within the mutated node, the result is the context', () => {
+    const dom = new JSDOM('<div><div id="mutated-node"><div id="context"></div></div></div>');
+    const { document } = dom.window;
+    global.document = document;
+    const mutatedNode = document.querySelector('#mutated-node')!;
+    const scanContext = getScanContext([mutatedNode], '#context');
+    const contextNode = document.querySelector('#context')!;
+
+    assert.deepEqual(scanContext, {
+      include: [contextNode],
+      exclude: []
+    });
+  });
+
+  test('when mutated node is within context, the mutated node and the context nodes within it are correctly included / excluded', () => {
+    const dom = new JSDOM(`<div>
+      <div class="include" id="outer-include">
+        <div id="mutated-node">
+          <div class="exclude" id="inner-exclude">
+            <div class="include" id="inner-include"></div>
+          </div>
+        </div>
+      </div>
+    </div>`);
+    const { document } = dom.window;
+    global.document = document;
+    const mutatedNode = document.querySelector('#mutated-node')!;
+    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]
+    });
+  });
+
+  test('when mutated node is within exclude, context elements within it are still included', () => {
+    const dom = new JSDOM(`<div>
+      <div class="exclude" id="outer-exclude">
+        <div id="mutated-node">
+          <div class="exclude" id="inner-exclude">
+            <div class="include" id="inner-include"></div>
+          </div>
+        </div>
+      </div>
+    </div>`);
+    const { document } = dom.window;
+    global.document = document;
+    const mutatedNode = document.querySelector('#mutated-node')!;
+    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]
+    });
+  });
+});

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

@@ -0,0 +1,39 @@
+import type { Context, ScanContext } from '../types';
+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';
+
+export default 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 =>
+    isNodeInScanContext(node, {
+      include: contextInclude,
+      exclude: contextExclude
+    })
+  );
+
+  const include: Array<Node> = [];
+  const exclude: Array<Node> = [];
+
+  // Adds all nodesInContext to the include array.
+  include.push(...nodesInContext);
+
+  // 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));
+    include.push(...includeDescendants);
+    const excludeDescendants = contextExclude.filter(item => contains(node, item));
+    exclude.push(...excludeDescendants);
+  }
+
+  return {
+    include: deduplicateNodes(include),
+    exclude: deduplicateNodes(exclude)
+  };
+}

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

@@ -0,0 +1,70 @@
+import { JSDOM } from 'jsdom';
+import assert from 'node:assert/strict';
+import {suite, test} from 'node:test';
+import isNodeInScanContext from './is-node-in-scan-context';
+
+suite('isNodeInScanContext', () => {
+  test('doesn’t include an element if scan context is empty', () => {
+    const dom = new JSDOM('<div id="test"></div>');
+    const { document } = dom.window;
+    const node = document.querySelector('#test')!;
+
+    const scanContext = { include: [], exclude: [] };
+
+    assert.equal(isNodeInScanContext(node, scanContext), false);
+  });
+
+  test('includes an element whose ancestor is included', () => {
+    const dom = new JSDOM('<div id="test"></div>');
+    const { document } = dom.window;
+    const node = document.querySelector('#test')!;
+    const body = document.body;
+
+    const scanContext = { include: [body], exclude: [] };
+
+    assert.ok(isNodeInScanContext(node, scanContext));
+  });
+
+  test('does not include an element whose closest ancestor is excluded', () => {
+    const dom = new JSDOM('<div id="excluded"><div id="test"></div></div>');
+    const { document } = dom.window;
+    const node = document.querySelector('#test')!;
+    const body = document.body;
+    const excludedAncestor = document.querySelector('#excluded')!;
+
+    const scanContext = { include: [body], exclude: [excludedAncestor] };
+
+    assert.equal(isNodeInScanContext(node, scanContext), false);
+  });
+
+  test('includes an element if it itself is included', () => {
+    const dom = new JSDOM('<div id="test"></div>');
+    const { document } = dom.window;
+    const node = document.querySelector('#test')!;
+
+    const scanContext = { include: [node], exclude: [] };
+
+    assert.ok(isNodeInScanContext(node, scanContext));
+  });
+
+  test('doesn’t include an element if it itself is excluded', () => {
+    const dom = new JSDOM('<div id="test"></div>');
+    const { document } = dom.window;
+    const node = document.querySelector('#test')!;
+    const body = document.body;
+
+    const scanContext = { include: [body], exclude: [node] };
+
+    assert.equal(isNodeInScanContext(node, scanContext), false);
+  });
+
+  test('includes an element if it’s both included and excluded (include takes precedence)', () => {
+    const dom = new JSDOM('<div id="test"></div>');
+    const { document } = dom.window;
+    const node = document.querySelector('#test')!;
+
+    const scanContext = { include: [node], exclude: [node] };
+
+    assert.ok(isNodeInScanContext(node, scanContext));
+  });
+});

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

@@ -0,0 +1,29 @@
+/* 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';
+
+function getDeepest(nodes: [Node, ...Node[]]): Node {
+  let deepest = nodes[0];
+  for (const node of nodes.slice(1)) {
+    if (!contains(node, deepest)) {
+      deepest = node;
+    }
+  }
+  return deepest;
+}
+
+export default 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));
+  if (filteredExclude.length === 0) {
+    return true;
+  }
+  const deepestInclude = getDeepest(ensureNonEmpty(filteredInclude));
+  const deepestExclude = getDeepest(ensureNonEmpty(filteredExclude));
+  return contains(deepestExclude, deepestInclude);
+}