accented 0.0.0-20250124142030

package/dist/task-queue.js

@@ -0,0 +1,44 @@
+export default class TaskQueue {
+    #throttle;
+    #asyncCallback = null;
+    #items = new Set();
+    #inRunLoop = false;
+    constructor(asyncCallback, throttle) {
+        this.#asyncCallback = asyncCallback;
+        this.#throttle = throttle;
+    }
+    async #preRun() {
+        if (this.#inRunLoop) {
+            return;
+        }
+        this.#inRunLoop = true;
+        if (!this.#throttle.leading) {
+            await new Promise((resolve) => setTimeout(resolve, this.#throttle.wait));
+        }
+        await this.#run();
+    }
+    async #run() {
+        if (this.#items.size === 0) {
+            this.#inRunLoop = false;
+            return;
+        }
+        this.#items.clear();
+        if (this.#asyncCallback) {
+            await this.#asyncCallback();
+        }
+        await new Promise((resolve) => setTimeout(resolve, this.#throttle.wait));
+        await this.#run();
+    }
+    addMultiple(items) {
+        for (const item of items) {
+            this.#items.add(item);
+        }
+        if (this.#items.size > 0) {
+            this.#preRun();
+        }
+    }
+    add(item) {
+        this.addMultiple([item]);
+    }
+}
+//# sourceMappingURL=task-queue.js.map

package/dist/task-queue.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"task-queue.js","sourceRoot":"","sources":["../src/task-queue.ts"],"names":[],"mappings":"AAIA,MAAM,CAAC,OAAO,OAAO,SAAS;IAC5B,SAAS,CAAW;IACpB,cAAc,GAAwB,IAAI,CAAC;IAE3C,MAAM,GAAG,IAAI,GAAG,EAAK,CAAC;IACtB,UAAU,GAAG,KAAK,CAAC;IAEnB,YAAY,aAA2B,EAAE,QAA4B;QACnE,IAAI,CAAC,cAAc,GAAG,aAAa,CAAC;QACpC,IAAI,CAAC,SAAS,GAAG,QAAQ,CAAC;IAC5B,CAAC;IAED,KAAK,CAAC,OAAO;QACX,IAAI,IAAI,CAAC,UAAU,EAAE,CAAC;YACpB,OAAO;QACT,CAAC;QACD,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC;QAEvB,IAAI,CAAC,IAAI,CAAC,SAAS,CAAC,OAAO,EAAE,CAAC;YAC5B,MAAM,IAAI,OAAO,CAAC,CAAC,OAAO,EAAE,EAAE,CAAC,UAAU,CAAC,OAAO,EAAE,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,CAAC,CAAC;QAC3E,CAAC;QAED,MAAM,IAAI,CAAC,IAAI,EAAE,CAAC;IACpB,CAAC;IAED,KAAK,CAAC,IAAI;QACR,IAAI,IAAI,CAAC,MAAM,CAAC,IAAI,KAAK,CAAC,EAAE,CAAC;YAC3B,IAAI,CAAC,UAAU,GAAG,KAAK,CAAC;YACxB,OAAO;QACT,CAAC;QAED,IAAI,CAAC,MAAM,CAAC,KAAK,EAAE,CAAC;QAEpB,IAAI,IAAI,CAAC,cAAc,EAAE,CAAC;YACxB,MAAM,IAAI,CAAC,cAAc,EAAE,CAAC;QAC9B,CAAC;QAED,MAAM,IAAI,OAAO,CAAC,CAAC,OAAO,EAAE,EAAE,CAAC,UAAU,CAAC,OAAO,EAAE,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,CAAC,CAAC;QAEzE,MAAM,IAAI,CAAC,IAAI,EAAE,CAAC;IACpB,CAAC;IAED,WAAW,CAAC,KAAe;QACzB,KAAK,MAAM,IAAI,IAAI,KAAK,EAAE,CAAC;YACzB,IAAI,CAAC,MAAM,CAAC,GAAG,CAAC,IAAI,CAAC,CAAC;QACxB,CAAC;QACD,IAAI,IAAI,CAAC,MAAM,CAAC,IAAI,GAAG,CAAC,EAAE,CAAC;YACzB,IAAI,CAAC,OAAO,EAAE,CAAC;QACjB,CAAC;IACH,CAAC;IAED,GAAG,CAAC,IAAO;QACT,IAAI,CAAC,WAAW,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC;IAC3B,CAAC;CACF"}

package/dist/types.d.ts

@@ -0,0 +1,84 @@
+import type axe from 'axe-core';
+import type { Signal } from '@preact/signals-core';
+import type { AccentedContainer } from './elements/accented-container';
+export type DeepRequired<T> = T extends object ? {
+    [P in keyof T]-?: DeepRequired<T[P]>;
+} : T;
+export type Throttle = {
+    /**
+     * The minimal time between scans.
+     *
+     * Default: 1000.
+     * */
+    wait?: number;
+    /**
+     * When to run the scan on Accented initialization or on a mutation.
+     *
+     * If true, the scan will run immediately. If false, the scan will run after the first throttle delay.
+     *
+     * Default: true.
+     * */
+    leading?: boolean;
+};
+type CallbackParams = {
+    /**
+     * The most current array of elements with issues.
+     * */
+    elementsWithIssues: Array<ElementWithIssues>;
+    /**
+     * How long the scan took in milliseconds.
+     * */
+    scanDuration: number;
+};
+export type Callback = (params: CallbackParams) => void;
+export type AccentedOptions = {
+    /**
+     * The character sequence that’s used in various elements, attributes and stylesheets that Accented adds to the page.
+     * * The data attribute that’s added to elements with issues (default: "data-accented").
+     * * The custom element that encapsulates the button and dialog attached to each element with issues (default: "accented-container").
+     * * 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-").
+     *
+     * Default: "accented".
+     */
+    name?: string;
+    /**
+     * Whether to output the issues to the console.
+     *
+     * Default: true.
+     * */
+    outputToConsole?: boolean;
+    /**
+     * Scan throttling options object.
+     * */
+    throttle?: Throttle;
+    /**
+     * A callback that will be called after each scan.
+     *
+     * Default: () => {}.
+     * */
+    callback?: Callback;
+};
+/**
+ * A function that fully disables Accented,
+ * stopping the scanning and removing all highlights from the page.
+ */
+export type DisableAccented = () => void;
+export type Issue = {
+    id: string;
+    title: string;
+    description: string;
+    url: string;
+    impact: axe.ImpactValue;
+};
+export type ElementWithIssues = {
+    element: HTMLElement;
+    issues: Array<Issue>;
+};
+export type ExtendedElementWithIssues = Omit<ElementWithIssues, 'issues'> & {
+    issues: Signal<ElementWithIssues['issues']>;
+    accentedContainer: AccentedContainer;
+    id: number;
+};
+export {};
+//# sourceMappingURL=types.d.ts.map

package/dist/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../src/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,GAAG,MAAM,UAAU,CAAC;AAChC,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,sBAAsB,CAAC;AACnD,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,+BAA+B,CAAC;AAEvE,MAAM,MAAM,YAAY,CAAC,CAAC,IAAI,CAAC,SAAS,MAAM,GAAG;KAC9C,CAAC,IAAI,MAAM,CAAC,CAAC,CAAC,GAAI,YAAY,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;CACtC,GAAG,CAAC,CAAC;AAEN,MAAM,MAAM,QAAQ,GAAG;IACrB;;;;SAIK;IACL,IAAI,CAAC,EAAE,MAAM,CAAC;IAEd;;;;;;SAMK;IACL,OAAO,CAAC,EAAE,OAAO,CAAA;CAClB,CAAA;AAED,KAAK,cAAc,GAAG;IACpB;;SAEK;IACL,kBAAkB,EAAE,KAAK,CAAC,iBAAiB,CAAC,CAAC;IAE7C;;SAEK;IACL,YAAY,EAAE,MAAM,CAAA;CACrB,CAAA;AAED,MAAM,MAAM,QAAQ,GAAG,CAAC,MAAM,EAAE,cAAc,KAAK,IAAI,CAAC;AAExD,MAAM,MAAM,eAAe,GAAG;IAE5B;;;;;;;;OAQG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IAEd;;;;SAIK;IACL,eAAe,CAAC,EAAE,OAAO,CAAC;IAE1B;;SAEK;IACL,QAAQ,CAAC,EAAE,QAAQ,CAAC;IAEpB;;;;SAIK;IACL,QAAQ,CAAC,EAAE,QAAQ,CAAA;CACpB,CAAC;AAEF;;;GAGG;AACH,MAAM,MAAM,eAAe,GAAG,MAAM,IAAI,CAAC;AAEzC,MAAM,MAAM,KAAK,GAAG;IAClB,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,EAAE,MAAM,CAAC;IACpB,GAAG,EAAE,MAAM,CAAC;IACZ,MAAM,EAAE,GAAG,CAAC,WAAW,CAAA;CACxB,CAAC;AAEF,MAAM,MAAM,iBAAiB,GAAG;IAC9B,OAAO,EAAE,WAAW,CAAC;IACrB,MAAM,EAAE,KAAK,CAAC,KAAK,CAAC,CAAA;CACrB,CAAA;AAED,MAAM,MAAM,yBAAyB,GAAG,IAAI,CAAC,iBAAiB,EAAE,QAAQ,CAAC,GAAG;IAC1E,MAAM,EAAE,MAAM,CAAC,iBAAiB,CAAC,QAAQ,CAAC,CAAC,CAAC;IAC5C,iBAAiB,EAAE,iBAAiB,CAAC;IACrC,EAAE,EAAE,MAAM,CAAA;CACX,CAAC"}

package/dist/types.js

@@ -0,0 +1 @@
+//# sourceMappingURL=types.js.map

package/dist/types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../src/types.ts"],"names":[],"mappings":""}

package/dist/utils/are-issue-sets-equal.d.ts

@@ -0,0 +1,3 @@
+import type { Issue } from '../types';
+export default function areIssueSetsEqual(issues1: Array<Issue>, issues2: Array<Issue>): boolean;
+//# sourceMappingURL=are-issue-sets-equal.d.ts.map

package/dist/utils/are-issue-sets-equal.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"are-issue-sets-equal.d.ts","sourceRoot":"","sources":["../../src/utils/are-issue-sets-equal.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,UAAU,CAAC;AAItC,MAAM,CAAC,OAAO,UAAU,iBAAiB,CAAC,OAAO,EAAE,KAAK,CAAC,KAAK,CAAC,EAAE,OAAO,EAAE,KAAK,CAAC,KAAK,CAAC,WAKrF"}

package/dist/utils/are-issue-sets-equal.js

@@ -0,0 +1,6 @@
+const issueProps = ['id', 'title', 'description', 'url', 'impact'];
+export default function areIssueSetsEqual(issues1, issues2) {
+    return issues1.length === issues2.length &&
+        issues1.every(issue1 => Boolean(issues2.find(issue2 => issueProps.every(prop => issue2[prop] === issue1[prop]))));
+}
+//# sourceMappingURL=are-issue-sets-equal.js.map

package/dist/utils/are-issue-sets-equal.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"are-issue-sets-equal.js","sourceRoot":"","sources":["../../src/utils/are-issue-sets-equal.ts"],"names":[],"mappings":"AAEA,MAAM,UAAU,GAAuB,CAAC,IAAI,EAAE,OAAO,EAAE,aAAa,EAAE,KAAK,EAAE,QAAQ,CAAC,CAAC;AAEvF,MAAM,CAAC,OAAO,UAAU,iBAAiB,CAAC,OAAqB,EAAE,OAAqB;IACpF,OAAO,OAAO,CAAC,MAAM,KAAK,OAAO,CAAC,MAAM;QACtC,OAAO,CAAC,KAAK,CAAC,MAAM,CAAC,EAAE,CAAC,OAAO,CAAC,OAAO,CAAC,IAAI,CAAC,MAAM,CAAC,EAAE,CACpD,UAAU,CAAC,KAAK,CAAC,IAAI,CAAC,EAAE,CAAC,MAAM,CAAC,IAAI,CAAC,KAAK,MAAM,CAAC,IAAI,CAAC,CAAC,CACxD,CAAC,CAAC,CAAC;AACR,CAAC"}

package/dist/utils/deep-merge.d.ts

@@ -0,0 +1,4 @@
+type AnyObject = Record<string, any>;
+export default function deepMerge(target: AnyObject, source: AnyObject): AnyObject;
+export {};
+//# sourceMappingURL=deep-merge.d.ts.map

package/dist/utils/deep-merge.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"deep-merge.d.ts","sourceRoot":"","sources":["../../src/utils/deep-merge.ts"],"names":[],"mappings":"AAAA,KAAK,SAAS,GAAG,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;AAErC,MAAM,CAAC,OAAO,UAAU,SAAS,CAAC,MAAM,EAAE,SAAS,EAAE,MAAM,EAAE,SAAS,GAAG,SAAS,CAejF"}

package/dist/utils/deep-merge.js

@@ -0,0 +1,18 @@
+export default function deepMerge(target, source) {
+    const output = { ...target };
+    for (const key of Object.keys(source)) {
+        if (typeof source[key] === 'object' && source[key] !== null) {
+            if (!(key in target)) {
+                output[key] = source[key];
+            }
+            else {
+                output[key] = deepMerge(target[key], source[key]);
+            }
+        }
+        else {
+            output[key] = source[key];
+        }
+    }
+    return output;
+}
+//# sourceMappingURL=deep-merge.js.map

package/dist/utils/deep-merge.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"deep-merge.js","sourceRoot":"","sources":["../../src/utils/deep-merge.ts"],"names":[],"mappings":"AAEA,MAAM,CAAC,OAAO,UAAU,SAAS,CAAC,MAAiB,EAAE,MAAiB;IACpE,MAAM,MAAM,GAAG,EAAC,GAAG,MAAM,EAAC,CAAC;IAC3B,KAAK,MAAM,GAAG,IAAI,MAAM,CAAC,IAAI,CAAC,MAAM,CAAC,EAAE,CAAC;QACtC,IAAI,OAAO,MAAM,CAAC,GAAG,CAAC,KAAK,QAAQ,IAAI,MAAM,CAAC,GAAG,CAAC,KAAK,IAAI,EAAE,CAAC;YAC5D,IAAI,CAAC,CAAC,GAAG,IAAI,MAAM,CAAC,EAAE,CAAC;gBACrB,MAAM,CAAC,GAAG,CAAC,GAAG,MAAM,CAAC,GAAG,CAAC,CAAC;YAC5B,CAAC;iBAAM,CAAC;gBACN,MAAM,CAAC,GAAG,CAAC,GAAG,SAAS,CAAC,MAAM,CAAC,GAAG,CAAC,EAAE,MAAM,CAAC,GAAG,CAAC,CAAC,CAAC;YACpD,CAAC;QACH,CAAC;aACI,CAAC;YACJ,MAAM,CAAC,GAAG,CAAC,GAAG,MAAM,CAAC,GAAG,CAAC,CAAC;QAC5B,CAAC;IACH,CAAC;IACD,OAAO,MAAM,CAAC;AAChB,CAAC"}

package/dist/utils/transform-violations.d.ts

@@ -0,0 +1,4 @@
+import type { AxeResults } from 'axe-core';
+import type { ElementWithIssues } from '../types';
+export default function transformViolations(violations: typeof AxeResults.violations): ElementWithIssues[];
+//# sourceMappingURL=transform-violations.d.ts.map

package/dist/utils/transform-violations.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"transform-violations.d.ts","sourceRoot":"","sources":["../../src/utils/transform-violations.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,UAAU,CAAC;AAC3C,OAAO,KAAK,EAAS,iBAAiB,EAAE,MAAM,UAAU,CAAC;AAEzD,MAAM,CAAC,OAAO,UAAU,mBAAmB,CAAC,UAAU,EAAE,OAAO,UAAU,CAAC,UAAU,uBAyCnF"}

package/dist/utils/transform-violations.js

@@ -0,0 +1,39 @@
+export default function transformViolations(violations) {
+    const elementsWithIssues = [];
+    for (const violation of violations) {
+        for (const node of violation.nodes) {
+            const { element, target } = node;
+            // Although axe-core can perform iframe scanning, I haven't succeeded in it,
+            // and the docs suggest that the axe-core script should be explicitly included
+            // in each of the iframed documents anyway.
+            // It seems preferable to disallow iframe scanning and not report issues in elements within iframes
+            // in the case that such issues are for some reason reported by axe-core.
+            // A consumer of Accented can instead scan the iframed document by calling Accented initialization from that document.
+            const isInIframe = target.length > 1;
+            // Highlighting elements in shadow DOM is not yet supported, see https://github.com/pomerantsev/accented/issues/25
+            // Until then, we don’t want such elements to be added to the set.
+            const isInShadowDOM = Array.isArray(target[0]);
+            if (element && !isInIframe && !isInShadowDOM) {
+                const issue = {
+                    id: violation.id,
+                    title: violation.help,
+                    description: node.failureSummary ?? violation.description,
+                    url: violation.helpUrl,
+                    impact: violation.impact ?? null
+                };
+                const existingElementIndex = elementsWithIssues.findIndex(elementWithIssues => elementWithIssues.element === element);
+                if (existingElementIndex === -1) {
+                    elementsWithIssues.push({
+                        element,
+                        issues: [issue]
+                    });
+                }
+                else {
+                    elementsWithIssues[existingElementIndex].issues.push(issue);
+                }
+            }
+        }
+    }
+    return elementsWithIssues;
+}
+//# sourceMappingURL=transform-violations.js.map

package/dist/utils/transform-violations.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"transform-violations.js","sourceRoot":"","sources":["../../src/utils/transform-violations.ts"],"names":[],"mappings":"AAGA,MAAM,CAAC,OAAO,UAAU,mBAAmB,CAAC,UAAwC;IAClF,MAAM,kBAAkB,GAA6B,EAAE,CAAC;IAExD,KAAK,MAAM,SAAS,IAAI,UAAU,EAAE,CAAC;QACnC,KAAK,MAAM,IAAI,IAAI,SAAS,CAAC,KAAK,EAAE,CAAC;YACnC,MAAM,EAAE,OAAO,EAAE,MAAM,EAAE,GAAG,IAAI,CAAC;YAEjC,4EAA4E;YAC5E,8EAA8E;YAC9E,2CAA2C;YAC3C,mGAAmG;YACnG,yEAAyE;YACzE,sHAAsH;YACtH,MAAM,UAAU,GAAG,MAAM,CAAC,MAAM,GAAG,CAAC,CAAC;YAErC,kHAAkH;YAClH,kEAAkE;YAClE,MAAM,aAAa,GAAG,KAAK,CAAC,OAAO,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC;YAE/C,IAAI,OAAO,IAAI,CAAC,UAAU,IAAI,CAAC,aAAa,EAAE,CAAC;gBAC7C,MAAM,KAAK,GAAU;oBACnB,EAAE,EAAE,SAAS,CAAC,EAAE;oBAChB,KAAK,EAAE,SAAS,CAAC,IAAI;oBACrB,WAAW,EAAE,IAAI,CAAC,cAAc,IAAI,SAAS,CAAC,WAAW;oBACzD,GAAG,EAAE,SAAS,CAAC,OAAO;oBACtB,MAAM,EAAE,SAAS,CAAC,MAAM,IAAI,IAAI;iBACjC,CAAC;gBACF,MAAM,oBAAoB,GAAG,kBAAkB,CAAC,SAAS,CAAC,iBAAiB,CAAC,EAAE,CAAC,iBAAiB,CAAC,OAAO,KAAK,OAAO,CAAC,CAAC;gBACtH,IAAI,oBAAoB,KAAK,CAAC,CAAC,EAAE,CAAC;oBAChC,kBAAkB,CAAC,IAAI,CAAC;wBACtB,OAAO;wBACP,MAAM,EAAE,CAAC,KAAK,CAAC;qBAChB,CAAC,CAAC;gBACL,CAAC;qBAAM,CAAC;oBACN,kBAAkB,CAAC,oBAAoB,CAAE,CAAC,MAAM,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;gBAC/D,CAAC;YACH,CAAC;QACH,CAAC;IACH,CAAC;IAED,OAAO,kBAAkB,CAAC;AAC5B,CAAC"}

package/dist/utils/update-elements-with-issues.d.ts

@@ -0,0 +1,5 @@
+import type { AxeResults } from 'axe-core';
+import type { Signal } from '@preact/signals-core';
+import type { ExtendedElementWithIssues } from '../types';
+export default function updateElementsWithIssues(extendedElementsWithIssues: Signal<Array<ExtendedElementWithIssues>>, violations: typeof AxeResults.violations, win: Window, name: string): void;
+//# sourceMappingURL=update-elements-with-issues.d.ts.map

package/dist/utils/update-elements-with-issues.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"update-elements-with-issues.d.ts","sourceRoot":"","sources":["../../src/utils/update-elements-with-issues.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,UAAU,CAAC;AAC3C,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,sBAAsB,CAAC;AAEnD,OAAO,KAAK,EAAE,yBAAyB,EAAE,MAAM,UAAU,CAAC;AAO1D,MAAM,CAAC,OAAO,UAAU,wBAAwB,CAAC,0BAA0B,EAAE,MAAM,CAAC,KAAK,CAAC,yBAAyB,CAAC,CAAC,EAAE,UAAU,EAAE,OAAO,UAAU,CAAC,UAAU,EAAE,GAAG,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,QA4CzL"}

package/dist/utils/update-elements-with-issues.js

@@ -0,0 +1,46 @@
+import { batch, signal } from '@preact/signals-core';
+import transformViolations from './transform-violations.js';
+import areIssueSetsEqual from './are-issue-sets-equal.js';
+let count = 0;
+export default function updateElementsWithIssues(extendedElementsWithIssues, violations, win, name) {
+    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.map(addedElementWithIssues => {
+                const id = count++;
+                const accentedContainer = win.document.createElement(`${name}-container`);
+                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
+                };
+            }));
+        }
+    });
+}
+//# sourceMappingURL=update-elements-with-issues.js.map

package/dist/utils/update-elements-with-issues.js.map

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

package/package.json

@@ -0,0 +1,38 @@
+{
+  "name": "accented",
+  "version": "0.0.0-20250124142030",
+  "description": "Continuous accessibility testing and issue highlighting for web development",
+  "type": "module",
+  "main": "dist/accented.js",
+  "files": [
+    "dist",
+    "src"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/pomerantsev/accented.git"
+  },
+  "keywords": [
+    "accessibility",
+    "a11y",
+    "axe",
+    "axe-core"
+  ],
+  "author": "Pavel Pomerantsev",
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/pomerantsev/accented/issues"
+  },
+  "homepage": "https://github.com/pomerantsev/accented#readme",
+  "dependencies": {
+    "@preact/signals-core": "^1.8.0",
+    "axe-core": "^4.10.2"
+  },
+  "scripts": {
+    "build": "tsc",
+    "checkBuiltFiles": "node --import tsx ./scripts/check-built-files.ts",
+    "checkImportsInBuiltFiles": "node ./dist/accented.js",
+    "watch": "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.js';
+
+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,99 @@
+
+import createDomUpdater from './dom-updater.js';
+import createLogger from './logger.js';
+import createScanner from './scanner.js';
+import { enabled, extendedElementsWithIssues } from './state.js';
+import deepMerge from './utils/deep-merge.js';
+import getAccentedContainer from './elements/accented-container.js'
+import type { DeepRequired, AccentedOptions, DisableAccented } from './types';
+
+export type { AccentedOptions, DisableAccented };
+
+// 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: DeepRequired<AccentedOptions> = {
+  name: 'accented',
+  outputToConsole: true,
+  throttle: {
+    wait: 1000,
+    leading: true
+  },
+  callback: () => {}
+};
+
+/**
+ * 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({
+ *   outputToConsole: 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 {
+
+  // Argument validation
+  if (options.throttle !== undefined) {
+    if (typeof options.throttle !== 'object' || options.throttle === null) {
+      throw new TypeError(`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(`Invalid argument: \`throttle.wait\` option must be a non-negative number if provided. It’s currently set to ${options.throttle.wait}.`);
+    }
+    if (options.callback !== undefined && typeof options.callback !== 'function') {
+      throw new TypeError(`Invalid argument: \`callback\` option must be a function if provided. It’s currently set to ${options.callback}.`);
+    }
+  }
+
+  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 {name, outputToConsole, throttle, callback} = deepMerge(defaultOptions, options);
+
+  const AccentedContainer = getAccentedContainer(name);
+  if (!customElements.get(`${name}-container`)) {
+    customElements.define(`${name}-container`, AccentedContainer);
+  }
+
+  if (enabled.value) {
+    // TODO: add link to relevant docs
+    console.warn(
+      'You are trying to run the Accented library more than once. ' +
+      'This will likely lead to errors.'
+    );
+    console.trace();
+  }
+
+  enabled.value = true;
+  const cleanupScanner = createScanner(name, throttle, callback);
+  const cleanupDomUpdater = createDomUpdater(name);
+  const cleanupLogger = outputToConsole ? createLogger() : () => {};
+
+  return () => {
+    enabled.value = false;
+    extendedElementsWithIssues.value = [];
+    cleanupScanner();
+    cleanupDomUpdater();
+    cleanupLogger();
+  };
+}

package/src/dom-updater.ts

@@ -0,0 +1,104 @@
+import { effect } from '@preact/signals-core';
+import { extendedElementsWithIssues } from './state.js';
+import type { ExtendedElementWithIssues } from './types';
+
+export default function createDomUpdater(name: string) {
+  const attrName = `data-${name}`;
+
+  function supportsAnchorPositioning () {
+    return CSS.supports('anchor-name: --foo') && CSS.supports('position-anchor: --foo');
+  }
+
+  function setAnchorName (element: HTMLElement, id: number) {
+    const anchorNameValue = element.style.getPropertyValue('anchor-name') || window.getComputedStyle(element).getPropertyValue('anchor-name');
+    const anchorNames = anchorNameValue
+      .split(/,\s*/)
+      .filter(anchorName => anchorName.startsWith('--'));
+    if (anchorNames.length > 0) {
+      element.style.setProperty('anchor-name', `${anchorNameValue}, --${name}-anchor-${id}`);
+    } else {
+      element.style.setProperty('anchor-name', `--${name}-anchor-${id}`);
+    }
+  }
+
+  function removeAnchorName (element: HTMLElement, id: number) {
+    const anchorNameValue = element.style.getPropertyValue('anchor-name');
+    const anchorNames = anchorNameValue
+      .split(/,\s*/)
+      .filter(anchorName => anchorName.startsWith('--'));
+    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: Array<ExtendedElementWithIssues>) {
+    const displayAccentedContainers = supportsAnchorPositioning();
+    for (const elementWithIssues of extendedElementsWithIssues) {
+      elementWithIssues.element.setAttribute(attrName, elementWithIssues.id.toString());
+      if (displayAccentedContainers) {
+        setAnchorName(elementWithIssues.element, elementWithIssues.id);
+        if (elementWithIssues.element.parentElement) {
+          elementWithIssues.element.insertAdjacentElement('afterend', elementWithIssues.accentedContainer);
+        } else {
+          elementWithIssues.element.insertAdjacentElement('beforeend', elementWithIssues.accentedContainer);
+        }
+      }
+    }
+  }
+
+  function removeIssues (extendedElementsWithIssues: Array<ExtendedElementWithIssues>) {
+    for (const elementWithIssues of extendedElementsWithIssues) {
+      elementWithIssues.element.removeAttribute(attrName);
+      removeAnchorName(elementWithIssues.element, elementWithIssues.id);
+      elementWithIssues.accentedContainer.remove();
+    }
+  }
+
+  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-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> = [];
+
+  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();
+  };
+}