accented 0.0.0-20250404114312 → 0.0.0-20250618181418

package/src/accented.ts

@@ -1,18 +1,18 @@
-
-import registerElements from './register-elements.js';
-import createDomUpdater from './dom-updater.js';
-import createLogger from './logger.js';
-import createScanner from './scanner.js';
-import setupScrollListeners from './scroll-listeners.js';
-import setupResizeListener from './resize-listener.js';
-import setupFullscreenListener from './fullscreen-listener.js';
-import setupIntersectionObserver from './intersection-observer.js';
+import { createDomUpdater } from './dom-updater.js';
+import { setupResizeListener as setupFullscreenListener } from './fullscreen-listener.js';
+import { setupIntersectionObserver } from './intersection-observer.js';
+import { logAndRethrow } from './log-and-rethrow.js';
+import { createLogger } from './logger.js';
+import { registerElements } from './register-elements.js';
+import { setupResizeListener } from './resize-listener.js';
+import { createScanner } from './scanner.js';
+import { setupScrollListeners } from './scroll-listeners.js';
 import { enabled, extendedElementsWithIssues } from './state.js';
-import deepMerge from './utils/deep-merge.js';
-import type { AccentedOptions, DisableAccented } from './types';
-import validateOptions from './validate-options.js';
-import supportsAnchorPositioning from './utils/supports-anchor-positioning.js';
-import logAndRethrow from './log-and-rethrow.js';
+import type { AccentedOptions, DisableAccented } from './types.ts';
+import { initializeContainingBlockSupportSet } from './utils/containing-blocks.js';
+import { deepMerge } from './utils/deep-merge.js';
+import { supportsAnchorPositioning } from './utils/supports-anchor-positioning.js';
+import { validateOptions } from './validate-options.js';
 
 export type { AccentedOptions, DisableAccented };
 
@@ -41,24 +41,25 @@ export type { AccentedOptions, DisableAccented };
  *   }
  * });
  */
-export default function accented(options: AccentedOptions = {}): DisableAccented {
-
+export function accented(options: AccentedOptions = {}): DisableAccented {
   validateOptions(options);
 
   try {
     if (typeof window === 'undefined' || typeof document === 'undefined') {
-      console.warn('Accented: this script can only run in the browser, and it’s likely running on the server now. Exiting.');
+      console.warn(
+        'Accented: this script can only run in the browser, and it’s likely running on the server now. Exiting.',
+      );
       console.trace();
       return () => {};
     }
 
     const defaultOutput: Required<AccentedOptions['output']> = {
-      console: true
+      console: true,
     };
 
     const defaultThrottle: Required<AccentedOptions['throttle']> = {
       wait: 1000,
-      leading: true
+      leading: true,
     };
 
     // IMPORTANT: when changing any of the properties or values, also do the following:
@@ -67,36 +68,45 @@ export default function accented(options: AccentedOptions = {}): DisableAccented
     // * update examples in the accented() function JSDoc;
     // * update examples in the Readme.
     const defaultOptions: Required<AccentedOptions> = {
-      axeContext: document,
+      context: document,
       axeOptions: {},
       name: 'accented',
       output: defaultOutput,
       throttle: defaultThrottle,
-      callback: () => {}
+      callback: () => {},
     };
 
-    const {axeContext, axeOptions, name, output, throttle, callback} = deepMerge(defaultOptions, options);
+    const { context, axeOptions, name, output, throttle, callback } = deepMerge(
+      defaultOptions,
+      options,
+    );
 
     if (enabled.value) {
       // Add link to the recipes section of the docs (#56).
       console.warn(
         'You are trying to run the Accented library more than once. ' +
-        'This will likely lead to errors.'
+          'This will likely lead to errors.',
       );
       console.trace();
     }
 
     enabled.value = true;
 
+    initializeContainingBlockSupportSet();
     registerElements(name);
 
-    const {disconnect: cleanupIntersectionObserver, intersectionObserver } = supportsAnchorPositioning(window) ? {} : setupIntersectionObserver();
-    const cleanupScanner = createScanner(name, axeContext, axeOptions, throttle, callback);
+    const { disconnect: cleanupIntersectionObserver, intersectionObserver } =
+      setupIntersectionObserver();
+    const cleanupScanner = createScanner(name, context, axeOptions, throttle, callback);
     const cleanupDomUpdater = createDomUpdater(name, intersectionObserver);
     const cleanupLogger = output.console ? createLogger() : () => {};
-    const cleanupScrollListeners = supportsAnchorPositioning(window) ? () => {} : setupScrollListeners();
-    const cleanupResizeListener = supportsAnchorPositioning(window) ? () => {} : setupResizeListener();
-    const cleanupFullscreenListener = supportsAnchorPositioning(window) ? () => {} : setupFullscreenListener();
+    const cleanupScrollListeners = setupScrollListeners();
+    const cleanupResizeListener = supportsAnchorPositioning(window)
+      ? () => {}
+      : setupResizeListener();
+    const cleanupFullscreenListener = supportsAnchorPositioning(window)
+      ? () => {}
+      : setupFullscreenListener();
 
     return () => {
       try {

package/src/common/tokens.ts

@@ -0,0 +1 @@
+export const primaryColor = 'oklch(0.5 0.3 0)';

package/src/dom-updater.ts

@@ -1,22 +1,47 @@
 import { effect } from '@preact/signals-core';
+import { primaryColor } from './common/tokens.js';
 import { extendedElementsWithIssues, rootNodes } from './state.js';
-import type { ExtendedElementWithIssues } from './types';
-import areElementsWithIssuesEqual from './utils/are-elements-with-issues-equal.js';
-import supportsAnchorPositioning from './utils/supports-anchor-positioning.js';
+import type { ExtendedElementWithIssues } from './types.ts';
+import { areElementsWithIssuesEqual } from './utils/are-elements-with-issues-equal.js';
 import { isDocument, isDocumentFragment, isShadowRoot } from './utils/dom-helpers.js';
-import getParent from './utils/get-parent.js';
+import { getParent } from './utils/get-parent.js';
+import { supportsAnchorPositioning } from './utils/supports-anchor-positioning.js';
 
-export default function createDomUpdater(name: string, intersectionObserver?: IntersectionObserver) {
+const shouldInsertTriggerInsideElement = (element: Element): boolean => {
+  /**
+   * No parent means that the element is a root node,
+   * which cannot have siblings.
+   */
+  const noParent = !getParent(element);
+
+  /**
+   * Table cells get a special treatment because if a sibling to a TH or TD is inserted,
+   * it alters the table layout, no matter how that sibling is positioned.
+   * We don't want tables to look broken, so we're inserting the trigger inside the table cell.
+   */
+  const isTableCell = element.nodeName === 'TH' || element.nodeName === 'TD';
+
+  /**
+   * We want to put the trigger inside the <summary> element,
+   * because otherwise it will be hidden by the browser when the <details> element is collapsed
+   * (since none of the siblings of <summary> are visible then).
+   */
+  const isSummary = element.nodeName === 'SUMMARY';
+
+  return noParent || isTableCell || isSummary;
+};
+
+export function createDomUpdater(name: string, intersectionObserver?: IntersectionObserver) {
   const attrName = `data-${name}`;
 
-  function getAnchorNames (anchorNameValue: string) {
+  function getAnchorNames(anchorNameValue: string) {
     return anchorNameValue
       .split(',')
-      .map(anchorName => anchorName.trim())
-      .filter(anchorName => anchorName.startsWith('--'));
+      .map((anchorName) => anchorName.trim())
+      .filter((anchorName) => anchorName.startsWith('--'));
   }
 
-  function setAnchorName (elementWithIssues: ExtendedElementWithIssues) {
+  function setAnchorName(elementWithIssues: ExtendedElementWithIssues) {
     const { element, id, anchorNameValue } = elementWithIssues;
     const anchorNames = getAnchorNames(anchorNameValue);
     if (anchorNames.length > 0) {
@@ -26,7 +51,7 @@ export default function createDomUpdater(name: string, intersectionObserver?: In
     }
   }
 
-  function removeAnchorName (elementWithIssues: ExtendedElementWithIssues) {
+  function removeAnchorName(elementWithIssues: ExtendedElementWithIssues) {
     const { element, anchorNameValue } = elementWithIssues;
     const anchorNames = getAnchorNames(anchorNameValue);
     if (anchorNames.length > 0) {
@@ -36,17 +61,20 @@ export default function createDomUpdater(name: string, intersectionObserver?: In
     }
   }
 
-  function setIssues (extendedElementsWithIssues: Array<ExtendedElementWithIssues>) {
+  function setIssues(extendedElementsWithIssues: Array<ExtendedElementWithIssues>) {
     for (const elementWithIssues of extendedElementsWithIssues) {
+      if (elementWithIssues.skipRender) {
+        continue;
+      }
       elementWithIssues.element.setAttribute(attrName, elementWithIssues.id.toString());
       if (supportsAnchorPositioning(window)) {
         setAnchorName(elementWithIssues);
       }
 
-      if (getParent(elementWithIssues.element)) {
-        elementWithIssues.element.insertAdjacentElement('afterend', elementWithIssues.trigger);
-      } else {
+      if (shouldInsertTriggerInsideElement(elementWithIssues.element)) {
         elementWithIssues.element.insertAdjacentElement('beforeend', elementWithIssues.trigger);
+      } else {
+        elementWithIssues.element.insertAdjacentElement('afterend', elementWithIssues.trigger);
       }
       if (intersectionObserver) {
         intersectionObserver.observe(elementWithIssues.element);
@@ -54,8 +82,11 @@ export default function createDomUpdater(name: string, intersectionObserver?: In
     }
   }
 
-  function removeIssues (extendedElementsWithIssues: Array<ExtendedElementWithIssues>) {
+  function removeIssues(extendedElementsWithIssues: Array<ExtendedElementWithIssues>) {
     for (const elementWithIssues of extendedElementsWithIssues) {
+      if (elementWithIssues.skipRender) {
+        continue;
+      }
       elementWithIssues.element.removeAttribute(attrName);
       if (supportsAnchorPositioning(window)) {
         removeAnchorName(elementWithIssues);
@@ -73,7 +104,7 @@ export default function createDomUpdater(name: string, intersectionObserver?: In
       :root {
         /* Ensure that the primary / secondary color combination meets WCAG 1.4.3 Contrast (Minimum) */
         /* OKLCH stuff: https://oklch.com/ */
-        --${name}-primary-color: oklch(0.5 0.3 0);
+        --${name}-primary-color: ${primaryColor};
         --${name}-secondary-color: oklch(0.98 0 0);
         --${name}-outline-width: 2px;
         --${name}-outline-style: solid;
@@ -94,8 +125,10 @@ export default function createDomUpdater(name: string, intersectionObserver?: In
 
   const disposeOfStyleSheetsEffect = effect(() => {
     const newRootNodes = rootNodes.value;
-    const addedRootNodes = [...newRootNodes].filter(rootNode => !previousRootNodes.has(rootNode));
-    const removedRootNodes = [...previousRootNodes].filter(rootNode => !newRootNodes.has(rootNode));
+    const addedRootNodes = [...newRootNodes].filter((rootNode) => !previousRootNodes.has(rootNode));
+    const removedRootNodes = [...previousRootNodes].filter(
+      (rootNode) => !newRootNodes.has(rootNode),
+    );
     for (const rootNode of addedRootNodes) {
       if (isDocument(rootNode) || (isDocumentFragment(rootNode) && isShadowRoot(rootNode))) {
         rootNode.adoptedStyleSheets.push(stylesheet);
@@ -110,11 +143,15 @@ export default function createDomUpdater(name: string, intersectionObserver?: In
   });
 
   const disposeOfElementsEffect = effect(() => {
-    const added = extendedElementsWithIssues.value.filter(elementWithIssues => {
-      return !previousExtendedElementsWithIssues.some(previousElementWithIssues => areElementsWithIssuesEqual(previousElementWithIssues, elementWithIssues));
+    const added = extendedElementsWithIssues.value.filter((elementWithIssues) => {
+      return !previousExtendedElementsWithIssues.some((previousElementWithIssues) =>
+        areElementsWithIssuesEqual(previousElementWithIssues, elementWithIssues),
+      );
     });
-    const removed = previousExtendedElementsWithIssues.filter(previousElementWithIssues => {
-      return !extendedElementsWithIssues.value.some(elementWithIssues => areElementsWithIssuesEqual(elementWithIssues, previousElementWithIssues));
+    const removed = previousExtendedElementsWithIssues.filter((previousElementWithIssues) => {
+      return !extendedElementsWithIssues.value.some((elementWithIssues) =>
+        areElementsWithIssuesEqual(elementWithIssues, previousElementWithIssues),
+      );
     });
     removeIssues(removed);
     setIssues(added);

package/src/elements/accented-dialog.ts

@@ -1,19 +1,20 @@
-import type { Issue } from '../types';
 import type { Signal } from '@preact/signals-core';
-import { effect } from '@preact/signals-core';
-import getElementHtml from '../utils/get-element-html.js';
 import { accentedUrl } from '../constants.js';
-import logAndRethrow from '../log-and-rethrow.js';
+import { logAndRethrow } from '../log-and-rethrow.js';
+import type { Issue } from '../types.ts';
+import { getElementHtml } from '../utils/get-element-html.js';
+import { isNonEmpty } from '../utils/is-non-empty.js';
 
 export interface AccentedDialog extends HTMLElement {
   issues: Signal<Array<Issue>> | undefined;
   element: Element | undefined;
   showModal: () => void;
+  open: boolean;
 }
 
 // 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 () => {
+export const getAccentedDialog = () => {
   const dialogTemplate = document.createElement('template');
   dialogTemplate.innerHTML = `
     <dialog dir="ltr" lang="en" aria-labelledby="title">
@@ -241,19 +242,17 @@ export default () => {
   `);
 
   return class extends HTMLElement implements AccentedDialog {
-    #disposeOfEffect: (() => void) | undefined;
-
     #abortController: AbortController | undefined;
 
     issues: Signal<Array<Issue>> | undefined;
 
     element: Element | undefined;
 
-    #elementMutationObserver: MutationObserver | undefined;
+    open = false;
 
     constructor() {
+      super();
       try {
-        super();
         this.attachShadow({ mode: 'open' });
         const content = dialogTemplate.content.cloneNode(true);
         if (this.shadowRoot) {
@@ -272,106 +271,104 @@ export default () => {
           const dialog = shadowRoot.querySelector('dialog');
           const closeButton = shadowRoot.querySelector('#close');
           this.#abortController = new AbortController();
-          closeButton?.addEventListener('click', () => {
-            try {
-              dialog?.close();
-            } catch (error) {
-              logAndRethrow(error);
-            }
-          }, { signal: this.#abortController.signal });
-
-          dialog?.addEventListener('click', (event) => {
-            try {
-              this.#onDialogClick(event);
-            } catch (error) {
-              logAndRethrow(error);
-            }
-          }, { signal: this.#abortController.signal });
-
-          dialog?.addEventListener('keydown', (event) => {
-            try {
-              if (event.key === 'Escape') {
-                event.stopPropagation();
+          closeButton?.addEventListener(
+            'click',
+            () => {
+              try {
+                dialog?.close();
+              } catch (error) {
+                logAndRethrow(error);
               }
-            } catch (error) {
-              logAndRethrow(error);
-            }
-          }, { signal: this.#abortController.signal });
-
-          this.#disposeOfEffect = effect(() => {
-            if (this.issues) {
-              const issues = this.issues.value;
-              const issuesList = shadowRoot.getElementById('issues');
-              if (issuesList) {
-                issuesList.innerHTML = '';
-                for (const issue of issues) {
-                  const issueContent = issueTemplate.content.cloneNode(true) as Element;
-                  const title = issueContent.querySelector('a');
-                  const impact = issueContent.querySelector('.impact');
-                  const description = issueContent.querySelector('.description');
-                  if (title && impact && description) {
-                    title.textContent = issue.title + ' (' + issue.id + ')';
-                    title.href = issue.url;
-
-                    impact.textContent = 'User impact: ' + issue.impact;
-                    impact.setAttribute('data-impact', String(issue.impact));
-
-                    const descriptionItems = issue.description.split(/\n\s*/);
-                    const descriptionContent = descriptionTemplate.content.cloneNode(true) as Element;
-                    const descriptionTitle = descriptionContent.querySelector('span');
-                    const descriptionList = descriptionContent.querySelector('ul');
-                    if (descriptionTitle && descriptionList && descriptionItems.length > 1) {
-                      descriptionTitle.textContent = descriptionItems[0]!;
-                      for (const descriptionItem of descriptionItems.slice(1)) {
-                        const li = document.createElement('li');
-                        li.textContent = descriptionItem;
-                        descriptionList.appendChild(li);
-                      }
-                      description.appendChild(descriptionContent);
+            },
+            { signal: this.#abortController.signal },
+          );
+
+          dialog?.addEventListener(
+            'click',
+            (event) => {
+              try {
+                this.#onDialogClick(event);
+              } catch (error) {
+                logAndRethrow(error);
+              }
+            },
+            { signal: this.#abortController.signal },
+          );
+
+          dialog?.addEventListener(
+            'keydown',
+            (event) => {
+              try {
+                if (event.key === 'Escape') {
+                  event.stopPropagation();
+                }
+              } catch (error) {
+                logAndRethrow(error);
+              }
+            },
+            { signal: this.#abortController.signal },
+          );
+
+          if (this.issues) {
+            const issues = this.issues.value;
+            const issuesList = shadowRoot.getElementById('issues');
+            if (issuesList) {
+              issuesList.innerHTML = '';
+              for (const issue of issues) {
+                const issueContent = issueTemplate.content.cloneNode(true) as Element;
+                const title = issueContent.querySelector('a');
+                const impact = issueContent.querySelector('.impact');
+                const description = issueContent.querySelector('.description');
+                if (title && impact && description) {
+                  title.textContent = `${issue.title} (${issue.id})`;
+                  title.href = issue.url;
+
+                  impact.textContent = `User impact: ${issue.impact}`;
+                  impact.setAttribute('data-impact', String(issue.impact));
+
+                  const descriptionItems = issue.description.split(/\n\s*/);
+                  const descriptionContent = descriptionTemplate.content.cloneNode(true) as Element;
+                  const descriptionTitle = descriptionContent.querySelector('span');
+                  const descriptionList = descriptionContent.querySelector('ul');
+                  if (
+                    descriptionTitle &&
+                    descriptionList &&
+                    isNonEmpty(descriptionItems) &&
+                    descriptionItems.length > 1
+                  ) {
+                    descriptionTitle.textContent = descriptionItems[0];
+                    for (const descriptionItem of descriptionItems.slice(1)) {
+                      const li = document.createElement('li');
+                      li.textContent = descriptionItem;
+                      descriptionList.appendChild(li);
                     }
+                    description.appendChild(descriptionContent);
                   }
-                  issuesList.appendChild(issueContent);
                 }
+                issuesList.appendChild(issueContent);
               }
             }
-          });
-
-          const updateElementHtml = () => {
-            if (this.element) {
-              const elementHtmlContainer = shadowRoot.getElementById('element-html');
-              if (elementHtmlContainer) {
-                elementHtmlContainer.textContent = getElementHtml(this.element);
-              }
-            }
-          };
-
-          updateElementHtml();
+          }
 
-          this.#elementMutationObserver = new MutationObserver(() => {
-            try {
-              updateElementHtml();
-            } catch (error) {
-              logAndRethrow(error);
-            }
-          });
           if (this.element) {
-            // We're only outputting the element itself, not its subtree.
-            // However, we're still listening for childList changes, because
-            // we display an ellipsis if the element has innerHTML,
-            // and we leave it empty if the element is empty.
-            this.#elementMutationObserver.observe(this.element, {
-              attributes: true,
-              childList: true
-            });
+            const elementHtmlContainer = shadowRoot.getElementById('element-html');
+            if (elementHtmlContainer) {
+              elementHtmlContainer.textContent = getElementHtml(this.element);
+            }
           }
 
-          dialog?.addEventListener('close', () => {
-            try {
-              this.dispatchEvent(new Event('close'));
-            } catch (error) {
-              logAndRethrow(error);
-            }
-          }, { signal: this.#abortController.signal });
+          dialog?.addEventListener(
+            'close',
+            () => {
+              try {
+                this.open = false;
+                this.dispatchEvent(new Event('close'));
+              } catch (error) {
+                logAndRethrow(error);
+              }
+            },
+            { signal: this.#abortController.signal },
+          );
         }
       } catch (error) {
         logAndRethrow(error);
@@ -380,15 +377,9 @@ export default () => {
 
     disconnectedCallback() {
       try {
-        if (this.#disposeOfEffect) {
-          this.#disposeOfEffect();
-        }
         if (this.#abortController) {
           this.#abortController.abort();
         }
-        if (this.#elementMutationObserver) {
-          this.#elementMutationObserver.disconnect();
-        }
       } catch (error) {
         logAndRethrow(error);
       }
@@ -399,13 +390,18 @@ export default () => {
         const dialog = this.shadowRoot.querySelector('dialog');
         if (dialog) {
           dialog.showModal();
+          this.open = true;
         }
       }
     }
 
     #onDialogClick(event: MouseEvent) {
       const dialog = event.currentTarget as HTMLDialogElement;
-      if (!dialog || typeof dialog.getBoundingClientRect !== 'function' || typeof dialog.close !== 'function') {
+      if (
+        !dialog ||
+        typeof dialog.getBoundingClientRect !== 'function' ||
+        typeof dialog.close !== 'function'
+      ) {
         return;
       }
       const rect = dialog.getBoundingClientRect();