accented 0.0.1-dev.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) Pavel Pomerantsev
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,23 @@
+# 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/package.json

@@ -0,0 +1,29 @@
+{
+  "name": "accented",
+  "version": "0.0.1-dev.0",
+  "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"
+  },
+  "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": {
+    "axe-core": "^4.10.2"
+  }
+}

package/src/accented.js

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

@@ -0,0 +1,37 @@
+// 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();
+  }
+}