accented 0.0.0-20250404114312 → 0.0.0-20250618181418

package/src/elements/accented-trigger.ts

@@ -1,9 +1,9 @@
-import type { AccentedDialog } from './accented-dialog';
-import type { Position } from '../types';
 import { effect } from '@preact/signals-core';
 import type { Signal } from '@preact/signals-core';
-import supportsAnchorPositioning from '../utils/supports-anchor-positioning.js';
-import logAndRethrow from '../log-and-rethrow.js';
+import { logAndRethrow } from '../log-and-rethrow.js';
+import type { Position } from '../types.ts';
+import { supportsAnchorPositioning } from '../utils/supports-anchor-positioning.js';
+import type { AccentedDialog } from './accented-dialog.ts';
 
 export interface AccentedTrigger extends HTMLElement {
   element: Element | undefined;
@@ -14,7 +14,7 @@ export interface AccentedTrigger extends HTMLElement {
 
 // We want Accented to not throw an error in Node, and use static imports,
 // so we can't export `class extends HTMLElement` because HTMLElement is not available in Node.
-export default (name: string) => {
+export const getAccentedTrigger = (name: string) => {
   const template = document.createElement('template');
 
   // I initially tried creating a CSSStyelSheet object with styles instead of having a <style> element in the template,
@@ -33,8 +33,6 @@ export default (name: string) => {
         inset-block-start: anchor(self-start) !important;
         inset-block-end: anchor(self-end) !important;
 
-        position-visibility: anchors-visible !important;
-
         /* Revert potential effects of white-space: pre; set on a trigger's ancestor. */
         white-space: normal !important;
 
@@ -44,11 +42,12 @@ export default (name: string) => {
       #trigger {
         pointer-events: auto;
 
-        position: absolute;
-        inset-block-start: 4px;
-        inset-inline-end: 4px;
+        margin-inline-start: auto;
+        margin-inline-end: 4px;
+        margin-block-start: 4px;
 
         box-sizing: border-box;
+        font-family: system-ui;
         font-size: calc(var(--ratio) * var(--ratio) * var(--base-size));
         inline-size: calc(2 * var(--base-size));
         block-size: calc(2 * var(--base-size));
@@ -81,7 +80,7 @@ export default (name: string) => {
         }
       }
     </style>
-    <button id="trigger" lang="en">!</button>
+    <button id="trigger" lang="en">á</button>
   `;
 
   return class extends HTMLElement implements AccentedTrigger {
@@ -104,8 +103,8 @@ export default (name: string) => {
     visible: Signal<boolean> | undefined;
 
     constructor() {
+      super();
       try {
-        super();
         this.attachShadow({ mode: 'open' });
         const content = template.content.cloneNode(true);
         if (this.shadowRoot) {
@@ -137,42 +136,50 @@ export default (name: string) => {
 
           if (this.element) {
             this.#elementMutationObserver.observe(this.element, {
-              attributes: true
+              attributes: true,
             });
           }
 
           this.#abortController = new AbortController();
-          trigger?.addEventListener('click', (event) => {
-            try {
-              // event.preventDefault() ensures that if the issue is within a link,
-              // the link's default behavior (following the URL) is prevented.
-              event.preventDefault();
-
-              // event.stopPropagation() ensures that if there's a click handler on the trigger's ancestor
-              // (a link, or a button, or anything else), it doesn't get triggered.
-              event.stopPropagation();
-
-              // We append the dialog when the button is clicked,
-              // and remove it from the DOM when the dialog is closed.
-              // This gives us a performance improvement since Axe
-              // scan time seems to depend on the number of elements in the DOM.
-              if (this.dialog) {
-                this.#dialogCloseAbortController = new AbortController();
-                document.body.append(this.dialog);
-                this.dialog.showModal();
-                this.dialog.addEventListener('close', () => {
-                  try {
-                    this.dialog?.remove();
-                    this.#dialogCloseAbortController?.abort();
-                  } catch (error) {
-                    logAndRethrow(error);
-                  }
-                }, { signal: this.#dialogCloseAbortController.signal });
+          trigger?.addEventListener(
+            'click',
+            (event) => {
+              try {
+                // event.preventDefault() ensures that if the issue is within a link,
+                // the link's default behavior (following the URL) is prevented.
+                event.preventDefault();
+
+                // event.stopPropagation() ensures that if there's a click handler on the trigger's ancestor
+                // (a link, or a button, or anything else), it doesn't get triggered.
+                event.stopPropagation();
+
+                // We append the dialog when the button is clicked,
+                // and remove it from the DOM when the dialog is closed.
+                // This gives us a performance improvement since Axe
+                // scan time seems to depend on the number of elements in the DOM.
+                if (this.dialog) {
+                  this.#dialogCloseAbortController = new AbortController();
+                  document.body.append(this.dialog);
+                  this.dialog.showModal();
+                  this.dialog.addEventListener(
+                    'close',
+                    () => {
+                      try {
+                        this.dialog?.remove();
+                        this.#dialogCloseAbortController?.abort();
+                      } catch (error) {
+                        logAndRethrow(error);
+                      }
+                    },
+                    { signal: this.#dialogCloseAbortController.signal },
+                  );
+                }
+              } catch (error) {
+                logAndRethrow(error);
               }
-            } catch (error) {
-              logAndRethrow(error);
-            }
-          }, { signal: this.#abortController.signal });
+            },
+            { signal: this.#abortController.signal },
+          );
 
           if (!supportsAnchorPositioning(window)) {
             this.#disposeOfPositionEffect = effect(() => {
@@ -184,11 +191,14 @@ export default (name: string) => {
                 this.style.setProperty('height', `${position.height}px`, 'important');
               }
             });
-
-            this.#disposeOfVisibilityEffect = effect(() => {
-              this.style.setProperty('visibility', this.visible?.value ? 'visible' : 'hidden', 'important');
-            });
           }
+          this.#disposeOfVisibilityEffect = effect(() => {
+            this.style.setProperty(
+              'visibility',
+              this.visible?.value ? 'visible' : 'hidden',
+              'important',
+            );
+          });
         }
       } catch (error) {
         logAndRethrow(error);
@@ -200,7 +210,7 @@ export default (name: string) => {
         if (this.#abortController) {
           this.#abortController.abort();
         }
-        if (this.#dialogCloseAbortController) {
+        if (this.#dialogCloseAbortController && !this.dialog?.open) {
           this.#dialogCloseAbortController.abort();
           this.dialog?.remove();
         }

package/src/fullscreen-listener.ts

@@ -1,17 +1,21 @@
-import logAndRethrow from './log-and-rethrow.js';
-import recalculatePositions from './utils/recalculate-positions.js';
+import { logAndRethrow } from './log-and-rethrow.js';
+import { recalculatePositions } from './utils/recalculate-positions.js';
 
-export default function setupResizeListener() {
+export function setupResizeListener() {
   const abortController = new AbortController();
-  window.addEventListener('fullscreenchange', () => {
-    try {
-      recalculatePositions();
-    } catch (error) {
-      logAndRethrow(error);
-    }
-  }, { signal: abortController.signal });
+  window.addEventListener(
+    'fullscreenchange',
+    () => {
+      try {
+        recalculatePositions();
+      } catch (error) {
+        logAndRethrow(error);
+      }
+    },
+    { signal: abortController.signal },
+  );
 
   return () => {
     abortController.abort();
   };
-};
+}

package/src/intersection-observer.ts

@@ -1,28 +1,39 @@
-import logAndRethrow from './log-and-rethrow.js';
+import { logAndRethrow } from './log-and-rethrow.js';
 import { extendedElementsWithIssues } from './state.js';
-import getElementPosition from './utils/get-element-position.js';
+import { getElementPosition } from './utils/get-element-position.js';
+import { supportsAnchorPositioning } from './utils/supports-anchor-positioning.js';
 
-export default function setupIntersectionObserver() {
-  const intersectionObserver = new IntersectionObserver((entries) => {
-    try {
-      for (const entry of entries) {
-        const extendedElementWithIssues = extendedElementsWithIssues.value.find(el => el.element === entry.target);
-        if (extendedElementWithIssues) {
-          extendedElementWithIssues.visible.value = entry.isIntersecting;
-          if (entry.isIntersecting) {
-            extendedElementWithIssues.position.value = getElementPosition(entry.target, window);
+export function setupIntersectionObserver() {
+  const intersectionObserver = new IntersectionObserver(
+    (entries) => {
+      try {
+        for (const entry of entries) {
+          const extendedElementWithIssues = extendedElementsWithIssues.value.find(
+            (el) => el.element === entry.target,
+          );
+          if (extendedElementWithIssues) {
+            // We initially treated setting visibility in the intersection observer
+            // as a fallback option for browsers that don't support `position-visibility`,
+            // but then we realized that this `position-visibility` actually works
+            // in an unexpected way when the container has `overflow: visible`.
+            // So now we always set visibility in the intersection observer.
+            extendedElementWithIssues.visible.value = entry.isIntersecting;
+            if (entry.isIntersecting && !supportsAnchorPositioning(window)) {
+              extendedElementWithIssues.position.value = getElementPosition(entry.target, window);
+            }
           }
         }
+      } catch (error) {
+        logAndRethrow(error);
       }
-    } catch (error) {
-      logAndRethrow(error);
-    }
-  }, { threshold: 0 });
+    },
+    { threshold: 0 },
+  );
 
   return {
     intersectionObserver,
     disconnect: () => {
       intersectionObserver.disconnect();
-    }
+    },
   };
 }

package/src/log-and-rethrow.ts

@@ -1,9 +1,8 @@
 import { issuesUrl } from './constants.js';
 
-export default function logAndRethrow(error: unknown) {
+export function logAndRethrow(error: unknown) {
   console.error(
-    `Accented threw an error (see below). Try updating your browser to the latest version. ` +
-      `If you’re still seeing the error, file an issue at ${issuesUrl}.`
+    `Accented threw an error (see below). Try updating your browser to the latest version. If you’re still seeing the error, file an issue at ${issuesUrl}.`,
   );
   throw error;
 }

package/src/logger.ts

@@ -1,9 +1,13 @@
 import { effect } from '@preact/signals-core';
-import { elementsWithIssues, enabled } from './state.js';
 import { accentedUrl } from './constants.js';
+import { elementsWithIssues, enabled } from './state.js';
+import type { ElementWithIssues } from './types.ts';
 
-export default function createLogger() {
+function filterPropsForOutput(elements: Array<ElementWithIssues>) {
+  return elements.map(({ element, issues }) => ({ element, issues }));
+}
 
+export function createLogger() {
   let firstRun = true;
 
   return effect(() => {
@@ -13,8 +17,14 @@ export default function createLogger() {
 
     const elementCount = elementsWithIssues.value.length;
     if (elementCount > 0) {
-      const issueCount = elementsWithIssues.value.reduce((acc, { issues }) => acc + issues.length, 0);
-      console.log(`${issueCount} accessibility issue${issueCount === 1 ? '' : 's'} found in ${elementCount} element${issueCount === 1 ? '' : 's'} (Accented, ${accentedUrl}):\n`, elementsWithIssues.value);
+      const issueCount = elementsWithIssues.value.reduce(
+        (acc, { issues }) => acc + issues.length,
+        0,
+      );
+      console.log(
+        `${issueCount} accessibility issue${issueCount === 1 ? '' : 's'} found in ${elementCount} element${issueCount === 1 ? '' : 's'} (Accented, ${accentedUrl}):\n`,
+        filterPropsForOutput(elementsWithIssues.value),
+      );
     } else {
       if (firstRun) {
         firstRun = false;

package/src/register-elements.ts

@@ -1,16 +1,16 @@
-import getAccentedTrigger from './elements/accented-trigger.js';
-import getAccentedDialog from './elements/accented-dialog.js';
+import { getAccentedDialog } from './elements/accented-dialog.js';
+import { getAccentedTrigger } from './elements/accented-trigger.js';
 
-export default function registerElements(name: string): void {
+export function registerElements(name: string): void {
   const elements = [
     {
       elementName: `${name}-trigger`,
-      Component: getAccentedTrigger(name)
+      Component: getAccentedTrigger(name),
     },
     {
       elementName: `${name}-dialog`,
-      Component: getAccentedDialog()
-    }
+      Component: getAccentedDialog(),
+    },
   ];
 
   for (const { elementName, Component } of elements) {
@@ -18,4 +18,4 @@ export default function registerElements(name: string): void {
       customElements.define(elementName, Component);
     }
   }
-};
+}

package/src/resize-listener.ts

@@ -1,17 +1,21 @@
-import logAndRethrow from './log-and-rethrow.js';
-import recalculatePositions from './utils/recalculate-positions.js';
+import { logAndRethrow } from './log-and-rethrow.js';
+import { recalculatePositions } from './utils/recalculate-positions.js';
 
-export default function setupResizeListener() {
+export function setupResizeListener() {
   const abortController = new AbortController();
-  window.addEventListener('resize', () => {
-    try {
-      recalculatePositions();
-    } catch (error) {
-      logAndRethrow(error);
-    }
-  }, { signal: abortController.signal });
+  window.addEventListener(
+    'resize',
+    () => {
+      try {
+        recalculatePositions();
+      } catch (error) {
+        logAndRethrow(error);
+      }
+    },
+    { signal: abortController.signal },
+  );
 
   return () => {
     abortController.abort();
   };
-};
+}

package/src/scanner.ts

@@ -1,19 +1,26 @@
 import axe from 'axe-core';
-import TaskQueue from './task-queue.js';
-import { elementsWithIssues, enabled, extendedElementsWithIssues } from './state.js';
-import type { AxeOptions, Throttle, Callback, AxeContext } from './types';
-import updateElementsWithIssues from './utils/update-elements-with-issues.js';
-import recalculatePositions from './utils/recalculate-positions.js';
-import recalculateScrollableAncestors from './utils/recalculate-scrollable-ancestors.js';
-import supportsAnchorPositioning from './utils/supports-anchor-positioning.js';
 import { getAccentedElementNames, issuesUrl } from './constants.js';
-import logAndRethrow from './log-and-rethrow.js';
-import createShadowDOMAwareMutationObserver from './utils/shadow-dom-aware-mutation-observer.js';
-
-export default function createScanner(name: string, axeContext: AxeContext, axeOptions: AxeOptions, throttle: Required<Throttle>, callback: Callback) {
+import { logAndRethrow } from './log-and-rethrow.js';
+import { elementsWithIssues, enabled, extendedElementsWithIssues } from './state.js';
+import { TaskQueue } from './task-queue.js';
+import type { AxeOptions, Callback, Context, Throttle } from './types.ts';
+import { getScanContext } from './utils/get-scan-context.js';
+import { recalculatePositions } from './utils/recalculate-positions.js';
+import { recalculateScrollableAncestors } from './utils/recalculate-scrollable-ancestors.js';
+import { createShadowDOMAwareMutationObserver } from './utils/shadow-dom-aware-mutation-observer.js';
+import { supportsAnchorPositioning } from './utils/supports-anchor-positioning.js';
+import { updateElementsWithIssues } from './utils/update-elements-with-issues.js';
+
+export function createScanner(
+  name: string,
+  context: Context,
+  axeOptions: AxeOptions,
+  throttle: Required<Throttle>,
+  callback: Callback,
+) {
   const axeRunningWindowProp = `__${name}_axe_running__`;
-  const win: Record<string, any> = window;
-  const taskQueue = new TaskQueue<Node>(async () => {
+  const win = window as unknown as Record<string, boolean>;
+  const taskQueue = new TaskQueue<Node>(async (nodes) => {
     // We may see errors coming from axe-core when Accented is toggled off and on in qiuck succession,
     // which I've seen happen with hot reloading of a React application.
     // This window property serves as a circuit breaker for that particular case.
@@ -22,17 +29,16 @@ export default function createScanner(name: string, axeContext: AxeContext, axeO
     }
 
     try {
-
       performance.mark('scan-start');
 
       win[axeRunningWindowProp] = true;
 
-      let result;
+      const scanContext = getScanContext(nodes, context);
+
+      let result: axe.AxeResults | undefined;
 
       try {
-        // TODO (https://github.com/pomerantsev/accented/issues/102):
-        // only run Axe on what's changed, not on the whole axeContext
-        result = await axe.run(axeContext, {
+        result = await axe.run(scanContext, {
           elementRef: true,
           // Although axe-core can perform iframe scanning, I haven't succeeded in it,
           // and the docs suggest that the axe-core script should be explicitly included
@@ -42,29 +48,32 @@ export default function createScanner(name: string, axeContext: AxeContext, axeO
           // A consumer of Accented can instead scan the iframed document by calling Accented initialization from that document.
           iframes: false,
           resultTypes: ['violations'],
-          ...axeOptions
+          ...axeOptions,
         });
       } catch (error) {
         console.error(
-          'Accented: axe-core (the accessibility testing engine) threw an error. ' +
-            'Check the `axeOptions` property that you’re passing to Accented. ' +
-            `If you still think it’s a bug in Accented, file an issue at ${issuesUrl}.\n`,
-          error
+          `Accented: axe-core (the accessibility testing engine) threw an error. Check the \`axeOptions\` property that you’re passing to Accented. If you still think it’s a bug in Accented, file an issue at ${issuesUrl}.\n`,
+          error,
         );
-        result = { violations: [] };
       }
       win[axeRunningWindowProp] = false;
 
       const scanMeasure = performance.measure('scan', 'scan-start');
       const scanDuration = Math.round(scanMeasure.duration);
 
-      if (!enabled.value) {
+      if (!enabled.value || !result) {
         return;
       }
 
       performance.mark('dom-update-start');
 
-      updateElementsWithIssues(extendedElementsWithIssues, result.violations, window, name);
+      updateElementsWithIssues({
+        extendedElementsWithIssues,
+        scanContext,
+        violations: result.violations,
+        win: window,
+        name,
+      });
 
       const domUpdateMeasure = performance.measure('dom-update', 'dom-update-start');
       const domUpdateDuration = Math.round(domUpdateMeasure.duration);
@@ -74,8 +83,12 @@ export default function createScanner(name: string, axeContext: AxeContext, axeO
         performance: {
           totalBlockingTime: scanDuration + domUpdateDuration,
           scan: scanDuration,
-          domUpdate: domUpdateDuration
-        }
+          domUpdate: domUpdateDuration,
+          // Assuming that the {include, exclude} shape of the context object will be used less often
+          // than other variants, we'll output just the `include` array in case nothing is excluded
+          // in the scan.
+          scanContext: scanContext.exclude.length > 0 ? scanContext : scanContext.include,
+        },
       });
     } catch (error) {
       win[axeRunningWindowProp] = false;
@@ -83,21 +96,24 @@ export default function createScanner(name: string, axeContext: AxeContext, axeO
     }
   }, throttle);
 
-  // TODO (https://github.com/pomerantsev/accented/issues/102):
-  // limit to what's in axeContext,
-  // if that's an element or array of elements (not a selector).
   taskQueue.add(document);
 
   const accentedElementNames = getAccentedElementNames(name);
-  const mutationObserver = createShadowDOMAwareMutationObserver(name, mutationList => {
+  const mutationObserver = createShadowDOMAwareMutationObserver(name, (mutationList) => {
     try {
       // We're not interested in mutations that are caused exclusively by the custom elements
       // introduced by Accented.
-      const listWithoutAccentedElements = mutationList.filter(mutationRecord => {
-        const onlyAccentedElementsAddedOrRemoved = mutationRecord.type === 'childList' &&
-          [...mutationRecord.addedNodes].every(node => accentedElementNames.includes(node.nodeName.toLowerCase())) &&
-          [...mutationRecord.removedNodes].every(node => accentedElementNames.includes(node.nodeName.toLowerCase()));
-        const accentedElementChanged = mutationRecord.type === 'attributes' &&
+      const listWithoutAccentedElements = mutationList.filter((mutationRecord) => {
+        const onlyAccentedElementsAddedOrRemoved =
+          mutationRecord.type === 'childList' &&
+          [...mutationRecord.addedNodes].every((node) =>
+            accentedElementNames.includes(node.nodeName.toLowerCase()),
+          ) &&
+          [...mutationRecord.removedNodes].every((node) =>
+            accentedElementNames.includes(node.nodeName.toLowerCase()),
+          );
+        const accentedElementChanged =
+          mutationRecord.type === 'attributes' &&
           accentedElementNames.includes(mutationRecord.target.nodeName.toLowerCase());
         return !(onlyAccentedElementsAddedOrRemoved || accentedElementChanged);
       });
@@ -117,31 +133,35 @@ export default function createScanner(name: string, axeContext: AxeContext, axeO
       // If we simply exclude all mutations where attributeName = `data-${name}`,
       // 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) => {
-        if (mutationRecord.type === 'attributes' && mutationRecord.attributeName === `data-${name}`) {
-          nodes.add(mutationRecord.target);
-        }
-        return nodes;
-      }, new Set<Node>());
-
-      const filteredMutationList = listWithoutAccentedElements.filter(mutationRecord => {
+      const elementsWithAccentedAttributeChanges = listWithoutAccentedElements.reduce(
+        (nodes, mutationRecord) => {
+          if (
+            mutationRecord.type === 'attributes' &&
+            mutationRecord.attributeName === `data-${name}`
+          ) {
+            nodes.add(mutationRecord.target);
+          }
+          return nodes;
+        },
+        new Set<Node>(),
+      );
+
+      const filteredMutationList = listWithoutAccentedElements.filter((mutationRecord) => {
         return !elementsWithAccentedAttributeChanges.has(mutationRecord.target);
       });
 
-      taskQueue.addMultiple(filteredMutationList.map(mutationRecord => mutationRecord.target));
+      const nodes = filteredMutationList.map((mutationRecord) => mutationRecord.target);
+      taskQueue.addMultiple(nodes);
     } catch (error) {
       logAndRethrow(error);
     }
   });
 
-  // TODO (https://github.com/pomerantsev/accented/issues/102):
-  // possibly limit the observer to what's in axeContext,
-  // if that's an element or array of elements (not a selector).
   mutationObserver.observe(document, {
     subtree: true,
     childList: true,
     attributes: true,
-    characterData: true
+    characterData: true,
   });
 
   return () => {

package/src/scroll-listeners.ts

@@ -1,37 +1,45 @@
 import { effect } from '@preact/signals-core';
-import recalculatePositions from './utils/recalculate-positions.js';
+import { logAndRethrow } from './log-and-rethrow.js';
 import { scrollableAncestors } from './state.js';
-import logAndRethrow from './log-and-rethrow.js';
+import { recalculatePositions } from './utils/recalculate-positions.js';
 
-export default function setupScrollListeners() {
+export function setupScrollListeners() {
   const documentAbortController = new AbortController();
-  document.addEventListener('scroll', () => {
-    try {
-      recalculatePositions();
-    } catch (error) {
-      logAndRethrow(error);
-    }
-  }, { signal: documentAbortController.signal });
+  document.addEventListener(
+    'scroll',
+    () => {
+      try {
+        recalculatePositions();
+      } catch (error) {
+        logAndRethrow(error);
+      }
+    },
+    { signal: documentAbortController.signal },
+  );
 
   const disposeOfEffect = effect(() => {
     // TODO: optimize performance, issue #81
     const elementAbortController = new AbortController();
     for (const scrollableAncestor of scrollableAncestors.value) {
-      scrollableAncestor.addEventListener('scroll', () => {
-        try {
-          recalculatePositions();
-        } catch (error) {
-          logAndRethrow(error);
-        }
-      }, { signal: elementAbortController.signal });
+      scrollableAncestor.addEventListener(
+        'scroll',
+        () => {
+          try {
+            recalculatePositions();
+          } catch (error) {
+            logAndRethrow(error);
+          }
+        },
+        { signal: elementAbortController.signal },
+      );
     }
     return () => {
       elementAbortController.abort();
-    }
+    };
   });
 
   return () => {
     documentAbortController.abort();
     disposeOfEffect();
   };
-};
+}