accented 0.0.2 → 1.0.0

package/src/elements/accented-dialog.ts

@@ -1,19 +1,21 @@
-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 { colorDark, colorLight, fontSystemMono, fontSystemSans } from '../common/tokens.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">
@@ -56,20 +58,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: ${colorLight};
+      --dark-color: ${colorDark};
 
-      --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 +104,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 {
@@ -98,6 +125,7 @@ export default () => {
         outline-style: solid;
       }
 
+      /* We should probably be comfortable with showing these styles on non-hover devices. */
       &:hover:not(:focus-visible) {
         outline-style: dashed;
       }
@@ -114,14 +142,17 @@ export default () => {
     dialog {
       box-sizing: border-box;
       overflow-wrap: break-word;
-      font-family: system-ui;
+      font-family: ${fontSystemSans};
       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 +160,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;
@@ -151,8 +182,7 @@ export default () => {
     }
 
     code {
-      /* https://systemfontstack.com/ */
-      font-family: Menlo, Consolas, Monaco, Liberation Mono, Lucida Console, monospace;
+      font-family: ${fontSystemMono};
       font-size: var(--step--1);
     }
 
@@ -167,7 +197,7 @@ export default () => {
       }
 
       a {
-        font-weight: bold;
+        font-weight: 500;
       }
     }
 
@@ -213,19 +243,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) {
@@ -244,96 +272,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 });
-
-          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);
+          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();
+                }
+              } 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);
@@ -342,15 +378,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);
       }
@@ -361,13 +391,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();

package/src/elements/accented-trigger.ts

@@ -1,9 +1,10 @@
-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 { fontSystemSans } from '../common/tokens.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;
@@ -12,11 +13,9 @@ 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) => {
+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,
@@ -27,21 +26,38 @@ 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;
         inset-block-start: anchor(self-start) !important;
-
-        position-visibility: anchors-visible !important;
+        inset-block-end: anchor(self-end) !important;
 
         /* Revert potential effects of white-space: pre; set on a trigger's ancestor. */
         white-space: normal !important;
+
+        pointer-events: none !important;
       }
 
       #trigger {
+        pointer-events: auto;
+
+        user-select: none;
+
+        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: ${fontSystemSans};
+        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;
@@ -49,6 +65,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;
@@ -58,12 +78,13 @@ export default (name: string) => {
           outline-style: solid;
         }
 
+        /* We should probably be comfortable with showing these styles on non-hover devices. */
         &:hover:not(:focus-visible) {
           outline-style: dashed;
         }
       }
     </style>
-    <button id="trigger" lang="en">⚠</button>
+    <button id="trigger" lang="en">á</button>
   `;
 
   return class extends HTMLElement implements AccentedTrigger {
@@ -75,6 +96,8 @@ export default (name: string) => {
 
     #disposeOfVisibilityEffect: (() => void) | undefined;
 
+    #elementMutationObserver: MutationObserver | undefined;
+
     element: Element | undefined;
 
     dialog: AccentedDialog | undefined;
@@ -84,8 +107,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) {
@@ -104,50 +127,82 @@ export default (name: string) => {
           if (trigger && this.element) {
             trigger.ariaLabel = `Accessibility issues in ${this.element.nodeName.toLowerCase()}`;
           }
-          this.#abortController = new AbortController();
-          trigger?.addEventListener('click', (event) => {
+
+          this.#setTransform();
+
+          this.#elementMutationObserver = new MutationObserver(() => {
             try {
-              event.preventDefault();
-
-              // 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 });
-              }
+              this.#setTransform();
             } catch (error) {
               logAndRethrow(error);
             }
-          }, { signal: this.#abortController.signal });
+          });
+
+          if (this.element) {
+            this.#elementMutationObserver.observe(this.element, {
+              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 },
+                  );
+                }
+              } catch (error) {
+                logAndRethrow(error);
+              }
+            },
+            { signal: this.#abortController.signal },
+          );
 
           if (!supportsAnchorPositioning(window)) {
             this.#disposeOfPositionEffect = effect(() => {
               if (this.position && trigger) {
                 const position = this.position.value;
-                this.style.setProperty('top', `${position.blockStartTop}px`, 'important');
-                if (position.direction === 'ltr') {
-                  this.style.setProperty('left', `calc(${position.inlineEndLeft}px - ${triggerSize})`, 'important');
-                } else if (this.position.value.direction === 'rtl') {
-                  this.style.setProperty('left', `${position.inlineEndLeft}px`, 'important');
-                }
+                this.style.setProperty('top', `${position.top}px`, 'important');
+                this.style.setProperty('left', `${position.left}px`, 'important');
+                this.style.setProperty('width', `${position.width}px`, 'important');
+                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);
@@ -159,7 +214,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();
         }
@@ -171,9 +226,26 @@ export default (name: string) => {
           this.#disposeOfVisibilityEffect();
           this.#disposeOfVisibilityEffect = undefined;
         }
+        if (this.#elementMutationObserver) {
+          this.#elementMutationObserver.disconnect();
+        }
       } catch (error) {
         logAndRethrow(error);
       }
     }
+
+    #setTransform() {
+      // 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');
+            });
+          }
+        }
+      });
+    }
   };
 };