accented 0.0.0-20250424114613 → 0.0.0-20250701143712

package/src/constants.ts

@@ -1,3 +1,3 @@
-export const accentedUrl = 'https://www.npmjs.com/package/accented';
+export const accentedUrl = 'https://www.accented.dev';
 export const issuesUrl = 'https://github.com/pomerantsev/accented/issues';
 export const getAccentedElementNames = (name: string) => [`${name}-trigger`, `${name}-dialog`];

package/src/dom-updater.ts

@@ -1,10 +1,11 @@
 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';
 
 const shouldInsertTriggerInsideElement = (element: Element): boolean => {
   /**
@@ -30,17 +31,17 @@ const shouldInsertTriggerInsideElement = (element: Element): boolean => {
   return noParent || isTableCell || isSummary;
 };
 
-export default function createDomUpdater(name: string, intersectionObserver?: IntersectionObserver) {
+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) {
@@ -50,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) {
@@ -60,7 +61,7 @@ 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;
@@ -81,7 +82,7 @@ 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;
@@ -103,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;
@@ -124,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);
@@ -140,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,8 +1,9 @@
-import type { Issue } from '../types';
 import type { Signal } 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;
@@ -13,7 +14,7 @@ export interface AccentedDialog 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 () => {
+export const getAccentedDialog = () => {
   const dialogTemplate = document.createElement('template');
   dialogTemplate.innerHTML = `
     <dialog dir="ltr" lang="en" aria-labelledby="title">
@@ -247,11 +248,11 @@ export default () => {
 
     element: Element | undefined;
 
-    open: boolean = false;
+    open = false;
 
     constructor() {
+      super();
       try {
-        super();
         this.attachShadow({ mode: 'open' });
         const content = dialogTemplate.content.cloneNode(true);
         if (this.shadowRoot) {
@@ -270,31 +271,43 @@ 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 });
+            },
+            { 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;
@@ -307,18 +320,23 @@ export default () => {
                 const impact = issueContent.querySelector('.impact');
                 const description = issueContent.querySelector('.description');
                 if (title && impact && description) {
-                  title.textContent = issue.title + ' (' + issue.id + ')';
+                  title.textContent = `${issue.title} (${issue.id})`;
                   title.href = issue.url;
 
-                  impact.textContent = 'User impact: ' + issue.impact;
+                  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]!;
+                  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;
@@ -339,14 +357,18 @@ export default () => {
             }
           }
 
-          dialog?.addEventListener('close', () => {
-            try {
-              this.open = false;
-              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);
@@ -375,7 +397,11 @@ export default () => {
 
     #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();

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,6 +42,8 @@ export default (name: string) => {
       #trigger {
         pointer-events: auto;
 
+        user-select: none;
+
         margin-inline-start: auto;
         margin-inline-end: 4px;
         margin-block-start: 4px;
@@ -105,8 +105,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) {
@@ -138,42 +138,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(() => {
@@ -185,11 +193,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);

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,14 +1,13 @@
 import { effect } from '@preact/signals-core';
-import { elementsWithIssues, enabled } from './state.js';
 import { accentedUrl } from './constants.js';
-import type { ElementWithIssues } from './types';
+import { elementsWithIssues, enabled } from './state.js';
+import type { ElementWithIssues } from './types.ts';
 
 function filterPropsForOutput(elements: Array<ElementWithIssues>) {
   return elements.map(({ element, issues }) => ({ element, issues }));
 }
 
-export default function createLogger() {
-
+export function createLogger() {
   let firstRun = true;
 
   return effect(() => {
@@ -18,10 +17,13 @@ export default function createLogger() {
 
     const elementCount = elementsWithIssues.value.length;
     if (elementCount > 0) {
-      const issueCount = elementsWithIssues.value.reduce((acc, { issues }) => acc + issues.length, 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`,
-        filterPropsForOutput(elementsWithIssues.value)
+        filterPropsForOutput(elementsWithIssues.value),
       );
     } else {
       if (firstRun) {

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