accented 0.0.0-20250223121749 → 0.0.0-20250404114312

package/src/state.ts

@@ -8,10 +8,18 @@ export const extendedElementsWithIssues = signal<Array<ExtendedElementWithIssues
 
 export const elementsWithIssues = computed<Array<ElementWithIssues>>(() => extendedElementsWithIssues.value.map(extendedElementWithIssues => ({
   element: extendedElementWithIssues.element,
+  rootNode: extendedElementWithIssues.rootNode,
   issues: extendedElementWithIssues.issues.value
 })));
 
-export const scrollableAncestors = computed<Set<HTMLElement>>(() =>
+export const rootNodes = computed<Set<Node>>(() =>
+  new Set(
+    (enabled.value ? [document as Node] : [])
+      .concat(...(extendedElementsWithIssues.value.map(extendedElementWithIssues => extendedElementWithIssues.rootNode)))
+  )
+);
+
+export const scrollableAncestors = computed<Set<Element>>(() =>
   extendedElementsWithIssues.value.reduce(
     (scrollableAncestors, extendedElementWithIssues) => {
       for (const scrollableAncestor of extendedElementWithIssues.scrollableAncestors.value) {
@@ -19,6 +27,6 @@ export const scrollableAncestors = computed<Set<HTMLElement>>(() =>
       }
       return scrollableAncestors;
     },
-    new Set<HTMLElement>()
+    new Set<Element>()
   )
 );

package/src/types.ts

@@ -42,9 +42,17 @@ type CallbackParams = {
   elementsWithIssues: Array<ElementWithIssues>,
 
   /**
-   * How long the scan took in milliseconds.
+   * * `performance`: runtime performance of the last scan. An object:
+   * * `totalBlockingTime`: how long the main thread was blocked by Accented during the last scan, in milliseconds.
+   *   It’s further divided into the `scan` and `domUpdate` phases.
+   * * `scan`: how long the `scan` phase took, in milliseconds.
+   * * `domUpdate`: how long the `domUpdate` phase took, in milliseconds.
    * */
-  scanDuration: number
+  performance: {
+    totalBlockingTime: number,
+    scan: number,
+    domUpdate: number
+  }
 }
 
 export type Callback = (params: CallbackParams) => void;
@@ -127,9 +135,10 @@ export type AccentedOptions = {
 export type DisableAccented = () => void;
 
 export type Position = {
-  inlineEndLeft: number,
-  blockStartTop: number,
-  direction: 'ltr' | 'rtl'
+  left: number,
+  top: number,
+  width: number,
+  height: number
 };
 
 export type Issue = {
@@ -140,16 +149,21 @@ export type Issue = {
   impact: axe.ImpactValue
 };
 
-export type ElementWithIssues = {
+export type BaseElementWithIssues = {
   element: HTMLElement,
+  rootNode: Node
+};
+
+export type ElementWithIssues = BaseElementWithIssues &{
   issues: Array<Issue>
-}
+};
 
-export type ExtendedElementWithIssues = Omit<ElementWithIssues, 'issues'> & {
+export type ExtendedElementWithIssues = BaseElementWithIssues & {
   issues: Signal<ElementWithIssues['issues']>,
   visible: Signal<boolean>,
   trigger: AccentedTrigger,
   position: Signal<Position>,
-  scrollableAncestors: Signal<Set<HTMLElement>>
+  anchorNameValue: string,
+  scrollableAncestors: Signal<Set<Element>>
   id: number
 };

package/src/utils/are-elements-with-issues-equal.ts

@@ -0,0 +1,9 @@
+import type { BaseElementWithIssues } from "../types";
+
+export default function areElementsWithIssuesEqual(
+  elementWithIssues1: BaseElementWithIssues,
+  elementWithIssues2: BaseElementWithIssues
+) {
+  return elementWithIssues1.element === elementWithIssues2.element
+    && elementWithIssues1.rootNode === elementWithIssues2.rootNode;
+}

package/src/utils/dom-helpers.ts

@@ -0,0 +1,22 @@
+export function isElement(node: Node): node is Element {
+  return typeof Node !== 'undefined' && node.nodeType === Node.ELEMENT_NODE;
+}
+
+export function isDocument(node: Node): node is Document {
+  return typeof Node !== 'undefined' && node.nodeType === Node.DOCUMENT_NODE;
+}
+
+export function isDocumentFragment(node: Node): node is DocumentFragment {
+  return typeof Node !== 'undefined' && node.nodeType === Node.DOCUMENT_FRAGMENT_NODE;
+}
+
+export function isShadowRoot(documentFragment: DocumentFragment): documentFragment is ShadowRoot {
+  return 'host' in documentFragment;
+}
+
+export 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');
+}

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

@@ -1,21 +1,60 @@
 import type { Position } from '../types';
+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);
+  const { transform, perspective } = style;
+  // TODO: https://github.com/pomerantsev/accented/issues/119
+  // Support other types of containing blocks
+  return transform !== 'none'
+    || perspective !== 'none';
+}
+
+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;
+}
 
 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') {
-    return {
-      inlineEndLeft: rect.left,
-      blockStartTop: rect.top,
-      direction
-    };
+  const nonInitialContainingBlock = getNonInitialContainingBlock(element, win);
+  // If an element has an ancestor whose transform is not 'none',
+  // fixed positioning works differently.
+  // 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 };
+    } else {
+      // TODO: https://github.com/pomerantsev/accented/issues/116
+      // This is half-baked. It works incorrectly with scaled / rotated elements with issues.
+      const elementRect = element.getBoundingClientRect();
+      const nonInitialContainingBlockRect = nonInitialContainingBlock.getBoundingClientRect();
+      return {
+        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

@@ -0,0 +1,14 @@
+import { isDocumentFragment, isShadowRoot } from './dom-helpers.js';
+
+export default 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-scrollable-ancestors.ts

@@ -1,10 +1,15 @@
+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 default function getScrollableAncestors (element: Element, win: Window) {
+  let currentElement: Element | null = element;
+  let 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)) {
       scrollableAncestors.add(currentElement);

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,19 +34,33 @@ 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;
 
 const position = signal({
-  inlineEndLeft: 0,
-  blockStartTop: 0,
-  direction: 'ltr' as const
+  left: 0,
+  width: 100,
+  top: 0,
+  height: 100
 });
 
 const visible = signal(true);
@@ -60,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,
 };
@@ -135,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])
       }
@@ -164,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])
       }
@@ -193,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])
       }
@@ -222,9 +249,11 @@ suite('updateElementsWithIssues', () => {
       {
         id: 1,
         element: element1,
+        rootNode,
         position,
         visible,
         trigger,
+        anchorNameValue: 'none',
         scrollableAncestors,
         issues: signal([issue1])
       }
@@ -242,9 +271,11 @@ suite('updateElementsWithIssues', () => {
       {
         id: 1,
         element: element1,
+        rootNode,
         position,
         visible,
         trigger,
+        anchorNameValue: 'none',
         scrollableAncestors,
         issues: signal([issue1])
       }
@@ -259,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
             };