accented 0.0.1-dev.4 → 0.0.2

package/README.md

@@ -0,0 +1,214 @@
+# Accented
+
+Accented is a library that helps visually identify accessibility issues in a website or webapp under development.
+
+It can be set up in only a few lines of code
+
+It complements approaches to other means of continuous automated accessibility testing such as static code analysis and inclusion of accessibility tests in test suites. Think of it as a form of linting, but for a rendered web page rather than for source code.
+
+Accented uses the [axe-core](https://github.com/dequelabs/axe-core) testing engine.
+
+TODO: example screenshots, without Accented / with Accented.
+
+## Basic usage
+
+* The library can be used in three ways:
+  * NPM (with a bundler)
+  * `import accented from 'https://esm.sh/accented';`.
+  * `import('https://esm.sh/accented').then(({default: accented}) => { accented(); });` (this version will work in the console, unless it violates the content security policy, which shouldn't be the case locally).
+    * For example, this works on medium.com
+
+## API
+
+### Exports
+
+* `accented`: the default library export. It’s the function that enables the continuous scanning and highlighting
+  on the page in whose context in was called. Example: `const disable = accented(options)`.
+  * Parameters: the only parameter is `options`. See [Options](#options).
+  * 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.
+
+#### Type exports
+
+The following types are exported for TypeScript consumers:
+
+* `AccentedOptions`: the `options` parameter (see [Options](#options)).
+* `DisableAccented`: the type of the function returned by `accented`.
+
+### Options
+
+#### `axeContext`
+
+**Type:** see [documentation](https://www.deque.com/axe/core-documentation/api-documentation/#context-parameter).
+
+**Default:** `document`.
+
+The `context` parameter for `axe.run()`.
+
+Determines what element(s) to scan for accessibility issues.
+
+Accepts a variety of shapes:
+* an element reference;
+* a selector;
+* a `NodeList`;
+* an include / exclude object;
+* and more.
+
+See documentation: https://www.deque.com/axe/core-documentation/api-documentation/#context-parameter
+
+#### `axeOptions`
+
+**Type:** object.
+
+**Default:** `{}`.
+
+The `options` parameter for `axe.run()`.
+
+Accented only supports two keys of the `options` object:
+
+* `rules`;
+* `runOnly`.
+
+Both properties are optional, and both control which accessibility rules your page is tested against.
+
+See documentation: https://www.deque.com/axe/core-documentation/api-documentation/#options-parameter
+
+#### `output`
+
+An object controlling how the results of scans will be presented.
+
+#### `output.console`
+
+**Type:** boolean.
+
+**Default:** `true`.
+
+Whether the list of elements with issues should be printed to the browser console whenever issues are added, removed, or changed.
+
+#### `callback`
+
+**Type:** function.
+
+**Default:** no-op (`() => {}`).
+
+A function that Accented will call after every scan.
+It accepts a single `params` object with the following properties:
+
+* `elementsWithIssues`: the most up-to-date array of all elements with accessibility issues.
+* `scanDuration`: how long the last scan took, in milliseconds (may be useful for performance tracking).
+
+**Example:**
+
+```
+accented({
+  callback: ({ elementsWithIssues, scanDuration }) => {
+    console.log('Elements with issues:', elementsWithIssues);
+    console.log('Scan duration:', scanDuration);
+  }
+});
+```
+
+#### `name`
+
+**Type:** string.
+
+**Default:** `"accented"`.
+
+The character sequence that’s used in various elements, attributes and stylesheets that Accented adds to the page.
+
+You shouldn’t have to use this attribute unless some of the names on your page conflict with what Accented provides by default.
+
+* The data attribute that’s added to elements with issues (default: `data-accented`).
+* The custom elements for the button and the dialog that get created for each element with issues
+  (default: `accented-trigger`, `accented-dialog`).
+* The CSS cascade layer containing page-wide Accented-specific styles (default: `accented`).
+* The prefix for some of the CSS custom properties used by Accented (default: `--accented-`).
+* The window property that’s used to prevent multiple axe-core scans from running simultaneously
+  (default: `__accented_axe_running__`).
+
+Only lowercase alphanumeric characters and dashes (-) are allowed in the name,
+and it must start with a lowercase letter.
+
+**Example:**
+
+```
+accented({name: 'my-name'});
+```
+
+With the above option provided, the attribute set on elements with issues will be `data-my-name`,
+a custom element will be called `my-name-trigger`, and so on.
+
+#### `throttle`
+
+An object controlling when Accented will run its scans.
+
+#### `throttle.wait`
+
+**Type:** number.
+
+**Default:** 1000.
+
+The delay (in milliseconds) after a mutation or after the last Accented scan.
+
+If the page you’re scanning has a lot of nodes,
+scanning may take a noticeable time (~ a few hundred milliseconds),
+during which time the main thread will be blocked most of the time.
+
+You may want to experiment with this value if your page contents change frequently
+or if it has JavaScript-based animations running on the main thread.
+
+#### `throttle.leading`
+
+**Type:** boolean.
+
+**Default:** `true`.
+
+If set to true, the scan runs immediately after a mutation.
+In this case, `wait` only applies to subsequent scans,
+giving the page at least `wait` milliseconds between the end of the previous scan
+and the beginning of the next one.
+
+If set to false, the wait applies to mutations as well,
+delaying the output.
+This may be useful if you’re expecting bursts of mutations on your page.
+
+### Styling
+
+TODO: Create a separate doc with info on using `:root` and CSS layers to control some aspects of styling.
+
+Documented CSS custom props:
+* `--accented-primary-color`
+* `--accented-secondary-color`
+* `--accented-outline-width`
+* `--accented-outline-style`
+
+## Miscellaneous
+
+### Shadow DOM
+
+Highlighting elements inside shadow DOM is not supported yet, see [#25](https://github.com/pomerantsev/accented/issues/25).
+
+### Iframes
+
+Although axe-core is capable of scanning iframes, Accented doesn’t provide that as a special capability.
+
+Instead, if you wish to scan the document in an iframe, initialize Accented inside the iframed document.
+There should be no interference between the instances of Accented running in the parent and child documents.
+
+TODO: expand this section and better explain the concepts.
+
+## Frequently asked questions
+
+<!-- TODO: how can this section be better formatted? This probably should be regular sections rather than a Q&A. -->
+
+**Q:** can Accented be used in a CI (continuous integration) environment?
+
+**A:** no, it’s only meant for local development. Accented runs accessibility tests on every state of the page that’s currently in the developer’s browser. However, if you additionally need something for CI, consider using [axe-core](https://www.npmjs.com/package/axe-core) in your automated test suite, either directly, or through wrappers such as [jest-axe](https://www.npmjs.com/package/jest-axe) or [axe-playwright](https://www.npmjs.com/package/axe-playwright).
+
+**Q:** does Accented affect performance?
+
+**A:** TODO: it might (it’s inevitable because it’s on the main thread), but we’ve taken X, Y, and Z measures to make it less noticeable. You can also take A, B, and C steps yourself.
+  * Only re-running on the changed part of the page.
+  * Throttling calls and giving the ability to tweak it.
+  * Providing the ability to select which rules to run, and which elements to run them on.
+  * TODO: explore axe-core’s internals. Can I make it yield periodically?

package/dist/accented.d.ts

@@ -1,8 +1,29 @@
-type AccentedProps = {
-    outputToConsole: boolean;
-    initialDelay: number;
-    throttleDelay: number;
-};
-export default function accented(props?: Partial<AccentedProps>): void;
-export {};
+import type { AccentedOptions, DisableAccented } from './types';
+export type { AccentedOptions, DisableAccented };
+/**
+ * Enables highlighting of elements with accessibility issues.
+ *
+ * @param {AccentedOptions} options - The options object.
+ *
+ * @returns A `disable` function that can be called to stop the scanning and highlighting.
+ *
+ * @example
+ * accented();
+ *
+ * @example
+ * const disableAccented = accented({
+ *   output: {
+ *     console: false
+ *   },
+ *   throttle: {
+ *     wait: 500,
+ *     leading: false
+ *   },
+ *   callback: ({ elementsWithIssues, scanDuration }) => {
+ *    console.log('Elements with issues:', elementsWithIssues);
+ *    console.log('Scan duration:', scanDuration);
+ *   }
+ * });
+ */
+export default function accented(options?: AccentedOptions): DisableAccented;
 //# sourceMappingURL=accented.d.ts.map

package/dist/accented.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"accented.d.ts","sourceRoot":"","sources":["../src/accented.ts"],"names":[],"mappings":"AAKA,KAAK,aAAa,GAAG;IACnB,eAAe,EAAE,OAAO,CAAC;IACzB,YAAY,EAAE,MAAM,CAAC;IACrB,aAAa,EAAE,MAAM,CAAA;CACtB,CAAC;AAQF,MAAM,CAAC,OAAO,UAAU,QAAQ,CAAC,KAAK,GAAE,OAAO,CAAC,aAAa,CAAM,QA6ClE"}
+{"version":3,"file":"accented.d.ts","sourceRoot":"","sources":["../src/accented.ts"],"names":[],"mappings":"AAUA,OAAO,KAAK,EAAE,eAAe,EAAE,eAAe,EAAE,MAAM,SAAS,CAAC;AAKhE,YAAY,EAAE,eAAe,EAAE,eAAe,EAAE,CAAC;AAEjD;;;;;;;;;;;;;;;;;;;;;;;;GAwBG;AACH,MAAM,CAAC,OAAO,UAAU,QAAQ,CAAC,OAAO,GAAE,eAAoB,GAAG,eAAe,CA4E/E"}

package/dist/accented.js

@@ -1,46 +1,104 @@
-import axe from 'axe-core';
-import TaskQueue from './task-queue.js';
-import DomUpdater from './dom-updater.js';
-import issuesToElements from './utils/issuesToElements.js';
-const defaultProps = {
-    outputToConsole: true,
-    initialDelay: 0,
-    throttleDelay: 1000
-};
-export default function accented(props = {}) {
-    const { outputToConsole, initialDelay, throttleDelay } = { ...defaultProps, ...props };
-    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 domUpdater = new DomUpdater();
-    const taskQueue = new TaskQueue(async () => {
-        performance.mark('axe-start');
-        const result = await axe.run();
-        const axeMeasure = performance.measure('axe', 'axe-start');
-        const elements = issuesToElements(result.violations);
-        domUpdater.update(elements);
-        if (outputToConsole) {
-            console.log('Result:', result);
+import registerElements from './register-elements.js';
+import createDomUpdater from './dom-updater.js';
+import createLogger from './logger.js';
+import createScanner from './scanner.js';
+import setupScrollListeners from './scroll-listeners.js';
+import setupResizeListener from './resize-listener.js';
+import setupIntersectionObserver from './intersection-observer.js';
+import { enabled, extendedElementsWithIssues } from './state.js';
+import deepMerge from './utils/deep-merge.js';
+import validateOptions from './validate-options.js';
+import supportsAnchorPositioning from './utils/supports-anchor-positioning.js';
+import logAndRethrow from './log-and-rethrow.js';
+/**
+ * Enables highlighting of elements with accessibility issues.
+ *
+ * @param {AccentedOptions} options - The options object.
+ *
+ * @returns A `disable` function that can be called to stop the scanning and highlighting.
+ *
+ * @example
+ * accented();
+ *
+ * @example
+ * const disableAccented = accented({
+ *   output: {
+ *     console: false
+ *   },
+ *   throttle: {
+ *     wait: 500,
+ *     leading: false
+ *   },
+ *   callback: ({ elementsWithIssues, scanDuration }) => {
+ *    console.log('Elements with issues:', elementsWithIssues);
+ *    console.log('Scan duration:', scanDuration);
+ *   }
+ * });
+ */
+export default function accented(options = {}) {
+    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 () => { };
         }
-        console.log('Axe run duration:', Math.round(axeMeasure.duration), 'ms');
-    }, { initialDelay, throttleDelay });
-    taskQueue.add(document);
-    const mutationObserver = new MutationObserver(mutationList => {
-        // TODO: filter out irrelevant mutations
-        for (const mutationRecord of mutationList) {
-            if (mutationRecord.type === 'attributes' && mutationRecord.attributeName === 'data-accented') {
-                continue;
-            }
-            taskQueue.add(mutationRecord.target);
+        const defaultOutput = {
+            console: true
+        };
+        const defaultThrottle = {
+            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 = {
+            axeContext: document,
+            axeOptions: {},
+            name: 'accented',
+            output: defaultOutput,
+            throttle: defaultThrottle,
+            callback: () => { }
+        };
+        const { axeContext, axeOptions, name, output, throttle, callback } = deepMerge(defaultOptions, options);
+        if (enabled.value) {
+            // Add link to the recipes section of the docs (#56).
+            console.warn('You are trying to run the Accented library more than once. ' +
+                'This will likely lead to errors.');
+            console.trace();
         }
-    });
-    // TODO: read more about the params and decide which ones we need.
-    mutationObserver.observe(document, {
-        subtree: true,
-        childList: true,
-        attributes: true
-    });
+        enabled.value = true;
+        registerElements(name);
+        const { disconnect: cleanupIntersectionObserver, intersectionObserver } = supportsAnchorPositioning(window) ? {} : setupIntersectionObserver();
+        const cleanupScanner = createScanner(name, axeContext, axeOptions, throttle, callback);
+        const cleanupDomUpdater = createDomUpdater(name, intersectionObserver);
+        const cleanupLogger = output.console ? createLogger() : () => { };
+        const cleanupScrollListeners = supportsAnchorPositioning(window) ? () => { } : setupScrollListeners();
+        const cleanupResizeListener = supportsAnchorPositioning(window) ? () => { } : setupResizeListener();
+        return () => {
+            try {
+                enabled.value = false;
+                extendedElementsWithIssues.value = [];
+                cleanupScanner();
+                cleanupDomUpdater();
+                cleanupLogger();
+                cleanupScrollListeners();
+                cleanupResizeListener();
+                if (cleanupIntersectionObserver) {
+                    cleanupIntersectionObserver();
+                }
+            }
+            catch (error) {
+                logAndRethrow(error);
+            }
+        };
+    }
+    catch (error) {
+        logAndRethrow(error);
+        return () => { };
+    }
 }
 //# sourceMappingURL=accented.js.map

package/dist/accented.js.map

@@ -1 +1 @@
-{"version":3,"file":"accented.js","sourceRoot":"","sources":["../src/accented.ts"],"names":[],"mappings":"AAAA,OAAO,GAAG,MAAM,UAAU,CAAC;AAC3B,OAAO,SAAS,MAAM,cAAc,CAAC;AACrC,OAAO,UAAU,MAAM,eAAe,CAAC;AACvC,OAAO,gBAAgB,MAAM,0BAA0B,CAAC;AAQxD,MAAM,YAAY,GAAkB;IAClC,eAAe,EAAE,IAAI;IACrB,YAAY,EAAE,CAAC;IACf,aAAa,EAAE,IAAI;CACpB,CAAC;AAEF,MAAM,CAAC,OAAO,UAAU,QAAQ,CAAC,QAAgC,EAAE;IACjE,MAAM,EAAC,eAAe,EAAE,YAAY,EAAE,aAAa,EAAC,GAAG,EAAC,GAAG,YAAY,EAAE,GAAG,KAAK,EAAC,CAAC;IAEnF,IAAI,OAAO,MAAM,KAAK,WAAW,IAAI,OAAO,QAAQ,KAAK,WAAW,EAAE,CAAC;QACrE,OAAO,CAAC,IAAI,CAAC,wGAAwG,CAAC,CAAC;QACvH,OAAO,CAAC,KAAK,EAAE,CAAC;QAChB,OAAO;IACT,CAAC;IAED,MAAM,UAAU,GAAG,IAAI,UAAU,EAAE,CAAC;IAEpC,MAAM,SAAS,GAAG,IAAI,SAAS,CAAO,KAAK,IAAI,EAAE;QAC/C,WAAW,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC;QAE9B,MAAM,MAAM,GAAG,MAAM,GAAG,CAAC,GAAG,EAAE,CAAC;QAE/B,MAAM,UAAU,GAAG,WAAW,CAAC,OAAO,CAAC,KAAK,EAAE,WAAW,CAAC,CAAC;QAE3D,MAAM,QAAQ,GAAG,gBAAgB,CAAC,MAAM,CAAC,UAAU,CAAC,CAAC;QACrD,UAAU,CAAC,MAAM,CAAC,QAAQ,CAAC,CAAC;QAE5B,IAAI,eAAe,EAAE,CAAC;YACpB,OAAO,CAAC,GAAG,CAAC,SAAS,EAAE,MAAM,CAAC,CAAC;QACjC,CAAC;QACD,OAAO,CAAC,GAAG,CAAC,mBAAmB,EAAE,IAAI,CAAC,KAAK,CAAC,UAAU,CAAC,QAAQ,CAAC,EAAE,IAAI,CAAC,CAAC;IAC1E,CAAC,EAAE,EAAE,YAAY,EAAE,aAAa,EAAE,CAAC,CAAC;IAEpC,SAAS,CAAC,GAAG,CAAC,QAAQ,CAAC,CAAC;IAExB,MAAM,gBAAgB,GAAG,IAAI,gBAAgB,CAAC,YAAY,CAAC,EAAE;QAC3D,wCAAwC;QACxC,KAAK,MAAM,cAAc,IAAI,YAAY,EAAE,CAAC;YAC1C,IAAI,cAAc,CAAC,IAAI,KAAK,YAAY,IAAI,cAAc,CAAC,aAAa,KAAK,eAAe,EAAE,CAAC;gBAC7F,SAAS;YACX,CAAC;YACD,SAAS,CAAC,GAAG,CAAC,cAAc,CAAC,MAAM,CAAC,CAAC;QACvC,CAAC;IACH,CAAC,CAAC,CAAC;IAEH,kEAAkE;IAClE,gBAAgB,CAAC,OAAO,CAAC,QAAQ,EAAE;QACjC,OAAO,EAAE,IAAI;QACb,SAAS,EAAE,IAAI;QACf,UAAU,EAAE,IAAI;KACjB,CAAC,CAAC;AACL,CAAC"}
+{"version":3,"file":"accented.js","sourceRoot":"","sources":["../src/accented.ts"],"names":[],"mappings":"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"}

package/dist/constants.d.ts

@@ -0,0 +1,3 @@
+export declare const accentedUrl = "https://www.npmjs.com/package/accented";
+export declare const issuesUrl = "https://github.com/pomerantsev/accented/issues";
+//# sourceMappingURL=constants.d.ts.map

package/dist/constants.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"constants.d.ts","sourceRoot":"","sources":["../src/constants.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,WAAW,2CAA2C,CAAC;AACpE,eAAO,MAAM,SAAS,mDAAmD,CAAC"}

package/dist/constants.js

@@ -0,0 +1,3 @@
+export const accentedUrl = 'https://www.npmjs.com/package/accented';
+export const issuesUrl = 'https://github.com/pomerantsev/accented/issues';
+//# sourceMappingURL=constants.js.map

package/dist/constants.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"constants.js","sourceRoot":"","sources":["../src/constants.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,WAAW,GAAG,wCAAwC,CAAC;AACpE,MAAM,CAAC,MAAM,SAAS,GAAG,gDAAgD,CAAC"}

package/dist/dom-updater.d.ts

@@ -1,7 +1,2 @@
-export default class DomUpdater {
-    #private;
-    elements: Array<Element>;
-    constructor();
-    update(newElements: Array<Element>): void;
-}
+export default function createDomUpdater(name: string, intersectionObserver?: IntersectionObserver): () => void;
 //# sourceMappingURL=dom-updater.d.ts.map

package/dist/dom-updater.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"dom-updater.d.ts","sourceRoot":"","sources":["../src/dom-updater.ts"],"names":[],"mappings":"AAEA,MAAM,CAAC,OAAO,OAAO,UAAU;;IAC7B,QAAQ,EAAE,KAAK,CAAC,OAAO,CAAC,CAAM;;IAM9B,MAAM,CAAC,WAAW,EAAE,KAAK,CAAC,OAAO,CAAC;CAsBnC"}
+{"version":3,"file":"dom-updater.d.ts","sourceRoot":"","sources":["../src/dom-updater.ts"],"names":[],"mappings":"AAKA,MAAM,CAAC,OAAO,UAAU,gBAAgB,CAAC,IAAI,EAAE,MAAM,EAAE,oBAAoB,CAAC,EAAE,oBAAoB,cA0GjG"}

package/dist/dom-updater.js

@@ -1,29 +1,103 @@
-const attrName = 'data-accented';
-export default class DomUpdater {
-    elements = [];
-    constructor() {
-        this.#addStylesheetToDocument();
+import { effect } from '@preact/signals-core';
+import { extendedElementsWithIssues } from './state.js';
+import supportsAnchorPositioning from './utils/supports-anchor-positioning.js';
+export default function createDomUpdater(name, intersectionObserver) {
+    const attrName = `data-${name}`;
+    function getAnchorNames(anchorNameValue) {
+        return anchorNameValue
+            .split(',')
+            .map(anchorName => anchorName.trim())
+            .filter(anchorName => anchorName.startsWith('--'));
     }
-    update(newElements) {
-        for (const element of this.elements) {
-            element.removeAttribute(attrName);
+    function setAnchorName(element, id) {
+        const anchorNameValue = element.style.getPropertyValue('anchor-name') || window.getComputedStyle(element).getPropertyValue('anchor-name');
+        const anchorNames = getAnchorNames(anchorNameValue);
+        if (anchorNames.length > 0) {
+            element.style.setProperty('anchor-name', `${anchorNameValue}, --${name}-anchor-${id}`);
         }
-        this.elements = [...newElements];
-        for (const element of this.elements) {
-            element.setAttribute(attrName, '');
+        else {
+            element.style.setProperty('anchor-name', `--${name}-anchor-${id}`);
         }
     }
-    #addStylesheetToDocument() {
-        // TODO: is this the preferred way of adding a stylesheet?
-        const styleElement = document.createElement('style');
-        // FIX: looks like a bad idea, the stylesheet gets multiple <br> tags
-        styleElement.innerText = `
+    function removeAnchorName(element, id) {
+        const anchorNameValue = element.style.getPropertyValue('anchor-name');
+        const anchorNames = getAnchorNames(anchorNameValue);
+        const index = anchorNames.indexOf(`--${name}-anchor-${id}`);
+        if (anchorNames.length === 1 && index === 0) {
+            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) {
+        for (const elementWithIssues of extendedElementsWithIssues) {
+            elementWithIssues.element.setAttribute(attrName, elementWithIssues.id.toString());
+            if (supportsAnchorPositioning(window)) {
+                setAnchorName(elementWithIssues.element, elementWithIssues.id);
+            }
+            if (elementWithIssues.element.parentElement) {
+                elementWithIssues.element.insertAdjacentElement('afterend', elementWithIssues.trigger);
+            }
+            else {
+                elementWithIssues.element.insertAdjacentElement('beforeend', elementWithIssues.trigger);
+            }
+            if (intersectionObserver) {
+                intersectionObserver.observe(elementWithIssues.element);
+            }
+        }
+    }
+    function removeIssues(extendedElementsWithIssues) {
+        for (const elementWithIssues of extendedElementsWithIssues) {
+            elementWithIssues.element.removeAttribute(attrName);
+            if (supportsAnchorPositioning(window)) {
+                removeAnchorName(elementWithIssues.element, elementWithIssues.id);
+            }
+            elementWithIssues.trigger.remove();
+            if (intersectionObserver) {
+                intersectionObserver.unobserve(elementWithIssues.element);
+            }
+        }
+    }
+    const stylesheet = new CSSStyleSheet();
+    stylesheet.replaceSync(`
+    @layer ${name} {
+      :root {
+        --${name}-primary-color: red;
+        --${name}-secondary-color: white;
+        --${name}-outline-width: 2px;
+        --${name}-outline-style: solid;
+      }
+
       [${attrName}]:not(:focus-visible) {
-        outline: 2px solid red !important;
-        outline-offset: -2px;
+        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;
       }
-    `;
-        document.head.appendChild(styleElement);
     }
+  `);
+    let previousExtendedElementsWithIssues = [];
+    document.adoptedStyleSheets.push(stylesheet);
+    const removeStylesheet = () => {
+        if (document.adoptedStyleSheets.includes(stylesheet)) {
+            document.adoptedStyleSheets.splice(document.adoptedStyleSheets.indexOf(stylesheet), 1);
+        }
+    };
+    const disposeOfElementsEffect = effect(() => {
+        const added = extendedElementsWithIssues.value.filter(elementWithIssues => {
+            return !previousExtendedElementsWithIssues.some(previousElementWithIssues => previousElementWithIssues.element === elementWithIssues.element);
+        });
+        const removed = previousExtendedElementsWithIssues.filter(previousElementWithIssues => {
+            return !extendedElementsWithIssues.value.some(elementWithIssues => elementWithIssues.element === previousElementWithIssues.element);
+        });
+        removeIssues(removed);
+        setIssues(added);
+        previousExtendedElementsWithIssues = [...extendedElementsWithIssues.value];
+    });
+    return () => {
+        removeStylesheet();
+        disposeOfElementsEffect();
+    };
 }
 //# sourceMappingURL=dom-updater.js.map

package/dist/dom-updater.js.map

@@ -1 +1 @@
-{"version":3,"file":"dom-updater.js","sourceRoot":"","sources":["../src/dom-updater.ts"],"names":[],"mappings":"AAAA,MAAM,QAAQ,GAAG,eAAe,CAAC;AAEjC,MAAM,CAAC,OAAO,OAAO,UAAU;IAC7B,QAAQ,GAAmB,EAAE,CAAC;IAE9B;QACE,IAAI,CAAC,wBAAwB,EAAE,CAAC;IAClC,CAAC;IAED,MAAM,CAAC,WAA2B;QAChC,KAAK,MAAM,OAAO,IAAI,IAAI,CAAC,QAAQ,EAAE,CAAC;YACpC,OAAO,CAAC,eAAe,CAAC,QAAQ,CAAC,CAAC;QACpC,CAAC;QACD,IAAI,CAAC,QAAQ,GAAG,CAAC,GAAG,WAAW,CAAC,CAAC;QACjC,KAAK,MAAM,OAAO,IAAI,IAAI,CAAC,QAAQ,EAAE,CAAC;YACpC,OAAO,CAAC,YAAY,CAAC,QAAQ,EAAE,EAAE,CAAC,CAAC;QACrC,CAAC;IACH,CAAC;IAED,wBAAwB;QACtB,0DAA0D;QAC1D,MAAM,YAAY,GAAG,QAAQ,CAAC,aAAa,CAAC,OAAO,CAAC,CAAC;QACrD,qEAAqE;QACrE,YAAY,CAAC,SAAS,GAAG;SACpB,QAAQ;;;;KAIZ,CAAC;QACF,QAAQ,CAAC,IAAI,CAAC,WAAW,CAAC,YAAY,CAAC,CAAC;IAC1C,CAAC;CACF"}
+{"version":3,"file":"dom-updater.js","sourceRoot":"","sources":["../src/dom-updater.ts"],"names":[],"mappings":"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"}