accented 0.0.1-dev.1 → 0.0.1-dev.3

package/dist/accented.d.ts

@@ -0,0 +1,8 @@
+type AccentedProps = {
+    outputToConsole: boolean;
+    initialDelay: number;
+    throttleDelay: number;
+};
+export default function accented(props?: Partial<AccentedProps>): void;
+export {};
+//# sourceMappingURL=accented.d.ts.map

package/dist/accented.d.ts.map

@@ -0,0 +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"}

package/dist/accented.js

@@ -0,0 +1,46 @@
+import axe from 'axe-core';
+import TaskQueue from './task-queue';
+import DomUpdater from './dom-updater';
+import issuesToElements from './utils/issuesToElements';
+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);
+        }
+        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);
+        }
+    });
+    // TODO: read more about the params and decide which ones we need.
+    mutationObserver.observe(document, {
+        subtree: true,
+        childList: true,
+        attributes: true
+    });
+}
+//# sourceMappingURL=accented.js.map

package/dist/accented.js.map

@@ -0,0 +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"}

package/dist/dom-updater.d.ts

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

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

@@ -0,0 +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"}

package/dist/dom-updater.js

@@ -0,0 +1,29 @@
+const attrName = 'data-accented';
+export default class DomUpdater {
+    elements = [];
+    constructor() {
+        this.#addStylesheetToDocument();
+    }
+    update(newElements) {
+        for (const element of this.elements) {
+            element.removeAttribute(attrName);
+        }
+        this.elements = [...newElements];
+        for (const element of this.elements) {
+            element.setAttribute(attrName, '');
+        }
+    }
+    #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 = `
+      [${attrName}]:not(:focus-visible) {
+        outline: 2px solid red !important;
+        outline-offset: -2px;
+      }
+    `;
+        document.head.appendChild(styleElement);
+    }
+}
+//# sourceMappingURL=dom-updater.js.map

package/dist/dom-updater.js.map

@@ -0,0 +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"}

package/dist/task-queue.d.ts

@@ -0,0 +1,11 @@
+type TaskCallback = () => void;
+export default class TaskQueue<T> {
+    #private;
+    constructor(asyncCallback: TaskCallback, { initialDelay, throttleDelay }?: {
+        initialDelay?: number;
+        throttleDelay?: number;
+    });
+    add(item: T): void;
+}
+export {};
+//# sourceMappingURL=task-queue.d.ts.map

package/dist/task-queue.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"task-queue.d.ts","sourceRoot":"","sources":["../src/task-queue.ts"],"names":[],"mappings":"AAAA,KAAK,YAAY,GAAG,MAAM,IAAI,CAAC;AAE/B,MAAM,CAAC,OAAO,OAAO,SAAS,CAAC,CAAC;;gBAalB,aAAa,EAAE,YAAY,EAAE,EAAC,YAAY,EAAE,aAAa,EAAC,GAAE;QAAC,YAAY,CAAC,EAAE,MAAM,CAAC;QAAC,aAAa,CAAC,EAAE,MAAM,CAAA;KAAM;IA+B5H,GAAG,CAAC,IAAI,EAAE,CAAC;CAIZ"}

package/dist/task-queue.js

@@ -0,0 +1,40 @@
+export default class TaskQueue {
+    #items = new Set();
+    #runningOrScheduled = false;
+    #initialDelay;
+    #throttleDelay;
+    // I'm not sure why the editor needs NodeJS.Timeout here.
+    // tsconfig.json doesn't mention that the code needs to run in Node.
+    // Maybe it's somehow related to the fact that we're using the Node test runner.
+    #timeoutId = null;
+    #asyncCallback = null;
+    constructor(asyncCallback, { initialDelay, throttleDelay } = {}) {
+        this.#asyncCallback = asyncCallback;
+        this.#initialDelay = initialDelay ?? 0;
+        this.#throttleDelay = throttleDelay ?? 1000;
+    }
+    #scheduleRun() {
+        if (this.#items.size === 0) {
+            this.#runningOrScheduled = false;
+        }
+        if (this.#timeoutId !== null || this.#items.size === 0) {
+            return;
+        }
+        const delay = this.#runningOrScheduled ? this.#throttleDelay : this.#initialDelay;
+        this.#runningOrScheduled = true;
+        this.#timeoutId = setTimeout(() => this.#run(), delay);
+    }
+    async #run() {
+        this.#items.clear();
+        if (this.#asyncCallback) {
+            await this.#asyncCallback();
+        }
+        this.#timeoutId = null;
+        this.#scheduleRun();
+    }
+    add(item) {
+        this.#items.add(item);
+        this.#scheduleRun();
+    }
+}
+//# 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":"AAEA,MAAM,CAAC,OAAO,OAAO,SAAS;IAC5B,MAAM,GAAG,IAAI,GAAG,EAAK,CAAC;IACtB,mBAAmB,GAAG,KAAK,CAAC;IAC5B,aAAa,CAAS;IACtB,cAAc,CAAS;IAEvB,yDAAyD;IACzD,oEAAoE;IACpE,gFAAgF;IAChF,UAAU,GAAmC,IAAI,CAAC;IAElD,cAAc,GAAwB,IAAI,CAAC;IAE3C,YAAY,aAA2B,EAAE,EAAC,YAAY,EAAE,aAAa,KAAqD,EAAE;QAC1H,IAAI,CAAC,cAAc,GAAG,aAAa,CAAC;QACpC,IAAI,CAAC,aAAa,GAAG,YAAY,IAAI,CAAC,CAAC;QACvC,IAAI,CAAC,cAAc,GAAG,aAAa,IAAI,IAAI,CAAC;IAC9C,CAAC;IAED,YAAY;QACV,IAAI,IAAI,CAAC,MAAM,CAAC,IAAI,KAAK,CAAC,EAAE,CAAC;YAC3B,IAAI,CAAC,mBAAmB,GAAG,KAAK,CAAC;QACnC,CAAC;QACD,IAAI,IAAI,CAAC,UAAU,KAAK,IAAI,IAAI,IAAI,CAAC,MAAM,CAAC,IAAI,KAAK,CAAC,EAAE,CAAC;YACvD,OAAO;QACT,CAAC;QAED,MAAM,KAAK,GAAG,IAAI,CAAC,mBAAmB,CAAC,CAAC,CAAC,IAAI,CAAC,cAAc,CAAC,CAAC,CAAC,IAAI,CAAC,aAAa,CAAC;QAClF,IAAI,CAAC,mBAAmB,GAAG,IAAI,CAAC;QAChC,IAAI,CAAC,UAAU,GAAG,UAAU,CAAC,GAAG,EAAE,CAAC,IAAI,CAAC,IAAI,EAAE,EAAE,KAAK,CAAC,CAAC;IACzD,CAAC;IAED,KAAK,CAAC,IAAI;QACR,IAAI,CAAC,MAAM,CAAC,KAAK,EAAE,CAAC;QAEpB,IAAI,IAAI,CAAC,cAAc,EAAE,CAAC;YACxB,MAAM,IAAI,CAAC,cAAc,EAAE,CAAC;QAC9B,CAAC;QAED,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC;QAEvB,IAAI,CAAC,YAAY,EAAE,CAAC;IACtB,CAAC;IAED,GAAG,CAAC,IAAO;QACT,IAAI,CAAC,MAAM,CAAC,GAAG,CAAC,IAAI,CAAC,CAAC;QACtB,IAAI,CAAC,YAAY,EAAE,CAAC;IACtB,CAAC;CACF"}

package/dist/utils/issuesToElements.d.ts

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

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

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

@@ -0,0 +1 @@
+{"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"}

package/dist/whatever.d.ts

@@ -0,0 +1,2 @@
+export declare const whatever = 1;
+//# sourceMappingURL=whatever.d.ts.map

package/dist/whatever.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"whatever.d.ts","sourceRoot":"","sources":["../src/whatever.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,QAAQ,IAAI,CAAC"}

package/dist/whatever.js

@@ -0,0 +1,2 @@
+export const whatever = 1;
+//# sourceMappingURL=whatever.js.map

package/dist/whatever.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"whatever.js","sourceRoot":"","sources":["../src/whatever.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,QAAQ,GAAG,CAAC,CAAC"}

package/package.json

@@ -1,10 +1,11 @@
 {
   "name": "accented",
-  "version": "0.0.1-dev.1",
+  "version": "0.0.1-dev.3",
   "description": "Continuous accessibility testing and issue highlighting for web development",
-  "main": "src/accented.js",
+  "type": "module",
+  "main": "dist/accented.js",
   "files": [
-    "src"
+    "dist"
   ],
   "repository": {
     "type": "git",
@@ -26,6 +27,8 @@
     "axe-core": "^4.10.2"
   },
   "scripts": {
-    "test": "echo \"Error: no test specified\" && exit 1"
+    "build": "tsc",
+    "watch": "tsc --watch",
+    "test": "node --test --import tsx ./**/*.test.ts"
   }
 }

package/src/accented.js

@@ -1,31 +0,0 @@
-import axe from 'axe-core';
-import TaskQueue from './task-queue.js';
-
-export default function accented() {
-  const taskQueue = new TaskQueue(async () => {
-    performance.mark('axe-start');
-
-    const result = await axe.run();
-
-    const axeMeasure = performance.measure('axe', 'axe-start');
-
-    console.log('Result:', result);
-    console.log('Axe run duration:', Math.round(axeMeasure.duration), 'ms');
-  });
-
-  taskQueue.add(document);
-
-  const mutationObserver = new MutationObserver(mutationList => {
-    // TODO: filter out irrelevant mutations
-    for (const mutationRecord of mutationList) {
-      taskQueue.add(mutationRecord.target);
-    }
-  });
-
-  // TODO: read more about the params and decide which ones we need.
-  mutationObserver.observe(document, {
-    subtree: true,
-    childList: true,
-    attributes: true
-  });
-}

package/src/task-queue.js

@@ -1,37 +0,0 @@
-// TODO: add generic typing
-export default class TaskQueue {
-  items = new Set();
-
-  idleCallbackId = null;
-
-  asyncCallback = null;
-
-  constructor(asyncCallback) {
-    this.asyncCallback = asyncCallback;
-  }
-
-  // TODO: test all the asynchronicity
-
-  #scheduleRun() {
-    if (this.idleCallbackId !== null || this.items.size === 0) {
-      return;
-    }
-
-    this.idleCallbackId = requestIdleCallback(() => this.#run());
-  }
-
-  async #run() {
-    this.items.clear();
-
-    await this.asyncCallback();
-
-    this.idleCallbackId = null;
-
-    this.#scheduleRun();
-  }
-
-  add(item) {
-    this.items.add(item);
-    this.#scheduleRun();
-  }
-}