accented 1.1.1 → 1.2.0

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

@@ -1,34 +1,45 @@
 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 +52,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);

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

@@ -36,13 +36,11 @@ export function updateElementsWithIssues({
   extendedElementsWithIssues,
   scanContext,
   violations,
-  win,
   name,
 }: {
   extendedElementsWithIssues: Signal<Array<ExtendedElementWithIssues>>;
   scanContext: ScanContext;
   violations: typeof AxeResults.violations;
-  win: Window & { CSS: typeof CSS };
   name: string;
 }) {
   const updatedElementsWithIssues = transformViolations(violations, name);
@@ -99,9 +97,9 @@ export function updateElementsWithIssues({
             .filter((addedElementWithIssues) => addedElementWithIssues.element.isConnected)
             .map((addedElementWithIssues) => {
               const id = count++;
-              const trigger = win.document.createElement(`${name}-trigger`) as AccentedTrigger;
+              const trigger = document.createElement(`${name}-trigger`) as AccentedTrigger;
               const elementZIndex = Number.parseInt(
-                win.getComputedStyle(addedElementWithIssues.element).zIndex,
+                getComputedStyle(addedElementWithIssues.element).zIndex,
                 10,
               );
               if (!Number.isNaN(elementZIndex)) {
@@ -109,15 +107,15 @@ export function updateElementsWithIssues({
               }
               trigger.style.setProperty('position-anchor', `--${name}-anchor-${id}`, 'important');
               trigger.dataset.id = id.toString();
-              const accentedDialog = win.document.createElement(`${name}-dialog`) as AccentedDialog;
+              const accentedDialog = document.createElement(`${name}-dialog`) as AccentedDialog;
               trigger.dialog = accentedDialog;
-              const position = getElementPosition(addedElementWithIssues.element, win);
+              const position = getElementPosition(addedElementWithIssues.element);
               trigger.position = signal(position);
               trigger.visible = signal(true);
               trigger.element = addedElementWithIssues.element;
-              const scrollableAncestors = supportsAnchorPositioning(win)
+              const scrollableAncestors = supportsAnchorPositioning()
                 ? new Set<HTMLElement>()
-                : getScrollableAncestors(addedElementWithIssues.element, win);
+                : getScrollableAncestors(addedElementWithIssues.element);
               const issues = signal(addedElementWithIssues.issues);
               accentedDialog.issues = issues;
               accentedDialog.element = addedElementWithIssues.element;
@@ -131,9 +129,7 @@ export function updateElementsWithIssues({
                 scrollableAncestors: signal(scrollableAncestors),
                 anchorNameValue:
                   addedElementWithIssues.element.style.getPropertyValue('anchor-name') ||
-                  win
-                    .getComputedStyle(addedElementWithIssues.element)
-                    .getPropertyValue('anchor-name'),
+                  getComputedStyle(addedElementWithIssues.element).getPropertyValue('anchor-name'),
                 trigger,
                 issues,
               };