Run auditor on mutation events

- Re-run the audit when the DOM changes (via AJAX, or websockets, for
  example).
- Treat the console message as a warning rather than a log message.
- Reference the actual DOM node in the console warning, which makes it
  highlightable and clickable in developer tools.
- Does not rerun on visibility changes (yet).

Author: Cameron Cundiff

README.md

@@ -20,6 +20,9 @@ run in the background automatically. If there are any accessibility issues on
 that page, accesslint.js will log the error to the console, and post to a server
 endpoint that you can optionally configure.
 
+The audit will run once on page load, and **again for each DOM change event.**
+This feature gives you feedback on new content introduced via AJAX, for example.
+
 accesslint.js runs assertions from the
 [aXe-core](https://github.com/dequelabs/axe-core) accessibility library wherever
 you include the script. It the logs the violations the browser's Javascript

src/auditor.js

@@ -1,14 +1,14 @@
 import { axe } from "axe-core/axe.min.js";
 import report from "./reporter";
 
-export default function () {
+export default function(target) {
   const options = {
     "rules": {
       "color-contrast": { enabled: false },
     }
   };
 
-  window.axe.a11yCheck(document, options, (results) => {
+  window.axe.a11yCheck(target.parentNode, options, (results) => {
     report(results);
   });
 }

src/index.js

@@ -3,8 +3,22 @@ import auditor from "./auditor.js";
 (function() {
   var load = function() {
     window.removeEventListener("load", load, false);
-    auditor();
+    auditor(document);
+  };
+
+  var observer = new MutationObserver(function(mutations) {
+    mutations.forEach(function(mutation) {
+      auditor(mutation.target);
+    });
+  });
+
+  var config = {
+    attributes: true,
+    childList: true,
+    characterData: true,
+    subtree: true
   };
 
   window.addEventListener("load", load);
+  observer.observe(document, config);
 })();

src/reporter.js

@@ -2,21 +2,15 @@ import request from "browser-request";
 
 const url = "/access_lint/errors";
 
-export default function (message) {
+export default function(message) {
   var violations = message.violations.map(function(violation) {
     return {
       description: violation.description,
       help: violation.help,
-      helpUrl: violation.helpUrl,
-      id: violation.id,
       impact: violation.impact,
       nodes: violation.nodes.map(function(n) {
-        return {
-          target: n.target,
-          html: n.html
-        };
+        return document.querySelectorAll(n.target);
       }),
-      tags: violation.tags
     };
   });
 
@@ -31,7 +25,7 @@ export default function (message) {
         }
       }
     }, function() {});
-  }
 
-  console.log("AccessLint warnings: ", violations);
+    console.warn(violations);
+  }
 }