npm - accented - Versions diffs - 0.0.2 → 1.0.0 - Mend

accented 0.0.2 → 1.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (212) hide show

package/NOTICE +14 -0
package/README.md +44 -187
package/dist/accented.d.ts +8 -8
package/dist/accented.d.ts.map +1 -1
package/dist/accented.js +37 -30
package/dist/accented.js.map +1 -1
package/dist/common/tokens.d.ts +7 -0
package/dist/common/tokens.d.ts.map +1 -0
package/dist/common/tokens.js +8 -0
package/dist/common/tokens.js.map +1 -0
package/dist/constants.d.ts +2 -1
package/dist/constants.d.ts.map +1 -1
package/dist/constants.js +2 -1
package/dist/constants.js.map +1 -1
package/dist/dom-updater.d.ts +1 -1
package/dist/dom-updater.d.ts.map +1 -1
package/dist/dom-updater.js +73 -31
package/dist/dom-updater.js.map +1 -1
package/dist/elements/accented-dialog.d.ts +13 -10
package/dist/elements/accented-dialog.d.ts.map +1 -1
package/dist/elements/accented-dialog.js +110 -94
package/dist/elements/accented-dialog.js.map +1 -1
package/dist/elements/accented-trigger.d.ts +14 -9
package/dist/elements/accented-trigger.d.ts.map +1 -1
package/dist/elements/accented-trigger.js +77 -22
package/dist/elements/accented-trigger.js.map +1 -1
package/dist/fullscreen-listener.d.ts +2 -0
package/dist/fullscreen-listener.d.ts.map +1 -0
package/dist/fullscreen-listener.js +17 -0
package/dist/fullscreen-listener.js.map +1 -0
package/dist/intersection-observer.d.ts +1 -1
package/dist/intersection-observer.d.ts.map +1 -1
package/dist/intersection-observer.js +12 -6
package/dist/intersection-observer.js.map +1 -1
package/dist/log-and-rethrow.d.ts +1 -1
package/dist/log-and-rethrow.d.ts.map +1 -1
package/dist/log-and-rethrow.js +2 -3
package/dist/log-and-rethrow.js.map +1 -1
package/dist/logger.d.ts +1 -1
package/dist/logger.d.ts.map +1 -1
package/dist/logger.js +6 -3
package/dist/logger.js.map +1 -1
package/dist/register-elements.d.ts +1 -1
package/dist/register-elements.d.ts.map +1 -1
package/dist/register-elements.js +6 -7
package/dist/register-elements.js.map +1 -1
package/dist/resize-listener.d.ts +1 -1
package/dist/resize-listener.d.ts.map +1 -1
package/dist/resize-listener.js +3 -4
package/dist/resize-listener.js.map +1 -1
package/dist/scanner.d.ts +2 -2
package/dist/scanner.d.ts.map +1 -1
package/dist/scanner.js +76 -43
package/dist/scanner.js.map +1 -1
package/dist/scroll-listeners.d.ts +1 -1
package/dist/scroll-listeners.d.ts.map +1 -1
package/dist/scroll-listeners.js +3 -4
package/dist/scroll-listeners.js.map +1 -1
package/dist/state.d.ts +3 -2
package/dist/state.d.ts.map +1 -1
package/dist/state.js +5 -3
package/dist/state.js.map +1 -1
package/dist/task-queue.d.ts +4 -4
package/dist/task-queue.d.ts.map +1 -1
package/dist/task-queue.js +3 -2
package/dist/task-queue.js.map +1 -1
package/dist/types.d.ts +140 -49
package/dist/types.d.ts.map +1 -1
package/dist/types.js.map +1 -1
package/dist/utils/are-elements-with-issues-equal.d.ts +3 -0
package/dist/utils/are-elements-with-issues-equal.d.ts.map +1 -0
package/dist/utils/are-elements-with-issues-equal.js +5 -0
package/dist/utils/are-elements-with-issues-equal.js.map +1 -0
package/dist/utils/are-issue-sets-equal.d.ts +2 -2
package/dist/utils/are-issue-sets-equal.d.ts.map +1 -1
package/dist/utils/are-issue-sets-equal.js +3 -3
package/dist/utils/are-issue-sets-equal.js.map +1 -1
package/dist/utils/containing-blocks.d.ts +3 -0
package/dist/utils/containing-blocks.d.ts.map +1 -0
package/dist/utils/containing-blocks.js +46 -0
package/dist/utils/containing-blocks.js.map +1 -0
package/dist/utils/contains.d.ts +2 -0
package/dist/utils/contains.d.ts.map +1 -0
package/dist/utils/contains.js +19 -0
package/dist/utils/contains.js.map +1 -0
package/dist/utils/deduplicate-nodes.d.ts +2 -0
package/dist/utils/deduplicate-nodes.d.ts.map +1 -0
package/dist/utils/deduplicate-nodes.js +4 -0
package/dist/utils/deduplicate-nodes.js.map +1 -0
package/dist/utils/deep-merge.d.ts +1 -1
package/dist/utils/deep-merge.d.ts.map +1 -1
package/dist/utils/deep-merge.js +8 -5
package/dist/utils/deep-merge.js.map +1 -1
package/dist/utils/dom-helpers.d.ts +9 -0
package/dist/utils/dom-helpers.d.ts.map +1 -0
package/dist/utils/dom-helpers.js +34 -0
package/dist/utils/dom-helpers.js.map +1 -0
package/dist/utils/ensure-non-empty.d.ts +2 -0
package/dist/utils/ensure-non-empty.d.ts.map +1 -0
package/dist/utils/ensure-non-empty.js +7 -0
package/dist/utils/ensure-non-empty.js.map +1 -0
package/dist/utils/get-element-html.d.ts +1 -1
package/dist/utils/get-element-html.d.ts.map +1 -1
package/dist/utils/get-element-html.js +4 -2
package/dist/utils/get-element-html.js.map +1 -1
package/dist/utils/get-element-position.d.ts +10 -2
package/dist/utils/get-element-position.d.ts.map +1 -1
package/dist/utils/get-element-position.js +64 -16
package/dist/utils/get-element-position.js.map +1 -1
package/dist/utils/get-parent.d.ts +2 -0
package/dist/utils/get-parent.d.ts.map +1 -0
package/dist/utils/get-parent.js +12 -0
package/dist/utils/get-parent.js.map +1 -0
package/dist/utils/get-scan-context.d.ts +3 -0
package/dist/utils/get-scan-context.d.ts.map +1 -0
package/dist/utils/get-scan-context.js +28 -0
package/dist/utils/get-scan-context.js.map +1 -0
package/dist/utils/get-scrollable-ancestors.d.ts +1 -1
package/dist/utils/get-scrollable-ancestors.d.ts.map +1 -1
package/dist/utils/get-scrollable-ancestors.js +10 -6
package/dist/utils/get-scrollable-ancestors.js.map +1 -1
package/dist/utils/is-node-in-scan-context.d.ts +3 -0
package/dist/utils/is-node-in-scan-context.d.ts.map +1 -0
package/dist/utils/is-node-in-scan-context.js +26 -0
package/dist/utils/is-node-in-scan-context.js.map +1 -0
package/dist/utils/is-non-empty.d.ts +2 -0
package/dist/utils/is-non-empty.d.ts.map +1 -0
package/dist/utils/is-non-empty.js +4 -0
package/dist/utils/is-non-empty.js.map +1 -0
package/dist/utils/normalize-context.d.ts +3 -0
package/dist/utils/normalize-context.d.ts.map +1 -0
package/dist/utils/normalize-context.js +59 -0
package/dist/utils/normalize-context.js.map +1 -0
package/dist/utils/recalculate-positions.d.ts +1 -1
package/dist/utils/recalculate-positions.d.ts.map +1 -1
package/dist/utils/recalculate-positions.js +5 -5
package/dist/utils/recalculate-positions.js.map +1 -1
package/dist/utils/recalculate-scrollable-ancestors.d.ts +1 -1
package/dist/utils/recalculate-scrollable-ancestors.d.ts.map +1 -1
package/dist/utils/recalculate-scrollable-ancestors.js +4 -4
package/dist/utils/recalculate-scrollable-ancestors.js.map +1 -1
package/dist/utils/shadow-dom-aware-mutation-observer.d.ts +10 -0
package/dist/utils/shadow-dom-aware-mutation-observer.d.ts.map +1 -0
package/dist/utils/shadow-dom-aware-mutation-observer.js +61 -0
package/dist/utils/shadow-dom-aware-mutation-observer.js.map +1 -0
package/dist/utils/supports-anchor-positioning.d.ts +1 -1
package/dist/utils/supports-anchor-positioning.d.ts.map +1 -1
package/dist/utils/supports-anchor-positioning.js +1 -1
package/dist/utils/supports-anchor-positioning.js.map +1 -1
package/dist/utils/transform-violations.d.ts +2 -2
package/dist/utils/transform-violations.d.ts.map +1 -1
package/dist/utils/transform-violations.js +23 -10
package/dist/utils/transform-violations.js.map +1 -1
package/dist/utils/update-elements-with-issues.d.ts +11 -5
package/dist/utils/update-elements-with-issues.d.ts.map +1 -1
package/dist/utils/update-elements-with-issues.js +56 -24
package/dist/utils/update-elements-with-issues.js.map +1 -1
package/dist/validate-options.d.ts +2 -2
package/dist/validate-options.d.ts.map +1 -1
package/dist/validate-options.js +91 -4
package/dist/validate-options.js.map +1 -1
package/package.json +15 -7
package/src/accented.test.ts +2 -2
package/src/accented.ts +45 -34
package/src/common/tokens.ts +10 -0
package/src/constants.ts +2 -1
package/src/dom-updater.ts +87 -34
package/src/elements/accented-dialog.ts +157 -122
package/src/elements/accented-trigger.ts +119 -47
package/src/fullscreen-listener.ts +21 -0
package/src/intersection-observer.ts +27 -16
package/src/log-and-rethrow.ts +2 -3
package/src/logger.ts +14 -4
package/src/register-elements.ts +7 -7
package/src/resize-listener.ts +15 -11
package/src/scanner.ts +113 -57
package/src/scroll-listeners.ts +27 -19
package/src/state.ts +27 -16
package/src/task-queue.test.ts +5 -4
package/src/task-queue.ts +8 -6
package/src/types.ts +179 -76
package/src/utils/are-elements-with-issues-equal.ts +11 -0
package/src/utils/are-issue-sets-equal.test.ts +10 -6
package/src/utils/are-issue-sets-equal.ts +8 -6
package/src/utils/containing-blocks.ts +60 -0
package/src/utils/contains.test.ts +54 -0
package/src/utils/contains.ts +19 -0
package/src/utils/deduplicate-nodes.ts +3 -0
package/src/utils/deep-merge.test.ts +8 -1
package/src/utils/deep-merge.ts +14 -8
package/src/utils/dom-helpers.ts +42 -0
package/src/utils/ensure-non-empty.ts +6 -0
package/src/utils/get-element-html.ts +4 -2
package/src/utils/get-element-position.ts +84 -16
package/src/utils/get-parent.ts +14 -0
package/src/utils/get-scan-context.test.ts +85 -0
package/src/utils/get-scan-context.ts +36 -0
package/src/utils/get-scrollable-ancestors.ts +15 -7
package/src/utils/is-node-in-scan-context.test.ts +70 -0
package/src/utils/is-node-in-scan-context.ts +29 -0
package/src/utils/is-non-empty.ts +3 -0
package/src/utils/normalize-context.test.ts +105 -0
package/src/utils/normalize-context.ts +65 -0
package/src/utils/recalculate-positions.ts +5 -5
package/src/utils/recalculate-scrollable-ancestors.ts +4 -4
package/src/utils/shadow-dom-aware-mutation-observer.ts +75 -0
package/src/utils/supports-anchor-positioning.ts +3 -3
package/src/utils/transform-violations.test.ts +28 -24
package/src/utils/transform-violations.ts +30 -12
package/src/utils/update-elements-with-issues.test.ts +139 -51
package/src/utils/update-elements-with-issues.ts +123 -54
package/src/validate-options.ts +154 -14

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

@@ -1,21 +1,89 @@
-import type { Position } from '../types';
+import type { Position } from '../types.ts';
+import { createsContainingBlock } from './containing-blocks.js';
+import { isHtmlElement } from './dom-helpers.js';
+import { getParent } from './get-parent.js';
-export default function getElementPosition(element: Element, win: Window): Position {
-  const rect = element.getBoundingClientRect();
-  const direction = win.getComputedStyle(element).direction;
-  if (direction === 'ltr') {
-    return {
-      inlineEndLeft: rect.right,
-      blockStartTop: rect.top,
-      direction
-    };
-  } else if (direction === 'rtl') {
+// 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,
+    contain,
+    contentVisibility,
+    containerType,
+    filter,
+    backdropFilter,
+    willChange,
+  } = style;
+  const containItems = contain.split(' ');
+  const willChangeItems = willChange.split(/\s*,\s*/);
+  return (
+    transform !== '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 {
+  let currentElement: Element | null = element;
+  while (currentElement) {
+    currentElement = getParent(currentElement);
+    if (currentElement && isContainingBlock(currentElement, win)) {
+      return currentElement;
+    }
+  }
+  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 function getElementPosition(element: Element, win: Window): Position {
+  const nonInitialContainingBlock = getNonInitialContainingBlock(element, win);
+  // 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)) {
+      const width = element.offsetWidth;
+      const height = element.offsetHeight;
+      let left = element.offsetLeft;
+      let top = element.offsetTop;
+      let currentElement = element.offsetParent as HTMLElement | null;
+      // Non-initial containing block may not be an offset parent, we have to account for that as well.
+      while (currentElement && currentElement !== nonInitialContainingBlock) {
+        left += currentElement.offsetLeft;
+        top += currentElement.offsetTop;
+        currentElement = currentElement.offsetParent as HTMLElement | null;
+      }
+      return { top, left, width, height };
+    }
+    const elementRect = element.getBoundingClientRect();
+    const nonInitialContainingBlockRect = nonInitialContainingBlock.getBoundingClientRect();
     return {
-      inlineEndLeft: rect.left,
-      blockStartTop: rect.top,
-      direction
+      top: elementRect.top - nonInitialContainingBlockRect.top,
+      height: elementRect.height,
+      left: elementRect.left - nonInitialContainingBlockRect.left,
+      width: elementRect.width,
     };
-  } else {
-    throw new Error(`The element ${element} has a direction "${direction}", which is not supported.`);
   }
+  return element.getBoundingClientRect();
 }

package/src/utils/get-parent.ts ADDED Viewed

@@ -0,0 +1,14 @@
+import { isDocumentFragment, isShadowRoot } from './dom-helpers.js';
+export function getParent(element: Element): Element | null {
+  if (element.parentElement) {
+    return element.parentElement;
+  }
+  const rootNode = element.getRootNode();
+  if (isDocumentFragment(rootNode) && isShadowRoot(rootNode)) {
+    return rootNode.host;
+  }
+  return null;
+}

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

@@ -0,0 +1,85 @@
+import assert from 'node:assert/strict';
+import { suite, test } from 'node:test';
+import { JSDOM } from 'jsdom';
+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 ADDED Viewed

@@ -0,0 +1,36 @@
+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';
+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) =>
+    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/get-scrollable-ancestors.ts CHANGED Viewed

@@ -1,14 +1,22 @@
+import { getParent } from './get-parent.js';
 const scrollableOverflowValues = new Set(['auto', 'scroll', 'hidden']);
-export default function getScrollableAncestors (element: HTMLElement, win: Window) {
-  let currentElement = element;
-  let scrollableAncestors = new Set<HTMLElement>();
-  while (currentElement.parentElement) {
-    currentElement = currentElement.parentElement;
+export function getScrollableAncestors(element: Element, win: Window) {
+  let currentElement: Element | null = 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 ADDED Viewed

@@ -0,0 +1,70 @@
+import assert from 'node:assert/strict';
+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', () => {
+    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 ADDED Viewed

@@ -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.ts';
+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 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);
+}

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

@@ -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 ADDED Viewed

@@ -0,0 +1,105 @@
+import assert from 'node:assert/strict';
+import { suite, test } from 'node:test';
+import { JSDOM } from 'jsdom';
+import { normalizeContext } from './normalize-context';
+suite('normalizeContext', () => {
+  test('when document is passed, only document is returned in include', () => {
+    const dom = new JSDOM('<div id="test"></div>');
+    const { document } = dom.window;
+    const normalizedContext = normalizeContext(document);
+    assert.deepEqual(normalizedContext, {
+      include: [document],
+      exclude: [],
+    });
+  });
+  test('when an element is passed, only that element is returned in include', () => {
+    const dom = new JSDOM('<div id="test"></div>');
+    const { document } = dom.window;
+    const element = document.querySelector('#test')!;
+    const normalizedContext = normalizeContext(element);
+    assert.deepEqual(normalizedContext, {
+      include: [element],
+      exclude: [],
+    });
+  });
+  test('when a selector is passed and elements matching that selector exist, all those elements are included', () => {
+    const dom = new JSDOM(`<div>
+      <div class="matches"></div>
+      <div class="matches"></div>
+      <div class="doesnt-match"></div>
+    </div>`);
+    const { document } = dom.window;
+    global.document = document;
+    const matchingElements = Array.from(document.querySelectorAll('.matches'));
+    const normalizedContext = normalizeContext('.matches');
+    assert.equal(matchingElements.length, 2);
+    assert.deepEqual(normalizedContext, {
+      include: matchingElements,
+      exclude: [],
+    });
+  });
+  test('when a selector is passed and no elements matching that selector exist, `include` is empty', () => {
+    const dom = new JSDOM(`<div>
+      <div class="doesnt-match"></div>
+      <div class="doesnt-match"></div>
+      <div class="doesnt-match"></div>
+    </div>`);
+    const { document } = dom.window;
+    global.document = document;
+    const normalizedContext = normalizeContext('.matches');
+    assert.deepEqual(normalizedContext, {
+      include: [],
+      exclude: [],
+    });
+  });
+  test('when a node list is passed, all the nodes from the list are included', () => {
+    const dom = new JSDOM(`<div>
+      <div class="matches"></div>
+      <div class="matches"></div>
+      <div class="doesnt-match"></div>
+    </div>`);
+    const { document } = dom.window;
+    const matchingElements = document.querySelectorAll('.matches');
+    const normalizedContext = normalizeContext(matchingElements);
+    assert.equal(matchingElements.length, 2);
+    assert.deepEqual(normalizedContext, {
+      include: Array.from(matchingElements),
+      exclude: [],
+    });
+  });
+  test('when an object with `fromShadowDom` is passed, all the matching nodes are included', () => {
+    const dom = new JSDOM(`<div>
+      <div class="host"></div>
+      <div class="host"></div>
+    </div>`);
+    const { document } = dom.window;
+    global.document = document;
+    const hosts = document.querySelectorAll('.host');
+    const matchingElements = [];
+    for (const host of hosts) {
+      const shadowRoot = host.attachShadow({ mode: 'open' });
+      const matchingElement = document.createElement('div');
+      matchingElement.classList.add('matches');
+      shadowRoot.appendChild(matchingElement);
+      matchingElements.push(matchingElement);
+    }
+    const normalizedContext = normalizeContext({ fromShadowDom: ['.host', '.matches'] });
+    assert.equal(matchingElements.length, 2);
+    assert.deepEqual(normalizedContext, {
+      include: matchingElements,
+      exclude: [],
+    });
+  });
+});

package/src/utils/normalize-context.ts ADDED Viewed

@@ -0,0 +1,65 @@
+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: [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) {
+      selected.push(...recursiveSelectAll(restSelectors, node.shadowRoot));
+    }
+  }
+  return selected;
+}
+function selectorToNodes(selector: Selector): Array<Node> {
+  if (typeof selector === 'string') {
+    return recursiveSelectAll([selector], document);
+  }
+  if (isNode(selector)) {
+    return [selector];
+  }
+  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).flatMap((item) => selectorToNodes(item));
+  } else {
+    nodes = selectorToNodes(contextProp);
+  }
+  return deduplicateNodes(nodes);
+}
+export function normalizeContext(context: Context): ScanContext {
+  let contextInclude: Array<Node> = [];
+  let contextExclude: Array<Node> = [];
+  if (typeof context === 'object' && ('include' in context || 'exclude' in context)) {
+    if (context.include !== undefined) {
+      contextInclude = contextPropToNodes(context.include);
+    }
+    if (context.exclude !== undefined) {
+      contextExclude = contextPropToNodes(context.exclude);
+    }
+  } else {
+    contextInclude = contextPropToNodes(context);
+  }
+  return {
+    include: contextInclude,
+    exclude: contextExclude,
+  };
+}

package/src/utils/recalculate-positions.ts CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 ADDED Viewed

@@ -0,0 +1,75 @@
+import { getAccentedElementNames } from '../constants.js';
+import { isDocument, isDocumentFragment, isElement } from './dom-helpers.js';
+export function createShadowDOMAwareMutationObserver(name: string, callback: MutationCallback) {
+  class ShadowDOMAwareMutationObserver extends MutationObserver {
+    #shadowRoots = new Set();
+    #options: MutationObserverInit | undefined;
+    constructor(callback: MutationCallback) {
+      super((mutations, observer) => {
+        const accentedElementNames = getAccentedElementNames(name);
+        const childListMutations = mutations.filter((mutation) => mutation.type === 'childList');
+        const newElements = childListMutations
+          .flatMap((mutation) => [...mutation.addedNodes])
+          .filter((node) => isElement(node))
+          .filter((node) => !accentedElementNames.includes(node.nodeName.toLowerCase()));
+        this.#observeShadowRoots(newElements);
+        const removedElements = childListMutations
+          .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.
+        this.#deleteShadowRoots(removedElements);
+        callback(mutations, observer);
+      });
+    }
+    override observe(target: Node, options?: MutationObserverInit): void {
+      this.#options ??= options;
+      if (isElement(target) || isDocument(target) || isDocumentFragment(target)) {
+        this.#observeShadowRoots([target]);
+      }
+      super.observe(target, options);
+    }
+    override disconnect(): void {
+      this.#shadowRoots.clear();
+      super.disconnect();
+    }
+    #observeShadowRoots = (elements: Array<Element | Document | DocumentFragment>) => {
+      const shadowRoots = elements
+        .flatMap((element) => [...element.querySelectorAll('*')])
+        .filter((element) => element.shadowRoot)
+        .map((element) => element.shadowRoot);
+      for (const shadowRoot of shadowRoots) {
+        if (shadowRoot) {
+          this.#shadowRoots.add(shadowRoot);
+          this.observe(shadowRoot, this.#options);
+        }
+      }
+    };
+    #deleteShadowRoots = (elements: Array<Element | Document | DocumentFragment>) => {
+      const shadowRoots = elements
+        .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);
+}