accented 0.0.0-20250303013509 → 0.0.0-20250404114312

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

@@ -0,0 +1,78 @@
+import { isElement, isDocument, isDocumentFragment } from './dom-helpers.js';
+import { getAccentedElementNames } from '../constants.js';
+
+export default 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
+          .map(mutation => [...mutation.addedNodes])
+          .flat()
+          .filter(node => isElement(node))
+          .filter(node => !accentedElementNames.includes(node.nodeName.toLowerCase()));
+
+        this.#observeShadowRoots(newElements);
+
+        const removedElements = childListMutations
+          .map(mutation => [...mutation.removedNodes])
+          .flat()
+          .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
+        .map(element => [...element.querySelectorAll('*')])
+        .flat()
+        .filter(element => element.shadowRoot)
+        .map(element => element.shadowRoot!);
+
+      for (const shadowRoot of shadowRoots) {
+        this.#shadowRoots.add(shadowRoot);
+        this.observe(shadowRoot, this.#options);
+      }
+    }
+
+    #deleteShadowRoots = (elements: Array<Element | Document | DocumentFragment>) => {
+      const shadowRoots = elements
+        .map(element => [...element.querySelectorAll('*')])
+        .flat()
+        .filter(element => element.shadowRoot)
+        .map(element => element.shadowRoot!);
+
+      for (const shadowRoot of shadowRoots) {
+        this.#shadowRoots.delete(shadowRoot);
+      }
+    }
+  }
+
+  return new ShadowDOMAwareMutationObserver(callback);
+}

package/src/utils/transform-violations.test.ts

@@ -24,12 +24,14 @@ const commonViolationProps2: Omit<Violation, 'nodes'> = {
   impact: 'serious'
 };
 
+const getRootNode = (): Node => ({} as Node);
+
 // @ts-expect-error element is not HTMLElement
-const element1: HTMLElement = {};
+const element1: HTMLElement = {getRootNode};
 // @ts-expect-error element is not HTMLElement
-const element2: HTMLElement = {};
+const element2: HTMLElement = {getRootNode};
 // @ts-expect-error element is not HTMLElement
-const element3: HTMLElement = {};
+const element3: HTMLElement = {getRootNode};
 
 const commonNodeProps = {
   html: '<div></div>',
@@ -65,7 +67,7 @@ suite('transformViolations', () => {
       ...commonViolationProps1,
       nodes: [node1]
     };
-    const elementsWithIssues = transformViolations([violation]);
+    const elementsWithIssues = transformViolations([violation], 'accented');
     assert.equal(elementsWithIssues.length, 1);
     assert.equal(elementsWithIssues[0]?.element, element1);
     assert.equal(elementsWithIssues[0].issues.length, 1);
@@ -82,7 +84,7 @@ suite('transformViolations', () => {
       ...commonViolationProps2,
       nodes: [node1, node3]
     };
-    const elementsWithIssues = transformViolations([violation1, violation2]);
+    const elementsWithIssues = transformViolations([violation1, violation2], 'accented');
     assert.equal(elementsWithIssues.length, 3);
     const elementWithTwoIssues = elementsWithIssues.find(elementWithIssues => elementWithIssues.element === element1);
     assert.equal(elementWithTwoIssues?.issues.length, 2);
@@ -101,7 +103,7 @@ suite('transformViolations', () => {
       nodes: [node]
     };
 
-    const elementsWithIssues = transformViolations([violation]);
+    const elementsWithIssues = transformViolations([violation], 'accented');
     assert.equal(elementsWithIssues.length, 0);
   });
 
@@ -118,7 +120,7 @@ suite('transformViolations', () => {
       nodes: [node]
     };
 
-    const elementsWithIssues = transformViolations([violation]);
-    assert.equal(elementsWithIssues.length, 0);
+    const elementsWithIssues = transformViolations([violation], 'accented');
+    assert.equal(elementsWithIssues.length, 1);
   });
 });

package/src/utils/transform-violations.ts

@@ -1,12 +1,29 @@
 import type { AxeResults, ImpactValue } from 'axe-core';
 import type { Issue, ElementWithIssues } from '../types';
 
+// This is a list of axe-core violations (their ids) that may be flagged by axe-core
+// as false positives if an Accented trigger is a descendant of the element with the issue.
+const violationsAffectedByAccentedTriggers = [
+  'aria-hidden-focus',
+  'aria-text',
+  'definition-list',
+  'label-content-name-mismatch',
+  'list',
+  'nested-interactive',
+  'scrollable-region-focusable' // The Accented trigger might make the content grow such that scrolling is required.
+];
+
+function maybeCausedByAccented(violationId: string, element: HTMLElement, name: string) {
+  return violationsAffectedByAccentedTriggers.includes(violationId)
+    && Boolean(element.querySelector(`${name}-trigger`));
+}
+
 function impactCompare(a: ImpactValue, b: ImpactValue) {
   const impactOrder = [null, 'minor', 'moderate', 'serious', 'critical'];
   return impactOrder.indexOf(a) - impactOrder.indexOf(b);
 }
 
-export default function transformViolations(violations: typeof AxeResults.violations) {
+export default function transformViolations(violations: typeof AxeResults.violations, name: string) {
   const elementsWithIssues: Array<ElementWithIssues> = [];
 
   for (const violation of violations) {
@@ -21,11 +38,7 @@ export default function transformViolations(violations: typeof AxeResults.violat
       // A consumer of Accented can instead scan the iframed document by calling Accented initialization from that document.
       const isInIframe = target.length > 1;
 
-      // Highlighting elements in shadow DOM is not yet supported, see https://github.com/pomerantsev/accented/issues/25
-      // Until then, we don’t want such elements to be added to the set.
-      const isInShadowDOM = Array.isArray(target[0]);
-
-      if (element && !isInIframe && !isInShadowDOM) {
+      if (element && !isInIframe && !maybeCausedByAccented(violation.id, element, name)) {
         const issue: Issue = {
           id: violation.id,
           title: violation.help,
@@ -37,6 +50,7 @@ export default function transformViolations(violations: typeof AxeResults.violat
         if (existingElementIndex === -1) {
           elementsWithIssues.push({
             element,
+            rootNode: element.getRootNode(),
             issues: [issue]
           });
         } else {

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

@@ -8,7 +8,7 @@ import updateElementsWithIssues from './update-elements-with-issues';
 import type { AxeResults, ImpactValue } from 'axe-core';
 import type { AccentedTrigger } from '../elements/accented-trigger';
 type Violation = AxeResults['violations'][number];
-type Node = Violation['nodes'][number];
+type AxeNode = Violation['nodes'][number];
 
 const win: Window & { CSS: typeof CSS } = {
   document: {
@@ -23,7 +23,8 @@ const win: Window & { CSS: typeof CSS } = {
   // @ts-expect-error we're missing a lot of properties
   getComputedStyle: () => ({
     zIndex: '',
-    direction: 'ltr'
+    direction: 'ltr',
+    getPropertyValue: () => 'none'
   }),
   // @ts-expect-error we're missing a lot of properties
   CSS: {
@@ -33,12 +34,25 @@ const win: Window & { CSS: typeof CSS } = {
 
 const getBoundingClientRect = () => ({});
 
+const getRootNode = (): Node => ({} as Node);
+
+const baseElement = {
+  getBoundingClientRect,
+  getRootNode,
+  style: {
+    getPropertyValue: () => ''
+  }
+}
+
 // @ts-expect-error element is not HTMLElement
-const element1: HTMLElement = {getBoundingClientRect, isConnected: true};
+const element1: HTMLElement = {...baseElement, isConnected: true};
 // @ts-expect-error element is not HTMLElement
-const element2: HTMLElement = {getBoundingClientRect, isConnected: true};
+const element2: HTMLElement = {...baseElement, isConnected: true};
 // @ts-expect-error element is not HTMLElement
-const element3: HTMLElement = {getBoundingClientRect, isConnected: false};
+const element3: HTMLElement = {...baseElement, isConnected: false};
+
+// @ts-expect-error rootNode is not Node
+const rootNode: Node = {};
 
 const trigger = win.document.createElement('accented-trigger') as AccentedTrigger;
 
@@ -61,17 +75,17 @@ const commonNodeProps = {
   target: ['div']
 };
 
-const node1: Node = {
+const node1: AxeNode = {
   ...commonNodeProps,
   element: element1,
 };
 
-const node2: Node = {
+const node2: AxeNode = {
   ...commonNodeProps,
   element: element2,
 };
 
-const node3: Node = {
+const node3: AxeNode = {
   ...commonNodeProps,
   element: element3,
 };
@@ -136,18 +150,22 @@ suite('updateElementsWithIssues', () => {
       {
         id: 1,
         element: element1,
+        rootNode,
         position,
         visible,
         trigger,
+        anchorNameValue: 'none',
         scrollableAncestors,
         issues: signal([issue1])
       },
       {
         id: 2,
         element: element2,
+        rootNode,
         position,
         visible,
         trigger,
+        anchorNameValue: 'none',
         scrollableAncestors,
         issues: signal([issue2])
       }
@@ -165,18 +183,22 @@ suite('updateElementsWithIssues', () => {
       {
         id: 1,
         element: element1,
+        rootNode,
         position,
         visible,
         trigger,
+        anchorNameValue: 'none',
         scrollableAncestors,
         issues: signal([issue1])
       },
       {
         id: 2,
         element: element2,
+        rootNode,
         position,
         visible,
         trigger,
+        anchorNameValue: 'none',
         scrollableAncestors,
         issues: signal([issue2])
       }
@@ -194,18 +216,22 @@ suite('updateElementsWithIssues', () => {
       {
         id: 1,
         element: element1,
+        rootNode,
         position,
         visible,
         trigger,
+        anchorNameValue: 'none',
         scrollableAncestors,
         issues: signal([issue1])
       },
       {
         id: 2,
         element: element2,
+        rootNode,
         position,
         visible,
         trigger,
+        anchorNameValue: 'none',
         scrollableAncestors,
         issues: signal([issue2, issue3])
       }
@@ -223,9 +249,11 @@ suite('updateElementsWithIssues', () => {
       {
         id: 1,
         element: element1,
+        rootNode,
         position,
         visible,
         trigger,
+        anchorNameValue: 'none',
         scrollableAncestors,
         issues: signal([issue1])
       }
@@ -243,9 +271,11 @@ suite('updateElementsWithIssues', () => {
       {
         id: 1,
         element: element1,
+        rootNode,
         position,
         visible,
         trigger,
+        anchorNameValue: 'none',
         scrollableAncestors,
         issues: signal([issue1])
       }
@@ -260,18 +290,22 @@ suite('updateElementsWithIssues', () => {
       {
         id: 1,
         element: element1,
+        rootNode,
         position,
         visible,
         trigger,
+        anchorNameValue: 'none',
         scrollableAncestors,
         issues: signal([issue1])
       },
       {
         id: 2,
         element: element2,
+        rootNode,
         position,
         visible,
         trigger,
+        anchorNameValue: 'none',
         scrollableAncestors,
         issues: signal([issue2])
       }

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

@@ -3,6 +3,7 @@ import type { Signal } from '@preact/signals-core';
 import { batch, signal } from '@preact/signals-core';
 import type { ExtendedElementWithIssues } from '../types';
 import transformViolations from './transform-violations.js';
+import areElementsWithIssuesEqual from './are-elements-with-issues-equal.js';
 import areIssueSetsEqual from './are-issue-sets-equal.js';
 import type { AccentedTrigger } from '../elements/accented-trigger';
 import type { AccentedDialog } from '../elements/accented-dialog';
@@ -13,28 +14,28 @@ import supportsAnchorPositioning from './supports-anchor-positioning.js';
 let count = 0;
 
 export default function updateElementsWithIssues(extendedElementsWithIssues: Signal<Array<ExtendedElementWithIssues>>, violations: typeof AxeResults.violations, win: Window & { CSS: typeof CSS }, name: string) {
-  const updatedElementsWithIssues = transformViolations(violations);
+  const updatedElementsWithIssues = transformViolations(violations, name);
 
   batch(() => {
     for (const updatedElementWithIssues of updatedElementsWithIssues) {
-      const existingElementIndex = extendedElementsWithIssues.value.findIndex(extendedElementWithIssues => extendedElementWithIssues.element === updatedElementWithIssues.element);
+      const existingElementIndex = extendedElementsWithIssues.value.findIndex(extendedElementWithIssues => areElementsWithIssuesEqual(extendedElementWithIssues, updatedElementWithIssues));
       if (existingElementIndex > -1 && extendedElementsWithIssues.value[existingElementIndex] && !areIssueSetsEqual(extendedElementsWithIssues.value[existingElementIndex].issues.value, updatedElementWithIssues.issues)) {
         extendedElementsWithIssues.value[existingElementIndex].issues.value = updatedElementWithIssues.issues;
       }
     }
 
     const addedElementsWithIssues = updatedElementsWithIssues.filter(updatedElementWithIssues => {
-      return !extendedElementsWithIssues.value.some(extendedElementWithIssues => extendedElementWithIssues.element === updatedElementWithIssues.element);
+      return !extendedElementsWithIssues.value.some(extendedElementWithIssues => areElementsWithIssuesEqual(extendedElementWithIssues, updatedElementWithIssues));
     });
 
     const removedElementsWithIssues = extendedElementsWithIssues.value.filter(extendedElementWithIssues => {
-      return !updatedElementsWithIssues.some(updatedElementWithIssues => updatedElementWithIssues.element === extendedElementWithIssues.element);
+      return !updatedElementsWithIssues.some(updatedElementWithIssues => areElementsWithIssuesEqual(updatedElementWithIssues, extendedElementWithIssues));
     });
 
     if (addedElementsWithIssues.length > 0 || removedElementsWithIssues.length > 0) {
       extendedElementsWithIssues.value = [...extendedElementsWithIssues.value]
         .filter(extendedElementWithIssues => {
-          return !removedElementsWithIssues.some(removedElementWithIssues => removedElementWithIssues.element === extendedElementWithIssues.element);
+          return !removedElementsWithIssues.some(removedElementWithIssues => areElementsWithIssuesEqual(removedElementWithIssues, extendedElementWithIssues));
         })
         .concat(addedElementsWithIssues
           .filter(addedElementWithIssues => addedElementWithIssues.element.isConnected)
@@ -62,9 +63,13 @@ export default function updateElementsWithIssues(extendedElementsWithIssues: Sig
             return {
               id,
               element: addedElementWithIssues.element,
+              rootNode: addedElementWithIssues.rootNode,
               visible: trigger.visible,
               position: trigger.position,
               scrollableAncestors: signal(scrollableAncestors),
+              anchorNameValue:
+                addedElementWithIssues.element.style.getPropertyValue('anchor-name')
+                || win.getComputedStyle(addedElementWithIssues.element).getPropertyValue('anchor-name'),
               trigger,
               issues
             };

package/dist/utils/is-html-element.d.ts

@@ -1,2 +0,0 @@
-export default function isHtmlElement(element: Element): element is HTMLElement;
-//# sourceMappingURL=is-html-element.d.ts.map

package/dist/utils/is-html-element.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"is-html-element.d.ts","sourceRoot":"","sources":["../../src/utils/is-html-element.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,OAAO,UAAU,aAAa,CAAC,OAAO,EAAE,OAAO,GAAG,OAAO,IAAI,WAAW,CAK9E"}

package/dist/utils/is-html-element.js

@@ -1,7 +0,0 @@
-export default function isHtmlElement(element) {
-    // We can't use instanceof because it may not work across contexts
-    // (such as when an element is moved from an iframe).
-    // This heuristic seems to be the most robust and fastest that I could think of.
-    return element.constructor.name.startsWith('HTML');
-}
-//# sourceMappingURL=is-html-element.js.map

package/dist/utils/is-html-element.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"is-html-element.js","sourceRoot":"","sources":["../../src/utils/is-html-element.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,OAAO,UAAU,aAAa,CAAC,OAAgB;IACpD,kEAAkE;IAClE,qDAAqD;IACrD,gFAAgF;IAChF,OAAO,OAAO,CAAC,WAAW,CAAC,IAAI,CAAC,UAAU,CAAC,MAAM,CAAC,CAAC;AACrD,CAAC"}

package/src/utils/is-html-element.ts

@@ -1,6 +0,0 @@
-export default function isHtmlElement(element: Element): element is HTMLElement {
-  // We can't use instanceof because it may not work across contexts
-  // (such as when an element is moved from an iframe).
-  // This heuristic seems to be the most robust and fastest that I could think of.
-  return element.constructor.name.startsWith('HTML');
-}