accented 1.1.0 → 1.1.2

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

@@ -0,0 +1,413 @@
+import assert from 'node:assert/strict';
+import { beforeEach, suite, test } from 'node:test';
+import { JSDOM } from 'jsdom';
+import { createShadowDOMAwareMutationObserver } from './shadow-dom-aware-mutation-observer';
+
+type MutationAssertion = {
+  type: string;
+  target?: Node;
+  addedNodes?: { length: number; tagName?: string };
+  removedNodes?: { length: number; tagName?: string };
+};
+
+const createTestDOM = (html = '<div id="container"></div>') => {
+  const dom = new JSDOM(html);
+  return { dom, document: dom.window.document };
+};
+
+const waitForMutation = (ms = 10) => new Promise((resolve) => setTimeout(resolve, ms));
+
+const createElementWithShadowRoot = (document: Document, tagName = 'div') => {
+  const element = document.createElement(tagName);
+  const shadowRoot = element.attachShadow({ mode: 'open' });
+  return { element, shadowRoot };
+};
+
+const assertMutationEquals = (mutation: MutationRecord, expected: MutationAssertion) => {
+  assert.equal(mutation.type, expected.type);
+  if (expected.target) {
+    assert.equal(mutation.target, expected.target);
+  }
+  if (expected.addedNodes) {
+    assert.equal(mutation.addedNodes.length, expected.addedNodes.length);
+    if (expected.addedNodes.tagName) {
+      assert.equal((mutation.addedNodes[0] as Element)?.tagName, expected.addedNodes.tagName);
+    }
+  }
+  if (expected.removedNodes) {
+    assert.equal(mutation.removedNodes.length, expected.removedNodes.length);
+    if (expected.removedNodes.tagName) {
+      assert.equal((mutation.removedNodes[0] as Element)?.tagName, expected.removedNodes.tagName);
+    }
+  }
+};
+
+const createAsyncMutationTest = (expectedMutations: number) => {
+  let mutationCount = 0;
+  let resolveTest: () => void;
+  const testComplete = new Promise<void>((resolve) => {
+    resolveTest = resolve;
+  });
+
+  const handleMutation =
+    (callback: (mutations: MutationRecord[], count: number) => void) =>
+    (mutations: MutationRecord[]) => {
+      mutationCount++;
+      callback(mutations, mutationCount);
+
+      if (mutationCount === expectedMutations) {
+        resolveTest();
+      }
+    };
+
+  return { handleMutation, testComplete, getMutationCount: () => mutationCount };
+};
+
+suite('ShadowDOMAwareMutationObserver', () => {
+  beforeEach(() => {
+    const dom = new JSDOM();
+    global.Node = dom.window.Node;
+    global.MutationObserver = dom.window.MutationObserver;
+  });
+
+  suite('inserting elements', () => {
+    test('fires when a node is inserted in an observed node', (_t, done) => {
+      const { document } = createTestDOM();
+      const container = document.querySelector('#container')!;
+
+      const observer = createShadowDOMAwareMutationObserver('test', (mutations) => {
+        assert.equal(mutations.length, 1);
+        assertMutationEquals(mutations[0]!, {
+          type: 'childList',
+          addedNodes: { length: 1, tagName: 'DIV' },
+        });
+
+        done();
+      });
+
+      observer.observe(container, { childList: true });
+
+      const newDiv = document.createElement('div');
+      container.appendChild(newDiv);
+    });
+
+    test('fires when a node is inserted in a shadow root of an observed element', (_t, done) => {
+      const { document } = createTestDOM('<div id="container"><div id="host"></div></div>');
+      const container = document.querySelector('#container')!;
+      const host = document.querySelector('#host')!;
+
+      const shadowRoot = host.attachShadow({ mode: 'open' });
+
+      const observer = createShadowDOMAwareMutationObserver('test', (mutations) => {
+        assert.equal(mutations.length, 1);
+        assertMutationEquals(mutations[0]!, {
+          type: 'childList',
+          addedNodes: { length: 1, tagName: 'DIV' },
+        });
+
+        done();
+      });
+
+      observer.observe(container, { childList: true });
+
+      const newDiv = document.createElement('div');
+      shadowRoot.appendChild(newDiv);
+    });
+
+    // This is an unfortunate limitation: we cannot be notified when a shadow root is created
+    // in the observed DOM. When that happens, the whole shadow root subtree will stay unobserved.
+    test('does not fire when a node is inserted in a shadow root created after observer starts', (_t, done) => {
+      const { document } = createTestDOM('<div id="container"><div id="host"></div></div>');
+      const container = document.querySelector('#container')!;
+      const host = document.querySelector('#host')!;
+
+      let callbackFired = false;
+      const observer = createShadowDOMAwareMutationObserver('test', () => {
+        callbackFired = true;
+        done(new Error('Callback should not have fired'));
+      });
+
+      observer.observe(container, { childList: true, subtree: true });
+
+      const shadowRoot = host.attachShadow({ mode: 'open' });
+      const newDiv = document.createElement('div');
+      shadowRoot.appendChild(newDiv);
+
+      setTimeout(() => {
+        assert.equal(
+          callbackFired,
+          false,
+          'Callback should not have fired for shadow root created after observation',
+        );
+        done();
+      }, 50);
+    });
+
+    test('discovers shadow roots when descendants with shadow roots are added', async () => {
+      // This test verifies that when a wrapper element containing descendant shadow hosts
+      // is added to the DOM, the shadow roots are properly discovered and observed
+      const { document } = createTestDOM();
+      const container = document.querySelector('#container')!;
+
+      const { handleMutation, testComplete } = createAsyncMutationTest(2);
+
+      const { element: hostElement, shadowRoot } = createElementWithShadowRoot(document);
+      const wrapper = document.createElement('div');
+      wrapper.appendChild(hostElement);
+
+      const observer = createShadowDOMAwareMutationObserver(
+        'test',
+        handleMutation((mutations, count) => {
+          assert.equal(mutations.length, 1);
+
+          if (count === 1) {
+            // First mutation: wrapper with descendant that has shadow root
+            assertMutationEquals(mutations[0]!, {
+              type: 'childList',
+              target: container,
+              addedNodes: { length: 1, tagName: 'DIV' },
+            });
+          } else if (count === 2) {
+            // Second mutation: element added to the shadow root that was discovered
+            assertMutationEquals(mutations[0]!, {
+              type: 'childList',
+              target: shadowRoot,
+              addedNodes: { length: 1, tagName: 'SPAN' },
+            });
+          }
+        }),
+      );
+
+      observer.observe(container, { childList: true, subtree: true });
+
+      container.appendChild(wrapper);
+      await waitForMutation();
+
+      const shadowDiv = document.createElement('span');
+      shadowRoot.appendChild(shadowDiv);
+
+      await testComplete;
+    });
+
+    test('discovers shadow roots on directly added elements', async () => {
+      // This test verifies that shadow roots are discovered on elements that are
+      // added directly to the observed container (not just on descendants)
+      const { document } = createTestDOM();
+      const container = document.querySelector('#container')!;
+
+      const { handleMutation, testComplete } = createAsyncMutationTest(2);
+      const { element: hostElement, shadowRoot } = createElementWithShadowRoot(document);
+
+      const observer = createShadowDOMAwareMutationObserver(
+        'test',
+        handleMutation((mutations, count) => {
+          assert.equal(mutations.length, 1);
+
+          if (count === 1) {
+            // First mutation: element with shadow root added directly
+            assertMutationEquals(mutations[0]!, {
+              type: 'childList',
+              target: container,
+              addedNodes: { length: 1, tagName: 'DIV' },
+            });
+          } else if (count === 2) {
+            // Second mutation: element added to the shadow root on the directly added element
+            assertMutationEquals(mutations[0]!, {
+              type: 'childList',
+              target: shadowRoot,
+              addedNodes: { length: 1, tagName: 'SPAN' },
+            });
+          }
+        }),
+      );
+
+      observer.observe(container, { childList: true, subtree: true });
+
+      // Add element with shadow root directly to container
+      // This should now work with the bug fix (previously didn't work)
+      container.appendChild(hostElement);
+      await waitForMutation();
+
+      const shadowDiv = document.createElement('span');
+      shadowRoot.appendChild(shadowDiv);
+
+      await testComplete;
+    });
+
+    test('discovers and observes nested shadow roots (two levels deep)', async () => {
+      const { document } = createTestDOM();
+      const container = document.querySelector('#container')!;
+
+      const { handleMutation, testComplete } = createAsyncMutationTest(3);
+      const { element: outerElement, shadowRoot: outerShadowRoot } =
+        createElementWithShadowRoot(document);
+      const { element: innerElement, shadowRoot: innerShadowRoot } = createElementWithShadowRoot(
+        document,
+        'span',
+      );
+
+      const observer = createShadowDOMAwareMutationObserver(
+        'test',
+        handleMutation((mutations, count) => {
+          assert.equal(mutations.length, 1);
+
+          if (count === 1) {
+            // First mutation: outer element with shadow root added
+            assertMutationEquals(mutations[0]!, {
+              type: 'childList',
+              target: container,
+              addedNodes: { length: 1, tagName: 'DIV' },
+            });
+          } else if (count === 2) {
+            // Second mutation: inner element with nested shadow root added to outer shadow root
+            assertMutationEquals(mutations[0]!, {
+              type: 'childList',
+              target: outerShadowRoot,
+              addedNodes: { length: 1, tagName: 'SPAN' },
+            });
+          } else if (count === 3) {
+            // Third mutation: element added to nested (inner) shadow root
+            assertMutationEquals(mutations[0]!, {
+              type: 'childList',
+              target: innerShadowRoot,
+              addedNodes: { length: 1, tagName: 'P' },
+            });
+          }
+        }),
+      );
+
+      observer.observe(container, { childList: true, subtree: true });
+
+      container.appendChild(outerElement);
+      await waitForMutation();
+
+      outerShadowRoot.appendChild(innerElement);
+      await waitForMutation();
+
+      const deepElement = document.createElement('p');
+      innerShadowRoot.appendChild(deepElement);
+
+      await testComplete;
+    });
+  });
+
+  suite('removing elements', () => {
+    // Tests for proper cleanup when elements are removed from the DOM
+    test('does not fire when elements are added to removed elements', async () => {
+      const { document } = createTestDOM();
+      const container = document.querySelector('#container')!;
+
+      const { handleMutation, testComplete } = createAsyncMutationTest(2);
+      let completionScheduled = false;
+
+      const observer = createShadowDOMAwareMutationObserver(
+        'test',
+        handleMutation((mutations, count) => {
+          assert.equal(mutations.length, 1);
+
+          if (count === 1) {
+            // First mutation: element added to container
+            assertMutationEquals(mutations[0]!, {
+              type: 'childList',
+              target: container,
+              addedNodes: { length: 1, tagName: 'DIV' },
+            });
+          } else if (count === 2) {
+            // Second mutation: element removed from container
+            assertMutationEquals(mutations[0]!, {
+              type: 'childList',
+              target: container,
+              removedNodes: { length: 1, tagName: 'DIV' },
+            });
+
+            // Schedule completion check to ensure no third mutation occurs
+            if (!completionScheduled) {
+              completionScheduled = true;
+            }
+          } else {
+            throw new Error(`Unexpected mutation count: ${count}`);
+          }
+        }),
+      );
+
+      observer.observe(container, { childList: true, subtree: true });
+
+      const testElement = document.createElement('div');
+      container.appendChild(testElement);
+      await waitForMutation();
+
+      container.removeChild(testElement);
+      await waitForMutation();
+
+      // Add element to the removed element (should NOT trigger mutation)
+      const childElement = document.createElement('span');
+      testElement.appendChild(childElement);
+
+      await testComplete;
+    });
+
+    test('does not fire when elements are added to shadow roots of removed hosts', async () => {
+      const { document } = createTestDOM();
+      const container = document.querySelector('#container')!;
+
+      const { handleMutation, testComplete } = createAsyncMutationTest(3);
+      const { element: shadowHost, shadowRoot } = createElementWithShadowRoot(document);
+      let completionScheduled = false;
+
+      const observer = createShadowDOMAwareMutationObserver(
+        'test',
+        handleMutation((mutations, count) => {
+          assert.equal(mutations.length, 1);
+
+          if (count === 1) {
+            // First mutation: shadow host added to container
+            assertMutationEquals(mutations[0]!, {
+              type: 'childList',
+              target: container,
+              addedNodes: { length: 1, tagName: 'DIV' },
+            });
+          } else if (count === 2) {
+            // Second mutation: element added to shadow root
+            assertMutationEquals(mutations[0]!, {
+              type: 'childList',
+              target: shadowRoot,
+              addedNodes: { length: 1, tagName: 'SPAN' },
+            });
+          } else if (count === 3) {
+            // Third mutation: shadow host removed from container
+            assertMutationEquals(mutations[0]!, {
+              type: 'childList',
+              target: container,
+              removedNodes: { length: 1, tagName: 'DIV' },
+            });
+
+            // Schedule completion check to ensure no fourth mutation occurs
+            if (!completionScheduled) {
+              completionScheduled = true;
+            }
+          } else {
+            throw new Error(`Unexpected mutation count: ${count}`);
+          }
+        }),
+      );
+
+      observer.observe(container, { childList: true, subtree: true });
+
+      container.appendChild(shadowHost);
+      await waitForMutation();
+
+      const shadowChild = document.createElement('span');
+      shadowRoot.appendChild(shadowChild);
+      await waitForMutation();
+
+      container.removeChild(shadowHost);
+      await waitForMutation();
+
+      // Add another element to the shadow root of removed host (should NOT trigger mutation)
+      const anotherShadowChild = document.createElement('p');
+      shadowRoot.appendChild(anotherShadowChild);
+
+      await testComplete;
+    });
+  });
+});

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

@@ -1,34 +1,47 @@
 import { getAccentedElementNames } from '../constants.js';
 import { isDocument, isDocumentFragment, isElement } from './dom-helpers.js';
 
+function getShadowRoots(elements: Array<Element | Document | DocumentFragment>) {
+  return elements
+    .flatMap((element) => [element, ...Array.from(element.querySelectorAll('*'))])
+    .reduce<Array<ShadowRoot>>(
+      (acc, element) =>
+        isElement(element) && element.shadowRoot ? acc.concat(element.shadowRoot) : acc,
+      [],
+    );
+}
+
 export function createShadowDOMAwareMutationObserver(name: string, callback: MutationCallback) {
+  type ObserverMap = Map<ShadowRoot, ShadowDOMAwareMutationObserver>;
+
+  const accentedElementNames = getAccentedElementNames(name);
+
+  function getMutationNodes(mutations: Array<MutationRecord>, type: 'addedNodes' | 'removedNodes') {
+    return mutations
+      .filter((mutation) => mutation.type === 'childList')
+      .flatMap((mutation) => Array.from(mutation[type]))
+      .filter((node) => isElement(node))
+      .filter((node) => !accentedElementNames.includes(node.nodeName.toLowerCase()));
+  }
+
   class ShadowDOMAwareMutationObserver extends MutationObserver {
-    #shadowRoots = new Set();
+    #shadowRoots: ObserverMap = new Map();
 
     #options: MutationObserverInit | undefined;
 
-    constructor(callback: MutationCallback) {
+    constructor(mutationCallback: 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()));
+        const newElements = getMutationNodes(mutations, 'addedNodes');
 
         this.#observeShadowRoots(newElements);
 
-        const removedElements = childListMutations
-          .flatMap((mutation) => [...mutation.removedNodes])
-          .filter((node) => isElement(node))
-          .filter((node) => !accentedElementNames.includes(node.nodeName.toLowerCase()));
+        const removedElements = getMutationNodes(mutations, 'removedNodes');
 
         // Mutation observer has no "unobserve" method, so we're simply deleting
         // the elements from the set of shadow roots.
-        this.#deleteShadowRoots(removedElements);
+        this.#unobserveShadowRoots(removedElements);
 
-        callback(mutations, observer);
+        mutationCallback(mutations, observer);
       });
     }
 
@@ -41,31 +54,26 @@ export function createShadowDOMAwareMutationObserver(name: string, callback: Mut
     }
 
     override disconnect(): void {
+      this.#unobserveShadowRoots(Array.from(this.#shadowRoots.keys()));
       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);
+      const shadowRoots = getShadowRoots(elements);
 
       for (const shadowRoot of shadowRoots) {
-        if (shadowRoot) {
-          this.#shadowRoots.add(shadowRoot);
-          this.observe(shadowRoot, this.#options);
-        }
+        const observer = new ShadowDOMAwareMutationObserver(callback);
+        observer.observe(shadowRoot, this.#options);
+        this.#shadowRoots.set(shadowRoot, observer);
       }
     };
 
-    #deleteShadowRoots = (elements: Array<Element | Document | DocumentFragment>) => {
-      const shadowRoots = elements
-        .flatMap((element) => [...element.querySelectorAll('*')])
-        .filter((element) => element.shadowRoot)
-        .map((element) => element.shadowRoot);
+    #unobserveShadowRoots = (elements: Array<Element | Document | DocumentFragment>) => {
+      const shadowRoots = getShadowRoots(elements);
 
       for (const shadowRoot of shadowRoots) {
+        this.#shadowRoots.get(shadowRoot)?.disconnect();
         this.#shadowRoots.delete(shadowRoot);
       }
     };

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

@@ -1,23 +1,17 @@
-type WindowWithCSS = Window & {
-  CSS: typeof CSS;
-};
-
 /**
  * We have to do browser sniffing now and explicitly turn off Anchor positioning in Safari
  * since anchor positioning is not working correctly in Safari 26 Technology Preview.
  */
-function isWebKit(win: Window) {
-  const ua = win.navigator.userAgent;
+function isWebKit() {
+  const ua = navigator.userAgent;
   return (/AppleWebKit/.test(ua) && !/Chrome/.test(ua)) || /\b(iPad|iPhone|iPod)\b/.test(ua);
 }
 
 // ATTENTION: sync with the implementation in end-to-end tests.
 // I didn't find a way to sync this with automatically with the implementation of supportsAnchorPositioning
 // in end-to-end tests, so it has to be synced manually.
-export function supportsAnchorPositioning(win: WindowWithCSS) {
+export function supportsAnchorPositioning() {
   return (
-    win.CSS.supports('anchor-name: --foo') &&
-    win.CSS.supports('position-anchor: --foo') &&
-    !isWebKit(win)
+    CSS.supports('anchor-name: --foo') && CSS.supports('position-anchor: --foo') && !isWebKit()
   );
 }

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

@@ -3,64 +3,45 @@ import { suite, test } from 'node:test';
 import type { Signal } from '@preact/signals-core';
 import { signal } from '@preact/signals-core';
 import type { AxeResults, ImpactValue } from 'axe-core';
+import { JSDOM } from 'jsdom';
 import type { AccentedTrigger } from '../elements/accented-trigger';
 import type { ExtendedElementWithIssues, Issue } from '../types';
 import { updateElementsWithIssues } from './update-elements-with-issues';
 
+const dom = new JSDOM();
+global.document = dom.window.document;
+global.getComputedStyle = dom.window.getComputedStyle;
+// JSDOM doesn't seem to have CSS, so we mock it
+global.CSS = {
+  supports: () => true,
+} as any;
+// Node already has a global `navigator` object,
+// so we're mocking it differently than other globals.
+Object.defineProperty(global, 'navigator', {
+  value: { userAgent: dom.window.navigator.userAgent },
+  writable: true,
+  configurable: true,
+});
+
 type Violation = AxeResults['violations'][number];
 type AxeNode = Violation['nodes'][number];
 
-const win: Window & { CSS: typeof CSS } = {
-  document: {
-    // @ts-expect-error the return value is of incorrect type.
-    createElement: () => ({
-      style: {
-        setProperty: () => {},
-      },
-      dataset: {},
-    }),
-    contains: () => true,
-  },
-  // @ts-expect-error we're missing a lot of properties
-  getComputedStyle: () => ({
-    zIndex: '',
-    direction: 'ltr',
-    getPropertyValue: () => 'none',
-  }),
-  // @ts-expect-error we're missing a lot of properties
-  CSS: {
-    supports: () => true,
-  },
-  // @ts-expect-error we're missing a lot of properties
-  navigator: {
-    userAgent: '',
-  },
-};
+// Create real DOM elements using JSDOM
+const element1 = document.createElement('div');
+element1.setAttribute('id', 'element1');
+document.body.appendChild(element1);
 
-const getBoundingClientRect = () => ({});
-
-const getRootNode = (): Node => ({}) as Node;
-
-const baseElement = {
-  getBoundingClientRect,
-  getRootNode,
-  style: {
-    getPropertyValue: () => '',
-  },
-  closest: () => null,
-};
+const element2 = document.createElement('div');
+element2.setAttribute('id', 'element2');
+document.body.appendChild(element2);
 
-// @ts-expect-error element is not HTMLElement
-const element1: HTMLElement = { ...baseElement, isConnected: true };
-// @ts-expect-error element is not HTMLElement
-const element2: HTMLElement = { ...baseElement, isConnected: true };
-// @ts-expect-error element is not HTMLElement
-const element3: HTMLElement = { ...baseElement, isConnected: false };
+const element3 = document.createElement('div');
+element3.setAttribute('id', 'element3');
+// element3 is not connected (not added to document)
 
-// @ts-expect-error rootNode is not Node
-const rootNode: Node = {};
+const rootNode = document;
 
-const trigger = win.document.createElement('accented-trigger') as AccentedTrigger;
+const trigger = document.createElement('accented-trigger') as AccentedTrigger;
 
 const position = signal({
   left: 0,
@@ -151,7 +132,7 @@ const issue3: Issue = {
 };
 
 const scanContext = {
-  include: [win.document],
+  include: [document],
   exclude: [],
 };
 
@@ -187,7 +168,6 @@ suite('updateElementsWithIssues', () => {
       extendedElementsWithIssues,
       scanContext,
       violations: [violation1, violation2],
-      win,
       name: 'accented',
     });
     assert.equal(extendedElementsWithIssues.value.length, 2);
@@ -228,7 +208,6 @@ suite('updateElementsWithIssues', () => {
       extendedElementsWithIssues,
       scanContext,
       violations: [violation1, violation2, violation3],
-      win,
       name: 'accented',
     });
     assert.equal(extendedElementsWithIssues.value.length, 2);
@@ -269,7 +248,6 @@ suite('updateElementsWithIssues', () => {
       extendedElementsWithIssues,
       scanContext,
       violations: [violation1, violation2],
-      win,
       name: 'accented',
     });
     assert.equal(extendedElementsWithIssues.value.length, 2);
@@ -298,7 +276,6 @@ suite('updateElementsWithIssues', () => {
       extendedElementsWithIssues,
       scanContext,
       violations: [violation1, violation2],
-      win,
       name: 'accented',
     });
     assert.equal(extendedElementsWithIssues.value.length, 2);
@@ -327,7 +304,6 @@ suite('updateElementsWithIssues', () => {
       extendedElementsWithIssues,
       scanContext,
       violations: [violation1, violation4],
-      win,
       name: 'accented',
     });
     assert.equal(extendedElementsWithIssues.value.length, 1);
@@ -365,7 +341,6 @@ suite('updateElementsWithIssues', () => {
       extendedElementsWithIssues,
       scanContext,
       violations: [violation1],
-      win,
       name: 'accented',
     });
     assert.equal(extendedElementsWithIssues.value.length, 1);