accented 0.0.0-20250124142030 → 0.0.0-20250223121749

package/src/utils/update-elements-with-issues.test.ts

@@ -6,11 +6,11 @@ import type { ExtendedElementWithIssues, Issue } from '../types';
 import updateElementsWithIssues from './update-elements-with-issues';
 
 import type { AxeResults, ImpactValue } from 'axe-core';
-import type { AccentedContainer } from '../elements/accented-container';
+import type { AccentedTrigger } from '../elements/accented-trigger';
 type Violation = AxeResults['violations'][number];
 type Node = Violation['nodes'][number];
 
-const win: Window = {
+const win: Window & { CSS: typeof CSS } = {
   document: {
     // @ts-expect-error the return value is of incorrect type.
     createElement: () => ({
@@ -22,16 +22,35 @@ const win: Window = {
   },
   // @ts-expect-error we're missing a lot of properties
   getComputedStyle: () => ({
-    zIndex: ''
-  })
+    zIndex: '',
+    direction: 'ltr'
+  }),
+  // @ts-expect-error we're missing a lot of properties
+  CSS: {
+    supports: () => true
+  }
 }
 
+const getBoundingClientRect = () => ({});
+
+// @ts-expect-error element is not HTMLElement
+const element1: HTMLElement = {getBoundingClientRect, isConnected: true};
 // @ts-expect-error element is not HTMLElement
-const element1: HTMLElement = {};
+const element2: HTMLElement = {getBoundingClientRect, isConnected: true};
 // @ts-expect-error element is not HTMLElement
-const element2: HTMLElement = {};
+const element3: HTMLElement = {getBoundingClientRect, isConnected: false};
+
+const trigger = win.document.createElement('accented-trigger') as AccentedTrigger;
+
+const position = signal({
+  inlineEndLeft: 0,
+  blockStartTop: 0,
+  direction: 'ltr' as const
+});
 
-const accentedContainer = win.document.createElement('accented-container') as AccentedContainer;
+const visible = signal(true);
+
+const scrollableAncestors = signal(new Set<HTMLElement>());
 
 const commonNodeProps = {
   html: '<div></div>',
@@ -51,6 +70,11 @@ const node2: Node = {
   element: element2,
 };
 
+const node3: Node = {
+  ...commonNodeProps,
+  element: element3,
+};
+
 const commonViolationProps = {
   help: 'help',
   helpUrl: 'http://example.com',
@@ -77,6 +101,12 @@ const violation3: Violation = {
   nodes: [node2]
 };
 
+const violation4: Violation = {
+  ...commonViolationProps,
+  id: 'id4',
+  nodes: [node3]
+};
+
 const commonIssueProps = {
   title: 'help',
   description: 'description',
@@ -105,13 +135,19 @@ suite('updateElementsWithIssues', () => {
       {
         id: 1,
         element: element1,
-        accentedContainer,
+        position,
+        visible,
+        trigger,
+        scrollableAncestors,
         issues: signal([issue1])
       },
       {
         id: 2,
         element: element2,
-        accentedContainer,
+        position,
+        visible,
+        trigger,
+        scrollableAncestors,
         issues: signal([issue2])
       }
     ]);
@@ -128,13 +164,19 @@ suite('updateElementsWithIssues', () => {
       {
         id: 1,
         element: element1,
-        accentedContainer,
+        position,
+        visible,
+        trigger,
+        scrollableAncestors,
         issues: signal([issue1])
       },
       {
         id: 2,
         element: element2,
-        accentedContainer,
+        position,
+        visible,
+        trigger,
+        scrollableAncestors,
         issues: signal([issue2])
       }
     ]);
@@ -151,13 +193,19 @@ suite('updateElementsWithIssues', () => {
       {
         id: 1,
         element: element1,
-        accentedContainer,
+        position,
+        visible,
+        trigger,
+        scrollableAncestors,
         issues: signal([issue1])
       },
       {
         id: 2,
         element: element2,
-        accentedContainer,
+        position,
+        visible,
+        trigger,
+        scrollableAncestors,
         issues: signal([issue2, issue3])
       }
     ]);
@@ -174,7 +222,10 @@ suite('updateElementsWithIssues', () => {
       {
         id: 1,
         element: element1,
-        accentedContainer,
+        position,
+        visible,
+        trigger,
+        scrollableAncestors,
         issues: signal([issue1])
       }
     ]);
@@ -186,18 +237,41 @@ suite('updateElementsWithIssues', () => {
     assert.equal(extendedElementsWithIssues.value[1]?.issues.value.length, 1);
   });
 
+  test('one disconnected element added', () => {
+    const extendedElementsWithIssues: Signal<Array<ExtendedElementWithIssues>> = signal([
+      {
+        id: 1,
+        element: element1,
+        position,
+        visible,
+        trigger,
+        scrollableAncestors,
+        issues: signal([issue1])
+      }
+    ]);
+    updateElementsWithIssues(extendedElementsWithIssues, [violation1, violation4], win, 'accented');
+    assert.equal(extendedElementsWithIssues.value.length, 1);
+    assert.equal(extendedElementsWithIssues.value[0]?.element, element1);
+  });
+
   test('one element removed', () => {
     const extendedElementsWithIssues: Signal<Array<ExtendedElementWithIssues>> = signal([
       {
         id: 1,
         element: element1,
-        accentedContainer,
+        position,
+        visible,
+        trigger,
+        scrollableAncestors,
         issues: signal([issue1])
       },
       {
         id: 2,
         element: element2,
-        accentedContainer,
+        position,
+        visible,
+        trigger,
+        scrollableAncestors,
         issues: signal([issue2])
       }
     ]);

package/src/utils/update-elements-with-issues.ts

@@ -4,11 +4,15 @@ import { batch, signal } from '@preact/signals-core';
 import type { ExtendedElementWithIssues } from '../types';
 import transformViolations from './transform-violations.js';
 import areIssueSetsEqual from './are-issue-sets-equal.js';
-import type { AccentedContainer } from '../elements/accented-container';
+import type { AccentedTrigger } from '../elements/accented-trigger';
+import type { AccentedDialog } from '../elements/accented-dialog';
+import getElementPosition from './get-element-position.js';
+import getScrollableAncestors from './get-scrollable-ancestors.js';
+import supportsAnchorPositioning from './supports-anchor-positioning.js';
 
 let count = 0;
 
-export default function updateElementsWithIssues(extendedElementsWithIssues: Signal<Array<ExtendedElementWithIssues>>, violations: typeof AxeResults.violations, win: Window, name: string) {
+export default function updateElementsWithIssues(extendedElementsWithIssues: Signal<Array<ExtendedElementWithIssues>>, violations: typeof AxeResults.violations, win: Window & { CSS: typeof CSS }, name: string) {
   const updatedElementsWithIssues = transformViolations(violations);
 
   batch(() => {
@@ -32,24 +36,40 @@ export default function updateElementsWithIssues(extendedElementsWithIssues: Sig
         .filter(extendedElementWithIssues => {
           return !removedElementsWithIssues.some(removedElementWithIssues => removedElementWithIssues.element === extendedElementWithIssues.element);
         })
-        .concat(addedElementsWithIssues.map(addedElementWithIssues => {
-          const id = count++;
-          const accentedContainer = win.document.createElement(`${name}-container`) as AccentedContainer;
-          const elementZIndex = parseInt(win.getComputedStyle(addedElementWithIssues.element).zIndex, 10);
-          if (!isNaN(elementZIndex)) {
-            accentedContainer.style.setProperty('z-index', (elementZIndex + 1).toString());
-          }
-          accentedContainer.style.setProperty('position-anchor', `--${name}-anchor-${id}`);
-          accentedContainer.dataset.id = id.toString();
-          const issues = signal(addedElementWithIssues.issues);
-          accentedContainer.issues = issues;
-          return {
-            id,
-            element: addedElementWithIssues.element,
-            accentedContainer,
-            issues
-          };
-        }));
+        .concat(addedElementsWithIssues
+          .filter(addedElementWithIssues => addedElementWithIssues.element.isConnected)
+          .map(addedElementWithIssues => {
+            const id = count++;
+            const trigger = win.document.createElement(`${name}-trigger`) as AccentedTrigger;
+            const elementZIndex = parseInt(win.getComputedStyle(addedElementWithIssues.element).zIndex, 10);
+            if (!isNaN(elementZIndex)) {
+              trigger.style.setProperty('z-index', (elementZIndex + 1).toString(), 'important');
+            }
+            trigger.style.setProperty('position-anchor', `--${name}-anchor-${id}`, 'important');
+            trigger.dataset.id = id.toString();
+            const accentedDialog = win.document.createElement(`${name}-dialog`) as AccentedDialog;
+            trigger.dialog = accentedDialog;
+            const position = getElementPosition(addedElementWithIssues.element, win);
+            trigger.position = signal(position);
+            trigger.visible = signal(true);
+            trigger.element = addedElementWithIssues.element;
+            const scrollableAncestors = supportsAnchorPositioning(win) ?
+              new Set<HTMLElement>() :
+              getScrollableAncestors(addedElementWithIssues.element, win);
+            const issues = signal(addedElementWithIssues.issues);
+            accentedDialog.issues = issues;
+            accentedDialog.element = addedElementWithIssues.element;
+            return {
+              id,
+              element: addedElementWithIssues.element,
+              visible: trigger.visible,
+              position: trigger.position,
+              scrollableAncestors: signal(scrollableAncestors),
+              trigger,
+              issues
+            };
+          })
+        );
     }
   });
 }

package/src/validate-options.ts

@@ -0,0 +1,44 @@
+import type { AccentedOptions } from './types';
+import { allowedAxeOptions } from './types.js';
+
+// The space of valid CSS and HTML names is wider than this,
+// but with Unicode it gets complicated quickly, so I'm sticking to only allowing
+// lowercase alphanumeric names that possibly contain dashes that start with a letter.
+const nameRegex = /^[a-z]([a-z0-9]|-)+$/;
+
+export default function validateOptions(options: AccentedOptions) {
+  if (typeof options !== 'object' || options === null) {
+    throw new TypeError(`Accented: invalid argument. The options parameter must be an object if provided. It’s currently set to ${options}.`);
+  }
+  if (options.throttle !== undefined) {
+    if (typeof options.throttle !== 'object' || options.throttle === null) {
+      throw new TypeError(`Accented: invalid argument. \`throttle\` option must be an object if provided. It’s currently set to ${options.throttle}.`);
+    }
+    if (options.throttle.wait !== undefined && (typeof options.throttle.wait !== 'number' || options.throttle.wait < 0)) {
+      throw new TypeError(`Accented: invalid argument. \`throttle.wait\` option must be a non-negative number if provided. It’s currently set to ${options.throttle.wait}.`);
+    }
+  }
+  if (options.output !== undefined) {
+    if (typeof options.output !== 'object' || options.output === null) {
+      throw new TypeError(`Accented: invalid argument. \`output\` option must be an object if provided. It’s currently set to ${options.output}.`);
+    }
+    if (options.output.console !== undefined && typeof options.output.console !== 'boolean') {
+      console.warn(`Accented: invalid argument. \`output.console\` option is expected to be a boolean. It’s currently set to ${options.output.console}.`);
+    }
+  }
+  if (options.callback !== undefined && typeof options.callback !== 'function') {
+    throw new TypeError(`Accented: invalid argument. \`callback\` option must be a function if provided. It’s currently set to ${options.callback}.`);
+  }
+  if (options.name !== undefined && (typeof options.name !== 'string' || !options.name.match(nameRegex))) {
+    throw new TypeError(`Accented: invalid argument. \`name\` option must be a string that starts with a lowercase letter and only contains lowercase alphanumeric characters and dashes. It’s currently set to ${options.name}.`);
+  }
+  if (options.axeOptions !== undefined) {
+    if (typeof options.axeOptions !== 'object' || options.axeOptions === null) {
+      throw new TypeError(`Accented: invalid argument. \`axeOptions\` option must be an object if provided. It’s currently set to ${options.axeOptions}.`);
+    }
+    const unsupportedKeys = Object.keys(options.axeOptions).filter(key => !(allowedAxeOptions as unknown as Array<string>).includes(key));
+    if (unsupportedKeys.length > 0) {
+      throw new TypeError(`Accented: invalid argument. \`axeOptions\` contains the following unsupported keys: ${unsupportedKeys.join(', ')}. Valid options are: ${allowedAxeOptions.join(', ')}.`);
+    }
+  }
+}

package/dist/elements/accented-container.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"accented-container.d.ts","sourceRoot":"","sources":["../../src/elements/accented-container.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,UAAU,CAAC;AACtC,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,sBAAsB,CAAC;AAGnD,MAAM,WAAW,iBAAkB,SAAQ,WAAW;IACpD,MAAM,EAAE,MAAM,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,GAAG,SAAS,CAAC;CAC1C;+BAIqB,MAAM;;iCAkEN,eAAe,GAAG,SAAS;iCAE3B,CAAC,MAAM,IAAI,CAAC,GAAG,SAAS;gBAElC,MAAM,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,GAAG,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAtE5C,wBAwIE"}

package/dist/elements/accented-container.js

@@ -1,131 +0,0 @@
-import { effect } from '@preact/signals-core';
-// 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) => {
-    const containerTemplate = document.createElement('template');
-    containerTemplate.innerHTML = `
-    <button id="trigger">⚠</button>
-    <dialog dir="ltr" aria-labelledby="title">
-      <h2 id="title">Issues</h2>
-      <ul id="issues"></ul>
-    </dialog>
-  `;
-    const issueTemplate = document.createElement('template');
-    issueTemplate.innerHTML = `
-    <li>
-      <a></a>
-      <div></div>
-    </li>
-  `;
-    const descriptionTemplate = document.createElement('template');
-    descriptionTemplate.innerHTML = `
-    <span></span>
-    <ul></ul>
-  `;
-    const stylesheet = new CSSStyleSheet();
-    stylesheet.replaceSync(`
-    :host {
-      position: absolute;
-      inset-inline-end: anchor(end);
-      inset-block-end: anchor(end);
-
-      /* Popover-specific stuff */
-      border: none;
-      padding: 0;
-      margin-inline-end: 0;
-      margin-block-end: 0;
-    }
-
-    #trigger {
-      box-sizing: border-box;
-      font-size: 1rem;
-      inline-size: max(32px, 2rem);
-      block-size: max(32px, 2rem);
-
-      /* Make it look better in forced-colors mode, */
-      border: 2px solid transparent;
-
-      background-color: var(--${name}-primary-color);
-      color: var(--${name}-secondary-color);
-
-      outline-offset: -4px;
-      outline-color: var(--${name}-secondary-color);
-
-      &:focus-visible {
-        outline-width: 2px;
-        outline-style: solid;
-      }
-
-      &:hover:not(:focus-visible) {
-        outline-width: 2px;
-        outline-style: dashed;
-      }
-    }
-  `);
-    return class AccentedContainerLocal extends HTMLElement {
-        #abortController;
-        #disposeOfEffect;
-        issues;
-        constructor() {
-            super();
-            this.attachShadow({ mode: 'open' });
-            const content = containerTemplate.content.cloneNode(true);
-            if (this.shadowRoot) {
-                this.shadowRoot.adoptedStyleSheets.push(stylesheet);
-                this.shadowRoot.append(content);
-            }
-        }
-        connectedCallback() {
-            if (this.shadowRoot) {
-                const { shadowRoot } = this;
-                const trigger = shadowRoot.getElementById('trigger');
-                const dialog = shadowRoot.querySelector('dialog');
-                this.#abortController = new AbortController();
-                trigger?.addEventListener('click', () => {
-                    dialog?.showModal();
-                }, { 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);
-                                const a = issueContent.querySelector('a');
-                                const div = issueContent.querySelector('div');
-                                if (a && div) {
-                                    a.textContent = issue.title;
-                                    a.href = issue.url;
-                                    const descriptionItems = issue.description.split(/\n\s*/);
-                                    const descriptionContent = descriptionTemplate.content.cloneNode(true);
-                                    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);
-                                        }
-                                        div.appendChild(descriptionContent);
-                                    }
-                                }
-                                issuesList.appendChild(issueContent);
-                            }
-                        }
-                    }
-                });
-            }
-        }
-        disconnectedCallback() {
-            if (this.#abortController) {
-                this.#abortController.abort();
-            }
-            if (this.#disposeOfEffect) {
-                this.#disposeOfEffect();
-            }
-        }
-    };
-};
-//# sourceMappingURL=accented-container.js.map

package/dist/elements/accented-container.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"accented-container.js","sourceRoot":"","sources":["../../src/elements/accented-container.ts"],"names":[],"mappings":"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"}

package/src/elements/accented-container.ts

@@ -1,147 +0,0 @@
-import type { Issue } from '../types';
-import type { Signal } from '@preact/signals-core';
-import { effect } from '@preact/signals-core';
-
-export interface AccentedContainer extends HTMLElement {
-  issues: Signal<Array<Issue>> | undefined;
-}
-
-// 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) => {
-  const containerTemplate = document.createElement('template');
-  containerTemplate.innerHTML = `
-    <button id="trigger">⚠</button>
-    <dialog dir="ltr" aria-labelledby="title">
-      <h2 id="title">Issues</h2>
-      <ul id="issues"></ul>
-    </dialog>
-  `;
-
-  const issueTemplate = document.createElement('template');
-  issueTemplate.innerHTML = `
-    <li>
-      <a></a>
-      <div></div>
-    </li>
-  `;
-
-  const descriptionTemplate = document.createElement('template');
-  descriptionTemplate.innerHTML = `
-    <span></span>
-    <ul></ul>
-  `;
-
-  const stylesheet = new CSSStyleSheet();
-  stylesheet.replaceSync(`
-    :host {
-      position: absolute;
-      inset-inline-end: anchor(end);
-      inset-block-end: anchor(end);
-
-      /* Popover-specific stuff */
-      border: none;
-      padding: 0;
-      margin-inline-end: 0;
-      margin-block-end: 0;
-    }
-
-    #trigger {
-      box-sizing: border-box;
-      font-size: 1rem;
-      inline-size: max(32px, 2rem);
-      block-size: max(32px, 2rem);
-
-      /* Make it look better in forced-colors mode, */
-      border: 2px solid transparent;
-
-      background-color: var(--${name}-primary-color);
-      color: var(--${name}-secondary-color);
-
-      outline-offset: -4px;
-      outline-color: var(--${name}-secondary-color);
-
-      &:focus-visible {
-        outline-width: 2px;
-        outline-style: solid;
-      }
-
-      &:hover:not(:focus-visible) {
-        outline-width: 2px;
-        outline-style: dashed;
-      }
-    }
-  `);
-
-  return class AccentedContainerLocal extends HTMLElement implements AccentedContainer {
-    #abortController: AbortController | undefined;
-
-    #disposeOfEffect: (() => void) | undefined;
-
-    issues: Signal<Array<Issue>> | undefined;
-
-    constructor() {
-      super();
-      this.attachShadow({ mode: 'open' });
-      const content = containerTemplate.content.cloneNode(true);
-      if (this.shadowRoot) {
-        this.shadowRoot.adoptedStyleSheets.push(stylesheet);
-        this.shadowRoot.append(content);
-      }
-    }
-
-    connectedCallback() {
-      if (this.shadowRoot) {
-        const { shadowRoot } = this;
-        const trigger = shadowRoot.getElementById('trigger');
-        const dialog = shadowRoot.querySelector('dialog');
-        this.#abortController = new AbortController();
-        trigger?.addEventListener('click', () => {
-          dialog?.showModal();
-        }, { 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 a = issueContent.querySelector('a');
-                const div = issueContent.querySelector('div');
-                if (a && div) {
-                  a.textContent = issue.title;
-                  a.href = issue.url;
-                  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);
-                    }
-                    div.appendChild(descriptionContent);
-                  }
-                }
-                issuesList.appendChild(issueContent);
-              }
-            }
-          }
-        });
-      }
-    }
-
-    disconnectedCallback() {
-      if (this.#abortController) {
-        this.#abortController.abort();
-      }
-      if (this.#disposeOfEffect) {
-        this.#disposeOfEffect();
-      }
-    }
-  };
-};