accented 0.0.1-dev.4 → 1.0.0

package/dist/validate-options.d.ts

@@ -0,0 +1,3 @@
+import type { AccentedOptions } from './types.ts';
+export declare function validateOptions(options: AccentedOptions): void;
+//# sourceMappingURL=validate-options.d.ts.map

package/dist/validate-options.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"validate-options.d.ts","sourceRoot":"","sources":["../src/validate-options.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EACV,eAAe,EAMhB,MAAM,YAAY,CAAC;AA+GpB,wBAAgB,eAAe,CAAC,OAAO,EAAE,eAAe,QAgEvD"}

package/dist/validate-options.js

@@ -0,0 +1,129 @@
+import { allowedAxeOptions } from './types.js';
+import { isNode, isNodeList } from './utils/dom-helpers.js';
+function isSelector(contextFragment) {
+    return (typeof contextFragment === 'string' ||
+        isNode(contextFragment) ||
+        'fromShadowDom' in contextFragment);
+}
+function validateSelector(selector) {
+    if (typeof selector === 'string') {
+        return;
+    }
+    if (isNode(selector)) {
+        return;
+    }
+    if ('fromShadowDom' in selector) {
+        if (!Array.isArray(selector.fromShadowDom) ||
+            selector.fromShadowDom.length < 2 ||
+            !selector.fromShadowDom.every((item) => typeof item === 'string')) {
+            throw new TypeError(`Accented: invalid argument. \`fromShadowDom\` must be an array of strings with at least 2 elements. It’s currently set to ${selector.fromShadowDom}.`);
+        }
+        return;
+    }
+    const neverSelector = selector;
+    throw new TypeError(`Accented: invalid argument. The selector must be one of: string, Node, or an object with a \`fromShadowDom\` property. It’s currently set to ${neverSelector}.`);
+}
+function isSelectorList(contextFragment) {
+    return ((typeof contextFragment === 'object' && isNodeList(contextFragment)) ||
+        (Array.isArray(contextFragment) && contextFragment.every((item) => isSelector(item))));
+}
+function validateSelectorList(selectorList) {
+    if (isNodeList(selectorList)) {
+        return;
+    }
+    if (Array.isArray(selectorList)) {
+        for (const selector of selectorList) {
+            validateSelector(selector);
+        }
+    }
+    else {
+        const neverSelectorList = selectorList;
+        throw new TypeError(`Accented: invalid argument. The selector list must either be a NodeList or an array. It’s currently set to ${neverSelectorList}.`);
+    }
+}
+function isContextProp(contextFragment) {
+    return isSelector(contextFragment) || isSelectorList(contextFragment);
+}
+function validateContextProp(context) {
+    if (isSelector(context)) {
+        validateSelector(context);
+    }
+    else if (isSelectorList(context)) {
+        validateSelectorList(context);
+    }
+    else {
+        const neverContext = context;
+        throw new TypeError(`Accented: invalid argument. The context property must either be a selector or a selector list. It’s currently set to ${neverContext}.`);
+    }
+}
+function isContextObject(contextFragment) {
+    return (typeof contextFragment === 'object' &&
+        contextFragment !== null &&
+        ('include' in contextFragment || 'exclude' in contextFragment));
+}
+function validateContextObject(contextObject) {
+    if ('include' in contextObject && contextObject.include !== undefined) {
+        validateContextProp(contextObject.include);
+    }
+    if ('exclude' in contextObject && contextObject.exclude !== undefined) {
+        validateContextProp(contextObject.exclude);
+    }
+}
+function validateContext(context) {
+    if (isContextProp(context)) {
+        validateContextProp(context);
+    }
+    else if (isContextObject(context)) {
+        validateContextObject(context);
+    }
+    else {
+        const neverContext = context;
+        throw new TypeError(`Accented: invalid context argument. It’s currently set to ${neverContext}.`);
+    }
+}
+// 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 function validateOptions(options) {
+    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.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(', ')}.`);
+        }
+    }
+    if (options.context !== undefined) {
+        validateContext(options.context);
+    }
+}
+//# sourceMappingURL=validate-options.js.map

package/dist/validate-options.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"validate-options.js","sourceRoot":"","sources":["../src/validate-options.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,MAAM,YAAY,CAAC;AAS/C,OAAO,EAAE,MAAM,EAAE,UAAU,EAAE,MAAM,wBAAwB,CAAC;AAE5D,SAAS,UAAU,CAAC,eAAwB;IAC1C,OAAO,CACL,OAAO,eAAe,KAAK,QAAQ;QACnC,MAAM,CAAC,eAAe,CAAC;QACvB,eAAe,IAAI,eAAe,CACnC,CAAC;AACJ,CAAC;AAED,SAAS,gBAAgB,CAAC,QAAkB;IAC1C,IAAI,OAAO,QAAQ,KAAK,QAAQ,EAAE,CAAC;QACjC,OAAO;IACT,CAAC;IACD,IAAI,MAAM,CAAC,QAAQ,CAAC,EAAE,CAAC;QACrB,OAAO;IACT,CAAC;IACD,IAAI,eAAe,IAAI,QAAQ,EAAE,CAAC;QAChC,IACE,CAAC,KAAK,CAAC,OAAO,CAAC,QAAQ,CAAC,aAAa,CAAC;YACtC,QAAQ,CAAC,aAAa,CAAC,MAAM,GAAG,CAAC;YACjC,CAAC,QAAQ,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,OAAO,IAAI,KAAK,QAAQ,CAAC,EACjE,CAAC;YACD,MAAM,IAAI,SAAS,CACjB,6HAA6H,QAAQ,CAAC,aAAa,GAAG,CACvJ,CAAC;QACJ,CAAC;QACD,OAAO;IACT,CAAC;IACD,MAAM,aAAa,GAAU,QAAQ,CAAC;IACtC,MAAM,IAAI,SAAS,CACjB,gJAAgJ,aAAa,GAAG,CACjK,CAAC;AACJ,CAAC;AAED,SAAS,cAAc,CAAC,eAAwB;IAC9C,OAAO,CACL,CAAC,OAAO,eAAe,KAAK,QAAQ,IAAI,UAAU,CAAC,eAAe,CAAC,CAAC;QACpE,CAAC,KAAK,CAAC,OAAO,CAAC,eAAe,CAAC,IAAI,eAAe,CAAC,KAAK,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,UAAU,CAAC,IAAI,CAAC,CAAC,CAAC,CACtF,CAAC;AACJ,CAAC;AAED,SAAS,oBAAoB,CAAC,YAA0B;IACtD,IAAI,UAAU,CAAC,YAAY,CAAC,EAAE,CAAC;QAC7B,OAAO;IACT,CAAC;IACD,IAAI,KAAK,CAAC,OAAO,CAAC,YAAY,CAAC,EAAE,CAAC;QAChC,KAAK,MAAM,QAAQ,IAAI,YAAY,EAAE,CAAC;YACpC,gBAAgB,CAAC,QAAQ,CAAC,CAAC;QAC7B,CAAC;IACH,CAAC;SAAM,CAAC;QACN,MAAM,iBAAiB,GAAU,YAAY,CAAC;QAC9C,MAAM,IAAI,SAAS,CACjB,8GAA8G,iBAAiB,GAAG,CACnI,CAAC;IACJ,CAAC;AACH,CAAC;AAED,SAAS,aAAa,CAAC,eAAwB;IAC7C,OAAO,UAAU,CAAC,eAAe,CAAC,IAAI,cAAc,CAAC,eAAe,CAAC,CAAC;AACxE,CAAC;AAED,SAAS,mBAAmB,CAAC,OAAgC;IAC3D,IAAI,UAAU,CAAC,OAAO,CAAC,EAAE,CAAC;QACxB,gBAAgB,CAAC,OAAO,CAAC,CAAC;IAC5B,CAAC;SAAM,IAAI,cAAc,CAAC,OAAO,CAAC,EAAE,CAAC;QACnC,oBAAoB,CAAC,OAAO,CAAC,CAAC;IAChC,CAAC;SAAM,CAAC;QACN,MAAM,YAAY,GAAU,OAAO,CAAC;QACpC,MAAM,IAAI,SAAS,CACjB,wHAAwH,YAAY,GAAG,CACxI,CAAC;IACJ,CAAC;AACH,CAAC;AAED,SAAS,eAAe,CAAC,eAAwB;IAC/C,OAAO,CACL,OAAO,eAAe,KAAK,QAAQ;QACnC,eAAe,KAAK,IAAI;QACxB,CAAC,SAAS,IAAI,eAAe,IAAI,SAAS,IAAI,eAAe,CAAC,CAC/D,CAAC;AACJ,CAAC;AAED,SAAS,qBAAqB,CAAC,aAA4B;IACzD,IAAI,SAAS,IAAI,aAAa,IAAI,aAAa,CAAC,OAAO,KAAK,SAAS,EAAE,CAAC;QACtE,mBAAmB,CAAC,aAAa,CAAC,OAAO,CAAC,CAAC;IAC7C,CAAC;IACD,IAAI,SAAS,IAAI,aAAa,IAAI,aAAa,CAAC,OAAO,KAAK,SAAS,EAAE,CAAC;QACtE,mBAAmB,CAAC,aAAa,CAAC,OAAO,CAAC,CAAC;IAC7C,CAAC;AACH,CAAC;AAED,SAAS,eAAe,CAAC,OAAgB;IACvC,IAAI,aAAa,CAAC,OAAO,CAAC,EAAE,CAAC;QAC3B,mBAAmB,CAAC,OAAO,CAAC,CAAC;IAC/B,CAAC;SAAM,IAAI,eAAe,CAAC,OAAO,CAAC,EAAE,CAAC;QACpC,qBAAqB,CAAC,OAAO,CAAC,CAAC;IACjC,CAAC;SAAM,CAAC;QACN,MAAM,YAAY,GAAU,OAAO,CAAC;QACpC,MAAM,IAAI,SAAS,CACjB,6DAA6D,YAAY,GAAG,CAC7E,CAAC;IACJ,CAAC;AACH,CAAC;AAED,4DAA4D;AAC5D,iFAAiF;AACjF,sFAAsF;AACtF,MAAM,SAAS,GAAG,sBAAsB,CAAC;AAEzC,MAAM,UAAU,eAAe,CAAC,OAAwB;IACtD,IAAI,OAAO,OAAO,KAAK,QAAQ,IAAI,OAAO,KAAK,IAAI,EAAE,CAAC;QACpD,MAAM,IAAI,SAAS,CACjB,0GAA0G,OAAO,GAAG,CACrH,CAAC;IACJ,CAAC;IACD,IAAI,OAAO,CAAC,QAAQ,KAAK,SAAS,EAAE,CAAC;QACnC,IAAI,OAAO,OAAO,CAAC,QAAQ,KAAK,QAAQ,IAAI,OAAO,CAAC,QAAQ,KAAK,IAAI,EAAE,CAAC;YACtE,MAAM,IAAI,SAAS,CACjB,wGAAwG,OAAO,CAAC,QAAQ,GAAG,CAC5H,CAAC;QACJ,CAAC;QACD,IACE,OAAO,CAAC,QAAQ,CAAC,IAAI,KAAK,SAAS;YACnC,CAAC,OAAO,OAAO,CAAC,QAAQ,CAAC,IAAI,KAAK,QAAQ,IAAI,OAAO,CAAC,QAAQ,CAAC,IAAI,GAAG,CAAC,CAAC,EACxE,CAAC;YACD,MAAM,IAAI,SAAS,CACjB,yHAAyH,OAAO,CAAC,QAAQ,CAAC,IAAI,GAAG,CAClJ,CAAC;QACJ,CAAC;IACH,CAAC;IACD,IAAI,OAAO,CAAC,MAAM,KAAK,SAAS,EAAE,CAAC;QACjC,IAAI,OAAO,OAAO,CAAC,MAAM,KAAK,QAAQ,IAAI,OAAO,CAAC,MAAM,KAAK,IAAI,EAAE,CAAC;YAClE,MAAM,IAAI,SAAS,CACjB,sGAAsG,OAAO,CAAC,MAAM,GAAG,CACxH,CAAC;QACJ,CAAC;QACD,IAAI,OAAO,CAAC,MAAM,CAAC,OAAO,KAAK,SAAS,IAAI,OAAO,OAAO,CAAC,MAAM,CAAC,OAAO,KAAK,SAAS,EAAE,CAAC;YACxF,OAAO,CAAC,IAAI,CACV,4GAA4G,OAAO,CAAC,MAAM,CAAC,OAAO,GAAG,CACtI,CAAC;QACJ,CAAC;IACH,CAAC;IACD,IAAI,OAAO,CAAC,QAAQ,KAAK,SAAS,IAAI,OAAO,OAAO,CAAC,QAAQ,KAAK,UAAU,EAAE,CAAC;QAC7E,MAAM,IAAI,SAAS,CACjB,yGAAyG,OAAO,CAAC,QAAQ,GAAG,CAC7H,CAAC;IACJ,CAAC;IACD,IACE,OAAO,CAAC,IAAI,KAAK,SAAS;QAC1B,CAAC,OAAO,OAAO,CAAC,IAAI,KAAK,QAAQ,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,KAAK,CAAC,SAAS,CAAC,CAAC,EACpE,CAAC;QACD,MAAM,IAAI,SAAS,CACjB,0LAA0L,OAAO,CAAC,IAAI,GAAG,CAC1M,CAAC;IACJ,CAAC;IACD,IAAI,OAAO,CAAC,UAAU,KAAK,SAAS,EAAE,CAAC;QACrC,IAAI,OAAO,OAAO,CAAC,UAAU,KAAK,QAAQ,IAAI,OAAO,CAAC,UAAU,KAAK,IAAI,EAAE,CAAC;YAC1E,MAAM,IAAI,SAAS,CACjB,0GAA0G,OAAO,CAAC,UAAU,GAAG,CAChI,CAAC;QACJ,CAAC;QACD,MAAM,eAAe,GAAG,MAAM,CAAC,IAAI,CAAC,OAAO,CAAC,UAAU,CAAC,CAAC,MAAM,CAC5D,CAAC,GAAG,EAAE,EAAE,CAAC,CAAE,iBAA8C,CAAC,QAAQ,CAAC,GAAG,CAAC,CACxE,CAAC;QACF,IAAI,eAAe,CAAC,MAAM,GAAG,CAAC,EAAE,CAAC;YAC/B,MAAM,IAAI,SAAS,CACjB,uFAAuF,eAAe,CAAC,IAAI,CAAC,IAAI,CAAC,wBAAwB,iBAAiB,CAAC,IAAI,CAAC,IAAI,CAAC,GAAG,CACzK,CAAC;QACJ,CAAC;IACH,CAAC;IACD,IAAI,OAAO,CAAC,OAAO,KAAK,SAAS,EAAE,CAAC;QAClC,eAAe,CAAC,OAAO,CAAC,OAAO,CAAC,CAAC;IACnC,CAAC;AACH,CAAC"}

package/package.json

@@ -1,11 +1,13 @@
 {
   "name": "accented",
-  "version": "0.0.1-dev.4",
-  "description": "Continuous accessibility testing and issue highlighting for web development",
+  "version": "1.0.0",
+  "description": "A frontend library for continuous accessibility testing and issue highlighting",
   "type": "module",
   "main": "dist/accented.js",
   "files": [
-    "dist"
+    "dist",
+    "src",
+    "NOTICE"
   ],
   "repository": {
     "type": "git",
@@ -14,6 +16,7 @@
   "keywords": [
     "accessibility",
     "a11y",
+    "a11y-testing",
     "axe",
     "axe-core"
   ],
@@ -22,13 +25,23 @@
   "bugs": {
     "url": "https://github.com/pomerantsev/accented/issues"
   },
-  "homepage": "https://github.com/pomerantsev/accented#readme",
+  "homepage": "https://www.accented.dev",
   "dependencies": {
-    "axe-core": "^4.10.2"
+    "@preact/signals-core": "^1.8.0",
+    "axe-core": "^4.10.3"
+  },
+  "devDependencies": {
+    "@types/jsdom": "^21.1.7",
+    "jsdom": "^26.0.0"
   },
   "scripts": {
-    "build": "tsc && ./scripts/add-import-extensions.mjs",
-    "watch": "tsc --watch",
-    "test": "node --test --import tsx ./**/*.test.ts"
+    "build": "pnpm copyCommon && tsc",
+    "copyCommon": "node --import tsx ./scripts/copy-common.ts",
+    "watchCommon": "node --import tsx ./scripts/watch-common.ts",
+    "checkBuiltFiles": "node --import tsx ./scripts/check-built-files.ts",
+    "checkImportsInBuiltFiles": "node ./dist/accented.js",
+    "typecheckTests": "tsc -p ./tsconfig.test.json",
+    "watch": "pnpm copyCommon && (pnpm watchCommon & tsc --watch)",
+    "test": "node --test --import tsx \"./**/*.test.ts\""
   }
 }

package/src/accented.test.ts

@@ -0,0 +1,24 @@
+import assert from 'node:assert/strict';
+import { suite, test } from 'node:test';
+import type { Mock } from 'node:test';
+
+import { accented } from './accented';
+
+suite('Accented', () => {
+  test('runs without errors in NodeJS and issues a warning and a trace (it’s meant to be a no-op on the server side)', (t) => {
+    t.mock.method(console, 'warn', () => {});
+    t.mock.method(console, 'trace', () => {});
+    accented();
+    assert.equal((console.warn as Mock<() => void>).mock.callCount(), 1);
+    assert.equal((console.trace as Mock<() => void>).mock.callCount(), 1);
+  });
+
+  suite('argument validation', () => {
+    // @ts-expect-error
+    assert.throws(() => accented({ throttle: null }));
+    // @ts-expect-error
+    assert.throws(() => accented({ throttle: 1000 }));
+
+    assert.throws(() => accented({ throttle: { wait: -1 } }));
+  });
+});

package/src/accented.ts

@@ -0,0 +1,130 @@
+import { createDomUpdater } from './dom-updater.js';
+import { setupResizeListener as setupFullscreenListener } from './fullscreen-listener.js';
+import { setupIntersectionObserver } from './intersection-observer.js';
+import { logAndRethrow } from './log-and-rethrow.js';
+import { createLogger } from './logger.js';
+import { registerElements } from './register-elements.js';
+import { setupResizeListener } from './resize-listener.js';
+import { createScanner } from './scanner.js';
+import { setupScrollListeners } from './scroll-listeners.js';
+import { enabled, extendedElementsWithIssues } from './state.js';
+import type { AccentedOptions, DisableAccented } from './types.ts';
+import { initializeContainingBlockSupportSet } from './utils/containing-blocks.js';
+import { deepMerge } from './utils/deep-merge.js';
+import { supportsAnchorPositioning } from './utils/supports-anchor-positioning.js';
+import { validateOptions } from './validate-options.js';
+
+export type { AccentedOptions, DisableAccented };
+
+/**
+ * Enables the continuous scanning and highlighting of accessibility issues on the page.
+ *
+ * @param {AccentedOptions} options - The options object (optional).
+ *
+ * @returns A `disable` function that takes no parameters. When called, disables the scanning and highlighting, and cleans up any changes that Accented has made to the page.
+ *
+ * @example
+ * accented();
+ *
+ * @example
+ * const disableAccented = accented({
+ *   output: {
+ *     console: false
+ *   },
+ *   throttle: {
+ *     wait: 500,
+ *     leading: false
+ *   },
+ *   callback: ({ elementsWithIssues, performance }) => {
+ *     console.log('Elements with issues:', elementsWithIssues);
+ *     console.log('Total blocking time:', performance.totalBlockingTime);
+ *   }
+ * });
+ */
+export function accented(options: AccentedOptions = {}): DisableAccented {
+  validateOptions(options);
+
+  try {
+    if (typeof window === 'undefined' || typeof document === 'undefined') {
+      console.warn(
+        'Accented: this script can only run in the browser, and it’s likely running on the server now. Exiting.',
+      );
+      console.trace();
+      return () => {};
+    }
+
+    const defaultOutput: Required<AccentedOptions['output']> = {
+      console: true,
+    };
+
+    const defaultThrottle: Required<AccentedOptions['throttle']> = {
+      wait: 1000,
+      leading: true,
+    };
+
+    // IMPORTANT: when changing any of the properties or values, also do the following:
+    // * update the default value in the type documentation accordingly;
+    // * update validations and validation tests if necessary;
+    // * update examples in the accented() function JSDoc;
+    // * update examples in the Readme.
+    const defaultOptions: Required<AccentedOptions> = {
+      context: document,
+      axeOptions: {},
+      name: 'accented',
+      output: defaultOutput,
+      throttle: defaultThrottle,
+      callback: () => {},
+    };
+
+    const { context, axeOptions, name, output, throttle, callback } = deepMerge(
+      defaultOptions,
+      options,
+    );
+
+    if (enabled.value) {
+      console.warn(
+        'You are trying to run the Accented library more than once, which may lead to errors. See https://www.accented.dev/getting-started#run-once-per-page',
+      );
+      console.trace();
+    }
+
+    enabled.value = true;
+
+    initializeContainingBlockSupportSet();
+    registerElements(name);
+
+    const { disconnect: cleanupIntersectionObserver, intersectionObserver } =
+      setupIntersectionObserver();
+    const cleanupScanner = createScanner(name, context, axeOptions, throttle, callback);
+    const cleanupDomUpdater = createDomUpdater(name, intersectionObserver);
+    const cleanupLogger = output.console ? createLogger() : () => {};
+    const cleanupScrollListeners = setupScrollListeners();
+    const cleanupResizeListener = supportsAnchorPositioning(window)
+      ? () => {}
+      : setupResizeListener();
+    const cleanupFullscreenListener = supportsAnchorPositioning(window)
+      ? () => {}
+      : setupFullscreenListener();
+
+    return () => {
+      try {
+        enabled.value = false;
+        extendedElementsWithIssues.value = [];
+        cleanupScanner();
+        cleanupDomUpdater();
+        cleanupLogger();
+        cleanupScrollListeners();
+        cleanupResizeListener();
+        cleanupFullscreenListener();
+        if (cleanupIntersectionObserver) {
+          cleanupIntersectionObserver();
+        }
+      } catch (error) {
+        logAndRethrow(error);
+      }
+    };
+  } catch (error) {
+    logAndRethrow(error);
+    return () => {};
+  }
+}

package/src/common/tokens.ts

@@ -0,0 +1,10 @@
+export const primaryColorDark = 'oklch(0.5 0.3 0)';
+export const primaryColorLight = 'oklch(0.8 0.2 0)';
+export const colorLight = 'oklch(0.98 0 0)';
+export const colorDark = 'oklch(0.22 0 0)';
+
+/* https://systemfontstack.com/ */
+export const fontSystemSans =
+  '-apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui, helvetica neue, Adwaita Sans, Cantarell, Ubuntu, roboto, noto, helvetica, arial, sans-serif';
+export const fontSystemMono =
+  'Menlo, Consolas, Monaco, Adwaita Mono, Liberation Mono, Lucida Console, monospace';

package/src/constants.ts

@@ -0,0 +1,3 @@
+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

@@ -0,0 +1,165 @@
+import { effect } from '@preact/signals-core';
+import { primaryColorDark } from './common/tokens.js';
+import { extendedElementsWithIssues, rootNodes } from './state.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 { supportsAnchorPositioning } from './utils/supports-anchor-positioning.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 function createDomUpdater(name: string, intersectionObserver?: IntersectionObserver) {
+  const attrName = `data-${name}`;
+
+  function getAnchorNames(anchorNameValue: string) {
+    return anchorNameValue
+      .split(',')
+      .map((anchorName) => anchorName.trim())
+      .filter((anchorName) => anchorName.startsWith('--'));
+  }
+
+  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}`);
+    } else {
+      element.style.setProperty('anchor-name', `--${name}-anchor-${id}`);
+    }
+  }
+
+  function removeAnchorName(elementWithIssues: ExtendedElementWithIssues) {
+    const { element, anchorNameValue } = elementWithIssues;
+    const anchorNames = getAnchorNames(anchorNameValue);
+    if (anchorNames.length > 0) {
+      element.style.setProperty('anchor-name', anchorNames.join(', '));
+    } else {
+      element.style.removeProperty('anchor-name');
+    }
+  }
+
+  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);
+      }
+
+      if (shouldInsertTriggerInsideElement(elementWithIssues.element)) {
+        elementWithIssues.element.insertAdjacentElement('beforeend', elementWithIssues.trigger);
+      } else {
+        elementWithIssues.element.insertAdjacentElement('afterend', elementWithIssues.trigger);
+      }
+      if (intersectionObserver) {
+        intersectionObserver.observe(elementWithIssues.element);
+      }
+    }
+  }
+
+  function removeIssues(extendedElementsWithIssues: Array<ExtendedElementWithIssues>) {
+    for (const elementWithIssues of extendedElementsWithIssues) {
+      if (elementWithIssues.skipRender) {
+        continue;
+      }
+      elementWithIssues.element.removeAttribute(attrName);
+      if (supportsAnchorPositioning(window)) {
+        removeAnchorName(elementWithIssues);
+      }
+      elementWithIssues.trigger.remove();
+      if (intersectionObserver) {
+        intersectionObserver.unobserve(elementWithIssues.element);
+      }
+    }
+  }
+
+  const stylesheet = new CSSStyleSheet();
+  stylesheet.replaceSync(`
+    @layer ${name} {
+      :root {
+        /* Ensure that the primary / secondary color combination meets WCAG 1.4.3 Contrast (Minimum) */
+        /* OKLCH stuff: https://oklch.com/ */
+        --${name}-primary-color: ${primaryColorDark};
+        --${name}-secondary-color: oklch(0.98 0 0);
+        --${name}-outline-width: 2px;
+        --${name}-outline-style: solid;
+      }
+
+      [${attrName}]:not(:focus-visible) {
+        outline-width: var(--${name}-outline-width) !important;
+        outline-offset: calc(-1 * var(--${name}-outline-width)) !important;
+        outline-color: var(--${name}-primary-color) !important;
+        outline-style: var(--${name}-outline-style) !important;
+      }
+    }
+  `);
+
+  let previousExtendedElementsWithIssues: Array<ExtendedElementWithIssues> = [];
+
+  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) =>
+        areElementsWithIssuesEqual(previousElementWithIssues, elementWithIssues),
+      );
+    });
+    const removed = previousExtendedElementsWithIssues.filter((previousElementWithIssues) => {
+      return !extendedElementsWithIssues.value.some((elementWithIssues) =>
+        areElementsWithIssuesEqual(elementWithIssues, previousElementWithIssues),
+      );
+    });
+    removeIssues(removed);
+    setIssues(added);
+    previousExtendedElementsWithIssues = [...extendedElementsWithIssues.value];
+  });
+
+  return () => {
+    disposeOfStyleSheetsEffect();
+    disposeOfElementsEffect();
+  };
+}