accented 0.0.1-dev.0 → 0.0.1-dev.2

package/dist/accented.d.ts

@@ -0,0 +1,6 @@
+type AccentedProps = {
+    outputToConsole?: boolean;
+};
+export default function accented(props?: 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,CAAC,EAAE,OAAO,CAAA;CAC1B,CAAC;AAMF,MAAM,CAAC,OAAO,UAAU,QAAQ,CAAC,KAAK,GAAE,aAAkB,QAuCzD"}

package/dist/accented.js

@@ -0,0 +1,39 @@
+import axe from 'axe-core';
+import TaskQueue from './task-queue';
+import DomUpdater from './dom-updater';
+import issuesToElements from './utils/issuesToElements';
+const defaultProps = {
+    outputToConsole: true
+};
+export default function accented(props = {}) {
+    const { outputToConsole } = { ...defaultProps, ...props };
+    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');
+    });
+    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;AAMxD,MAAM,YAAY,GAA4B;IAC5C,eAAe,EAAE,IAAI;CACtB,CAAC;AAEF,MAAM,CAAC,OAAO,UAAU,QAAQ,CAAC,QAAuB,EAAE;IACxD,MAAM,EAAC,eAAe,EAAC,GAAG,EAAC,GAAG,YAAY,EAAE,GAAG,KAAK,EAAC,CAAC;IAEtD,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,CAAC,CAAC;IAEH,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;CAqBnC"}

package/dist/dom-updater.js

@@ -0,0 +1,28 @@
+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');
+        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,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;
+    items: Set<T>;
+    idleCallbackId: number | null;
+    asyncCallback: TaskCallback | null;
+    constructor(asyncCallback: TaskCallback);
+    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;AAG/B,MAAM,CAAC,OAAO,OAAO,SAAS,CAAC,CAAC;;IAC9B,KAAK,SAAgB;IAErB,cAAc,EAAE,MAAM,GAAG,IAAI,CAAQ;IAErC,aAAa,EAAE,YAAY,GAAG,IAAI,CAAQ;gBAE9B,aAAa,EAAE,YAAY;IA0BvC,GAAG,CAAC,IAAI,EAAE,CAAC;CAIZ"}

package/dist/task-queue.js

@@ -0,0 +1,29 @@
+// 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();
+        if (this.asyncCallback) {
+            await this.asyncCallback();
+        }
+        this.idleCallbackId = 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,2BAA2B;AAC3B,MAAM,CAAC,OAAO,OAAO,SAAS;IAC5B,KAAK,GAAG,IAAI,GAAG,EAAK,CAAC;IAErB,cAAc,GAAkB,IAAI,CAAC;IAErC,aAAa,GAAwB,IAAI,CAAC;IAE1C,YAAY,aAA2B;QACrC,IAAI,CAAC,aAAa,GAAG,aAAa,CAAC;IACrC,CAAC;IAED,oCAAoC;IAEpC,YAAY;QACV,IAAI,IAAI,CAAC,cAAc,KAAK,IAAI,IAAI,IAAI,CAAC,KAAK,CAAC,IAAI,KAAK,CAAC,EAAE,CAAC;YAC1D,OAAO;QACT,CAAC;QAED,IAAI,CAAC,cAAc,GAAG,mBAAmB,CAAC,GAAG,EAAE,CAAC,IAAI,CAAC,IAAI,EAAE,CAAC,CAAC;IAC/D,CAAC;IAED,KAAK,CAAC,IAAI;QACR,IAAI,CAAC,KAAK,CAAC,KAAK,EAAE,CAAC;QAEnB,IAAI,IAAI,CAAC,aAAa,EAAE,CAAC;YACvB,MAAM,IAAI,CAAC,aAAa,EAAE,CAAC;QAC7B,CAAC;QAED,IAAI,CAAC,cAAc,GAAG,IAAI,CAAC;QAE3B,IAAI,CAAC,YAAY,EAAE,CAAC;IACtB,CAAC;IAED,GAAG,CAAC,IAAO;QACT,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,IAAI,CAAC,CAAC;QACrB,IAAI,CAAC,YAAY,EAAE,CAAC;IACtB,CAAC;CACF"}

package/dist/utils/issuesToElements.d.ts

@@ -0,0 +1,3 @@
+import { 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,EAAE,UAAU,EAAE,MAAM,UAAU,CAAC;AAEtC,MAAM,CAAC,OAAO,UAAU,gBAAgB,CAAC,MAAM,EAAE,OAAO,UAAU,CAAC,UAAU,aAgB5E"}

package/dist/utils/issuesToElements.js

@@ -0,0 +1,17 @@
+import { AxeResults } from 'axe-core';
+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":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,UAAU,CAAC;AAEtC,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/package.json

@@ -1,12 +1,11 @@
 {
   "name": "accented",
-  "version": "0.0.1-dev.0",
+  "version": "0.0.1-dev.2",
   "description": "Continuous accessibility testing and issue highlighting for web development",
-  "main": "src/accented.js",
-  "files": ["src"],
-  "scripts": {
-    "test": "echo \"Error: no test specified\" && exit 1"
-  },
+  "main": "dist/accented.js",
+  "files": [
+    "dist"
+  ],
   "repository": {
     "type": "git",
     "url": "git+https://github.com/pomerantsev/accented.git"
@@ -25,5 +24,10 @@
   "homepage": "https://github.com/pomerantsev/accented#readme",
   "dependencies": {
     "axe-core": "^4.10.2"
+  },
+  "scripts": {
+    "build": "tsc",
+    "watch": "tsc --watch",
+    "test": "echo \"Error: no test specified\" && exit 1"
   }
-}
+}

package/README.md

@@ -1,23 +0,0 @@
-# Accented
-
-Continuous accessibility testing and issue highlighting for web development
-
-This is a work in progress.
-
-## High-level
-
-* Uses axe-core.
-
-## Running locally
-
-* `npx http-server`
-
-## Usage notes
-
-* On a page with many elements, axe-core may be slow. We may deal with this in two ways:
-  * First, we'll ensure that we only scan the elements that changed.
-  * Second, we'll see if it's possible to modify axe-core so it yields execution at certain intervals.
-
-## Development notes
-
-* Placeholder favicon generated with https://favicon.io/favicon-generator/. I immediately forgot what the font was, but I won't relese this like this anyway.

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();
-  }
-}