accented 0.0.1-dev.4 → 0.0.2

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

@@ -0,0 +1,75 @@
+import type { AxeResults } from 'axe-core';
+import type { Signal } from '@preact/signals-core';
+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 { 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 & { CSS: typeof CSS }, name: string) {
+  const updatedElementsWithIssues = transformViolations(violations);
+
+  batch(() => {
+    for (const updatedElementWithIssues of updatedElementsWithIssues) {
+      const existingElementIndex = extendedElementsWithIssues.value.findIndex(extendedElementWithIssues => extendedElementWithIssues.element === updatedElementWithIssues.element);
+      if (existingElementIndex > -1 && extendedElementsWithIssues.value[existingElementIndex] && !areIssueSetsEqual(extendedElementsWithIssues.value[existingElementIndex].issues.value, updatedElementWithIssues.issues)) {
+        extendedElementsWithIssues.value[existingElementIndex].issues.value = updatedElementWithIssues.issues;
+      }
+    }
+
+    const addedElementsWithIssues = updatedElementsWithIssues.filter(updatedElementWithIssues => {
+      return !extendedElementsWithIssues.value.some(extendedElementWithIssues => extendedElementWithIssues.element === updatedElementWithIssues.element);
+    });
+
+    const removedElementsWithIssues = extendedElementsWithIssues.value.filter(extendedElementWithIssues => {
+      return !updatedElementsWithIssues.some(updatedElementWithIssues => updatedElementWithIssues.element === extendedElementWithIssues.element);
+    });
+
+    if (addedElementsWithIssues.length > 0 || removedElementsWithIssues.length > 0) {
+      extendedElementsWithIssues.value = [...extendedElementsWithIssues.value]
+        .filter(extendedElementWithIssues => {
+          return !removedElementsWithIssues.some(removedElementWithIssues => removedElementWithIssues.element === extendedElementWithIssues.element);
+        })
+        .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/utils/issuesToElements.d.ts

@@ -1,3 +0,0 @@
-import type { AxeResults } from 'axe-core';
-export default function issuesToElements(issues: typeof AxeResults.violations): Element[];
-//# sourceMappingURL=issuesToElements.d.ts.map

package/dist/utils/issuesToElements.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"issuesToElements.d.ts","sourceRoot":"","sources":["../../src/utils/issuesToElements.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,UAAU,CAAC;AAE3C,MAAM,CAAC,OAAO,UAAU,gBAAgB,CAAC,MAAM,EAAE,OAAO,UAAU,CAAC,UAAU,aAgB5E"}

package/dist/utils/issuesToElements.js

@@ -1,16 +0,0 @@
-export default function issuesToElements(issues) {
-    const elements = new Set();
-    for (const issue of issues) {
-        for (const node of issue.nodes) {
-            // TODO: how to make this easier / more reliable?
-            if (typeof node.target[0] === 'string') {
-                const element = document.querySelector(node.target[0]);
-                if (element) {
-                    elements.add(element);
-                }
-            }
-        }
-    }
-    return [...elements];
-}
-//# sourceMappingURL=issuesToElements.js.map

package/dist/utils/issuesToElements.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"issuesToElements.js","sourceRoot":"","sources":["../../src/utils/issuesToElements.ts"],"names":[],"mappings":"AAEA,MAAM,CAAC,OAAO,UAAU,gBAAgB,CAAC,MAAoC;IAC3E,MAAM,QAAQ,GAAiB,IAAI,GAAG,EAAE,CAAC;IAEzC,KAAK,MAAM,KAAK,IAAI,MAAM,EAAE,CAAC;QAC3B,KAAK,MAAM,IAAI,IAAI,KAAK,CAAC,KAAK,EAAE,CAAC;YAC/B,iDAAiD;YACjD,IAAI,OAAO,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,KAAK,QAAQ,EAAE,CAAC;gBACvC,MAAM,OAAO,GAAG,QAAQ,CAAC,aAAa,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC;gBACvD,IAAI,OAAO,EAAE,CAAC;oBACZ,QAAQ,CAAC,GAAG,CAAC,OAAO,CAAC,CAAC;gBACxB,CAAC;YACH,CAAC;QACH,CAAC;IACH,CAAC;IAED,OAAO,CAAC,GAAG,QAAQ,CAAC,CAAC;AACvB,CAAC"}