accented 1.1.1 → 1.2.0

package/src/logger.ts

@@ -53,8 +53,8 @@ type IssueType = {
 
 type GroupedByIssueType = Record<string, IssueType>;
 
-const getIssueTypeGroups = (elementsWithIssues: Array<ElementWithIssues>) => {
-  const groupedByIssueType = elementsWithIssues.reduce((acc, { element, issues }) => {
+const getIssueTypeGroups = (elsWithIssues: Array<ElementWithIssues>) => {
+  const groupedByIssueType = elsWithIssues.reduce((acc, { element, issues }) => {
     for (const issue of issues) {
       if (!acc[issue.id]) {
         acc[issue.id] = {
@@ -80,11 +80,11 @@ const getIssueTypeGroups = (elementsWithIssues: Array<ElementWithIssues>) => {
   return sorted;
 };
 
-function logIssuesByElement(elementsWithIssues: Array<ElementWithIssues>) {
+function logIssuesByElement(elsWithIssues: Array<ElementWithIssues>) {
   // Elements with more severe issues (or with a higher number of issues of the same severity)
   // will appear higher in the output.
   // This way, issues with a higher severity will be prioritized.
-  const sortedElementsWithIssues = elementsWithIssues.toSorted((a, b) => {
+  const sortedElementsWithIssues = elsWithIssues.toSorted((a, b) => {
     const impacts = orderedImpacts.toReversed();
     const impactWithDifferentIssueCount = impacts.find((impact) => {
       const aCount = a.issues.filter((issue) => issue.impact === impact).length;
@@ -172,12 +172,12 @@ function logIssuesByType(issueTypeGroups: Array<IssueType>) {
 }
 
 function logNewIssues(
-  elementsWithIssues: Array<ElementWithIssues>,
+  elsWithIssues: Array<ElementWithIssues>,
   previousElementsWithIssues: Array<ElementWithIssues>,
 ) {
   // The elements with accessibility issues that didn't have any associated issues
   // or that weren't in the DOM at the time of last scan.
-  const addedElements = elementsWithIssues.filter((elementWithIssues) => {
+  const addedElements = elsWithIssues.filter((elementWithIssues) => {
     return !previousElementsWithIssues.some((previousElementWithIssues) =>
       areElementsWithIssuesEqual(previousElementWithIssues, elementWithIssues),
     );
@@ -185,7 +185,7 @@ function logNewIssues(
 
   // The elements that now have more issues than at the time of last scan,
   // with just the new issues (previously existing issues are filtered out).
-  const existingElementsWithNewIssues = elementsWithIssues.reduce<Array<ElementWithIssues>>(
+  const existingElementsWithNewIssues = elsWithIssues.reduce<Array<ElementWithIssues>>(
     (acc, elementWithIssues) => {
       let foundElementWithIssues: ElementWithIssues | null = null;
       for (const previousElementWithIssues of previousElementsWithIssues) {
@@ -232,17 +232,17 @@ function logNewIssues(
 }
 
 function logIssues(
-  elementsWithIssues: Array<ElementWithIssues>,
+  elsWithIssues: Array<ElementWithIssues>,
   previousElementsWithIssues: Array<ElementWithIssues>,
 ) {
-  const elementCount = elementsWithIssues.length;
+  const elementCount = elsWithIssues.length;
 
   if (elementCount === 0) {
     console.log(`No accessibility issues (Accented, ${accentedUrl}).`);
     return;
   }
 
-  const issueCount = elementsWithIssues.reduce((acc, { issues }) => acc + issues.length, 0);
+  const issueCount = elsWithIssues.reduce((acc, { issues }) => acc + issues.length, 0);
   console.group(
     `%c${issueCount} accessibility issue${issueCount === 1 ? '' : 's'} in ${elementCount} element${elementCount === 1 ? '' : 's'} (Accented, ${accentedUrl}):\n`,
     defaultStyle,
@@ -251,16 +251,16 @@ function logIssues(
   if (issueCount <= MAX_ISSUES_BEFORE_OUTPUT_COLLAPSE) {
     // Don't collapse issues if there are not too many (this hopefully helps user avoid unnecessary clicks in the console).
     // Output by element (no specific reason for this choice, just a preference).
-    logIssuesByElement(elementsWithIssues);
+    logIssuesByElement(elsWithIssues);
   } else {
     // When there are many issues, outputting them all would probably make the console too noisy,
     // so we collapse them.
     // Moreover, we output all issues twice, by element and by issue type, to give users more choice.
-    console.groupCollapsed(`%cAll by element (${elementsWithIssues.length})`, defaultStyle);
-    logIssuesByElement(elementsWithIssues);
+    console.groupCollapsed(`%cAll by element (${elsWithIssues.length})`, defaultStyle);
+    logIssuesByElement(elsWithIssues);
     console.groupEnd();
 
-    const issueTypeGroups = getIssueTypeGroups(elementsWithIssues);
+    const issueTypeGroups = getIssueTypeGroups(elsWithIssues);
     console.groupCollapsed(`%cAll by issue type (${issueTypeGroups.length})`, defaultStyle);
     logIssuesByType(issueTypeGroups);
     console.groupEnd();
@@ -269,7 +269,7 @@ function logIssues(
   if (previousElementsWithIssues.length > 0) {
     // Log new issues separately, to make it easier for the user to know what issues
     // were introduced recently.
-    logNewIssues(elementsWithIssues, previousElementsWithIssues);
+    logNewIssues(elsWithIssues, previousElementsWithIssues);
   }
 
   console.groupEnd();

package/src/scanner.ts

@@ -96,7 +96,6 @@ export function createScanner(
         extendedElementsWithIssues,
         scanContext,
         violations: result.violations,
-        win: window,
         name,
       });
 
@@ -143,7 +142,7 @@ export function createScanner(
         return !(onlyAccentedElementsAddedOrRemoved || accentedElementChanged);
       });
 
-      if (listWithoutAccentedElements.length !== 0 && !supportsAnchorPositioning(window)) {
+      if (listWithoutAccentedElements.length !== 0 && !supportsAnchorPositioning()) {
         // Something has changed in the DOM, so we need to realign all triggers with respective elements.
         recalculatePositions();
 
@@ -159,14 +158,14 @@ export function createScanner(
       // we may miss other mutations on those same elements caused by Accented,
       // leading to extra runs of the mutation observer.
       const elementsWithAccentedAttributeChanges = listWithoutAccentedElements.reduce(
-        (nodes, mutationRecord) => {
+        (acc, mutationRecord) => {
           if (
             mutationRecord.type === 'attributes' &&
             mutationRecord.attributeName === `data-${name}`
           ) {
-            nodes.add(mutationRecord.target);
+            acc.add(mutationRecord.target);
           }
-          return nodes;
+          return acc;
         },
         new Set<Node>(),
       );

package/src/state.ts

@@ -14,10 +14,10 @@ export const elementsWithIssues = computed<Array<ElementWithIssues>>(() =>
   })),
 );
 
-export const rootNodes = computed<Set<Node>>(
+export const rootNodes = computed(
   () =>
     new Set(
-      (enabled.value ? [document as Node] : []).concat(
+      Array.from<Node>(enabled.value ? [document] : []).concat(
         ...extendedElementsWithIssues.value.map(
           (extendedElementWithIssues) => extendedElementWithIssues.rootNode,
         ),
@@ -26,10 +26,10 @@ export const rootNodes = computed<Set<Node>>(
 );
 
 export const scrollableAncestors = computed<Set<Element>>(() =>
-  extendedElementsWithIssues.value.reduce((scrollableAncestors, extendedElementWithIssues) => {
+  extendedElementsWithIssues.value.reduce((acc, extendedElementWithIssues) => {
     for (const scrollableAncestor of extendedElementWithIssues.scrollableAncestors.value) {
-      scrollableAncestors.add(scrollableAncestor);
+      acc.add(scrollableAncestor);
     }
-    return scrollableAncestors;
+    return acc;
   }, new Set<Element>()),
 );

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

@@ -4,8 +4,8 @@ import { isHtmlElement } from './dom-helpers.js';
 import { getParent } from './get-parent.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);
+function isContainingBlock(element: Element): boolean {
+  const style = getComputedStyle(element);
   const {
     transform,
     perspective,
@@ -33,11 +33,11 @@ function isContainingBlock(element: Element, win: Window): boolean {
   );
 }
 
-function getNonInitialContainingBlock(element: Element, win: Window): Element | null {
+function getNonInitialContainingBlock(element: Element): Element | null {
   let currentElement: Element | null = element;
   while (currentElement) {
     currentElement = getParent(currentElement);
-    if (currentElement && isContainingBlock(currentElement, win)) {
+    if (currentElement && isContainingBlock(currentElement)) {
       return currentElement;
     }
   }
@@ -52,8 +52,8 @@ function getNonInitialContainingBlock(element: Element, win: Window): 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);
+export function getElementPosition(element: Element): Position {
+  const nonInitialContainingBlock = getNonInitialContainingBlock(element);
   // 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.

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

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

package/src/utils/recalculate-positions.ts

@@ -16,7 +16,7 @@ export function recalculatePositions() {
       batch(() => {
         for (const { element, position, visible } of extendedElementsWithIssues.value) {
           if (visible.value && element.isConnected) {
-            position.value = getElementPosition(element, window);
+            position.value = getElementPosition(element);
           }
         }
       });

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

@@ -6,7 +6,7 @@ export function recalculateScrollableAncestors() {
   batch(() => {
     for (const { element, scrollableAncestors } of extendedElementsWithIssues.value) {
       if (element.isConnected) {
-        scrollableAncestors.value = getScrollableAncestors(element, window);
+        scrollableAncestors.value = getScrollableAncestors(element);
       }
     }
   });

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