accented 0.0.0-20250303013509 → 0.0.0-20250424114613

package/package.json

@@ -1,12 +1,13 @@
 {
   "name": "accented",
-  "version": "0.0.0-20250303013509",
+  "version": "0.0.0-20250424114613",
   "description": "Continuous accessibility testing and issue highlighting for web development",
   "type": "module",
   "main": "dist/accented.js",
   "files": [
     "dist",
-    "src"
+    "src",
+    "NOTICE"
   ],
   "repository": {
     "type": "git",
@@ -26,7 +27,11 @@
   "homepage": "https://github.com/pomerantsev/accented#readme",
   "dependencies": {
     "@preact/signals-core": "^1.8.0",
-    "axe-core": "^4.10.2"
+    "axe-core": "^4.10.3"
+  },
+  "devDependencies": {
+    "@types/jsdom": "^21.1.7",
+    "jsdom": "^26.0.0"
   },
   "scripts": {
     "build": "tsc",

package/src/accented.ts

@@ -5,6 +5,7 @@ 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 { enabled, extendedElementsWithIssues } from './state.js';
 import deepMerge from './utils/deep-merge.js';
@@ -12,6 +13,7 @@ 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 { initializeContainingBlockSupportSet } from './utils/containing-blocks.js';
 
 export type { AccentedOptions, DisableAccented };
 
@@ -34,9 +36,9 @@ export type { AccentedOptions, DisableAccented };
  *     wait: 500,
  *     leading: false
  *   },
- *   callback: ({ elementsWithIssues, scanDuration }) => {
+ *   callback: ({ elementsWithIssues, performance }) => {
  *    console.log('Elements with issues:', elementsWithIssues);
- *    console.log('Scan duration:', scanDuration);
+ *    console.log('Total blocking time:', performance.totalBlockingTime);
  *   }
  * });
  */
@@ -66,7 +68,7 @@ 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,
@@ -74,7 +76,7 @@ export default function accented(options: AccentedOptions = {}): DisableAccented
       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).
@@ -87,14 +89,16 @@ export default function accented(options: AccentedOptions = {}): DisableAccented
 
     enabled.value = true;
 
+    initializeContainingBlockSupportSet();
     registerElements(name);
 
     const {disconnect: cleanupIntersectionObserver, intersectionObserver } = supportsAnchorPositioning(window) ? {} : setupIntersectionObserver();
-    const cleanupScanner = createScanner(name, axeContext, axeOptions, throttle, callback);
+    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();
 
     return () => {
       try {
@@ -105,6 +109,7 @@ export default function accented(options: AccentedOptions = {}): DisableAccented
         cleanupLogger();
         cleanupScrollListeners();
         cleanupResizeListener();
+        cleanupFullscreenListener();
         if (cleanupIntersectionObserver) {
           cleanupIntersectionObserver();
         }

package/src/constants.ts

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

package/src/dom-updater.ts

@@ -1,7 +1,34 @@
 import { effect } from '@preact/signals-core';
-import { extendedElementsWithIssues } from './state.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 { isDocument, isDocumentFragment, isShadowRoot } from './utils/dom-helpers.js';
+import getParent from './utils/get-parent.js';
+
+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 default function createDomUpdater(name: string, intersectionObserver?: IntersectionObserver) {
   const attrName = `data-${name}`;
@@ -13,8 +40,8 @@ export default function createDomUpdater(name: string, intersectionObserver?: In
       .filter(anchorName => anchorName.startsWith('--'));
   }
 
-  function setAnchorName (element: HTMLElement, id: number) {
-    const anchorNameValue = element.style.getPropertyValue('anchor-name') || window.getComputedStyle(element).getPropertyValue('anchor-name');
+  function setAnchorName (elementWithIssues: ExtendedElementWithIssues) {
+    const { element, id, anchorNameValue } = elementWithIssues;
     const anchorNames = getAnchorNames(anchorNameValue);
     if (anchorNames.length > 0) {
       element.style.setProperty('anchor-name', `${anchorNameValue}, --${name}-anchor-${id}`);
@@ -23,28 +50,30 @@ export default function createDomUpdater(name: string, intersectionObserver?: In
     }
   }
 
-  function removeAnchorName (element: HTMLElement, id: number) {
-    const anchorNameValue = element.style.getPropertyValue('anchor-name');
+  function removeAnchorName (elementWithIssues: ExtendedElementWithIssues) {
+    const { element, anchorNameValue } = elementWithIssues;
     const anchorNames = getAnchorNames(anchorNameValue);
-    const index = anchorNames.indexOf(`--${name}-anchor-${id}`);
-    if (anchorNames.length === 1 && index === 0) {
+    if (anchorNames.length > 0) {
+      element.style.setProperty('anchor-name', anchorNames.join(', '));
+    } else {
       element.style.removeProperty('anchor-name');
-    } else if (anchorNames.length > 1 && index > -1) {
-      element.style.setProperty('anchor-name', anchorNames.filter((_, i) => i !== index).join(', '));
     }
   }
 
   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.element, elementWithIssues.id);
+        setAnchorName(elementWithIssues);
       }
 
-      if (elementWithIssues.element.parentElement) {
-        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,9 +83,12 @@ export default function createDomUpdater(name: string, intersectionObserver?: In
 
   function removeIssues (extendedElementsWithIssues: Array<ExtendedElementWithIssues>) {
     for (const elementWithIssues of extendedElementsWithIssues) {
+      if (elementWithIssues.skipRender) {
+        continue;
+      }
       elementWithIssues.element.removeAttribute(attrName);
       if (supportsAnchorPositioning(window)) {
-        removeAnchorName(elementWithIssues.element, elementWithIssues.id);
+        removeAnchorName(elementWithIssues);
       }
       elementWithIssues.trigger.remove();
       if (intersectionObserver) {
@@ -69,8 +101,10 @@ export default function createDomUpdater(name: string, intersectionObserver?: In
   stylesheet.replaceSync(`
     @layer ${name} {
       :root {
-        --${name}-primary-color: red;
-        --${name}-secondary-color: white;
+        /* 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}-secondary-color: oklch(0.98 0 0);
         --${name}-outline-width: 2px;
         --${name}-outline-style: solid;
       }
@@ -86,19 +120,31 @@ export default function createDomUpdater(name: string, intersectionObserver?: In
 
   let previousExtendedElementsWithIssues: Array<ExtendedElementWithIssues> = [];
 
-  document.adoptedStyleSheets.push(stylesheet);
-  const removeStylesheet = () => {
-    if (document.adoptedStyleSheets.includes(stylesheet)) {
-      document.adoptedStyleSheets.splice(document.adoptedStyleSheets.indexOf(stylesheet), 1);
+  let previousRootNodes: Set<Node> = new Set();
+
+  const disposeOfStyleSheetsEffect = effect(() => {
+    const newRootNodes = rootNodes.value;
+    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);
+      }
     }
-  };
+    for (const rootNode of removedRootNodes) {
+      if (isDocument(rootNode) || (isDocumentFragment(rootNode) && isShadowRoot(rootNode))) {
+        rootNode.adoptedStyleSheets.splice(rootNode.adoptedStyleSheets.indexOf(stylesheet), 1);
+      }
+    }
+    previousRootNodes = newRootNodes;
+  });
 
   const disposeOfElementsEffect = effect(() => {
     const added = extendedElementsWithIssues.value.filter(elementWithIssues => {
-      return !previousExtendedElementsWithIssues.some(previousElementWithIssues => previousElementWithIssues.element === elementWithIssues.element);
+      return !previousExtendedElementsWithIssues.some(previousElementWithIssues => areElementsWithIssuesEqual(previousElementWithIssues, elementWithIssues));
     });
     const removed = previousExtendedElementsWithIssues.filter(previousElementWithIssues => {
-      return !extendedElementsWithIssues.value.some(elementWithIssues => elementWithIssues.element === previousElementWithIssues.element);
+      return !extendedElementsWithIssues.value.some(elementWithIssues => areElementsWithIssuesEqual(elementWithIssues, previousElementWithIssues));
     });
     removeIssues(removed);
     setIssues(added);
@@ -106,7 +152,7 @@ export default function createDomUpdater(name: string, intersectionObserver?: In
   });
 
   return () => {
-    removeStylesheet();
+    disposeOfStyleSheetsEffect();
     disposeOfElementsEffect();
   };
 }

package/src/elements/accented-dialog.ts

@@ -1,6 +1,5 @@
 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';
@@ -9,6 +8,7 @@ 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,
@@ -56,20 +56,45 @@ export default () => {
     :host {
       all: initial !important;
 
-      --light-color: white;
-      --dark-color: black;
-      --focus-color: #0078d4; /* Contrasts with both white and black. */
+      /* OKLCH stuff: https://oklch.com/ */
+      --light-color: oklch(0.98 0 0);
+      --dark-color: oklch(0.22 0 0);
 
-      --impact-minor-color: lightgray;
-      --impact-moderate-color: gold;
-      --impact-serious-color: #ff9e00;
-      --impact-critical-color: #f883ec;
+      --background-color: light-dark(var(--light-color), var(--dark-color));
+      --text-color: light-dark(var(--dark-color), var(--light-color));
+
+      --impact-lightness: 0.80;
+      --focus-lightness: 0.45;
+      @media (prefers-color-scheme: dark) {
+        --impact-lightness: 0.45;
+        --focus-lightness: 0.80;
+      }
+
+      --blue-hue: 230;
+      --gold-hue: 90;
+      --red-hue: 0;
+
+      /* Contrasts with background. */
+      --focus-color: oklch(var(--focus-lightness) 0.25 var(--blue-hue));
+
+      --impact-chroma: 0.16;
+
+      --impact-moderate-hue: var(--blue-hue);
+      --impact-serious-hue: var(--gold-hue);
+      --impact-critical-hue: var(--red-hue);
+
+      --impact-minor-color: oklch(var(--impact-lightness) 0 0);
+      --impact-moderate-color: oklch(var(--impact-lightness) var(--impact-chroma) var(--impact-moderate-hue));
+      --impact-serious-color: oklch(var(--impact-lightness) var(--impact-chroma) var(--impact-serious-hue));
+      --impact-critical-color: oklch(var(--impact-lightness) var(--impact-chroma) var(--impact-critical-hue));
+
+      --base-size: max(1rem, 16px);
 
       /* Spacing and typography custom props, inspired by https://utopia.fyi (simplified). */
 
       /* @link https://utopia.fyi/type/calculator?c=320,16,1.2,1240,16,1.2,5,2,&s=0.75|0.5|0.25,1.5|2|3|4|6,s-l&g=s,l,xl,12 */
       --ratio: 1.2;
-      --step-0: 1rem;
+      --step-0: var(--base-size);
       --step-1: calc(var(--step-0) * var(--ratio));
       --step-2: calc(var(--step-1) * var(--ratio));
       --step-3: calc(var(--step-2) * var(--ratio));
@@ -77,15 +102,15 @@ export default () => {
       --step--1: calc(var(--step-0) / var(--ratio));
 
       /* @link https://utopia.fyi/space/calculator?c=320,16,1.2,1240,16,1.2,5,2,&s=0.75|0.5|0.25,1.5|2|3|4|6,s-l&g=s,l,xl,12 */
-      --space-3xs: 0.25rem;
-      --space-2xs: 0.5rem;
-      --space-xs: 0.75rem;
-      --space-s: 1rem;
-      --space-m: 1.5rem;
-      --space-l: 2rem;
-      --space-xl: 3rem;
-      --space-2xl: 4rem;
-      --space-3xl: 6rem;
+      --space-3xs: calc(0.25 * var(--base-size));
+      --space-2xs: calc(0.5 * var(--base-size));
+      --space-xs: calc(0.75 * var(--base-size));
+      --space-s: var(--base-size);
+      --space-m: calc(1.5 * var(--base-size));
+      --space-l: calc(2 * var(--base-size));
+      --space-xl: calc(3 * var(--base-size));
+      --space-2xl: calc(4 * var(--base-size));
+      --space-3xl: calc(6 * var(--base-size));
     }
 
     a[href], button {
@@ -116,12 +141,15 @@ export default () => {
       overflow-wrap: break-word;
       font-family: system-ui;
       line-height: 1.5;
-      background-color: var(--light-color);
-      color: var(--dark-color);
+      text-wrap: pretty;
+      background-color: var(--background-color);
+      color: var(--text-color);
       border: 2px solid currentColor;
       padding: var(--space-l);
       inline-size: min(90ch, calc(100% - var(--space-s)* 2));
       max-block-size: calc(100% - var(--space-s) * 2);
+
+      color-scheme: light dark;
     }
 
     #button-container {
@@ -129,8 +157,8 @@ export default () => {
     }
 
     #close {
-      background-color: var(--light-color);
-      color: var(--dark-color);
+      background-color: var(--background-color);
+      color: var(--text-color);
       border: 2px solid currentColor;
       padding-inline: var(--space-2xs);
       aspect-ratio: 1 / 1;
@@ -167,7 +195,7 @@ export default () => {
       }
 
       a {
-        font-weight: bold;
+        font-weight: 500;
       }
     }
 
@@ -213,15 +241,13 @@ 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: boolean = false;
 
     constructor() {
       try {
@@ -270,75 +296,52 @@ export default () => {
             }
           }, { 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);
+          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);
                   }
-                  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.open = false;
               this.dispatchEvent(new Event('close'));
             } catch (error) {
               logAndRethrow(error);
@@ -352,15 +355,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);
       }
@@ -371,6 +368,7 @@ export default () => {
         const dialog = this.shadowRoot.querySelector('dialog');
         if (dialog) {
           dialog.showModal();
+          this.open = true;
         }
       }
     }

package/src/elements/accented-trigger.ts

@@ -12,8 +12,6 @@ export interface AccentedTrigger extends HTMLElement {
   visible: Signal<boolean> | undefined;
 }
 
-const triggerSize = 'max(32px, 2rem)';
-
 // 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) => {
@@ -27,6 +25,8 @@ export default (name: string) => {
   template.innerHTML = `
     <style>
       :host {
+        --ratio: 1.2;
+        --base-size: max(1rem, 16px);
         position: fixed !important;
         inset-inline-start: anchor(self-start) !important;
         inset-inline-end: anchor(self-end) !important;
@@ -44,13 +44,19 @@ export default (name: string) => {
       #trigger {
         pointer-events: auto;
 
-        position: absolute;
-        inset-inline-end: 0;
+        margin-inline-start: auto;
+        margin-inline-end: 4px;
+        margin-block-start: 4px;
 
         box-sizing: border-box;
-        font-size: 1rem;
-        inline-size: ${triggerSize};
-        block-size: ${triggerSize};
+        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));
+
+        display: flex;
+        align-items: center;
+        justify-content: center;
 
         /* Make it look better in forced-colors mode. */
         border: 2px solid transparent;
@@ -58,6 +64,10 @@ export default (name: string) => {
         background-color: var(--${name}-primary-color);
         color: var(--${name}-secondary-color);
 
+        padding: 0;
+
+        border-radius: calc(0.25 * var(--base-size));
+
         outline-offset: -4px;
         outline-color: currentColor;
         outline-width: 2px;
@@ -72,7 +82,7 @@ export default (name: string) => {
         }
       }
     </style>
-    <button id="trigger" lang="en">⚠</button>
+    <button id="trigger" lang="en">á</button>
   `;
 
   return class extends HTMLElement implements AccentedTrigger {
@@ -135,8 +145,14 @@ export default (name: string) => {
           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
@@ -185,7 +201,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();
         }
@@ -206,9 +222,17 @@ export default (name: string) => {
     }
 
     #setTransform() {
-      if (this.element) {
-        this.style.setProperty('transform', window.getComputedStyle(this.element).getPropertyValue('transform'), 'important');
-      }
+      // We read and write values in separate animation frames to avoid layout thrashing.
+      window.requestAnimationFrame(() => {
+        if (this.element) {
+          const transform = window.getComputedStyle(this.element).getPropertyValue('transform');
+          if (transform !== 'none') {
+            window.requestAnimationFrame(() => {
+              this.style.setProperty('transform', transform, 'important');
+            });
+          }
+        }
+      });
     }
   };
 };