feat(plugin): update AriaVisualizer to support role annotations

jdan · May 19, 2019 · a7a728a · a7a728a
1 parent dcec425
commit a7a728a
Show file tree

Hide file tree

Showing 2 changed files with 81 additions and 16 deletions.
diff --git a/plugins/aria-visualizer/index.js b/plugins/aria-visualizer/index.js
@@ -4,45 +4,99 @@
 
 let Plugin = require("../base");
 
+let annotate = require("../shared/annotate")("roles");
+
 // this will let us get a shorter info panel that just
 // lets the user know we are tracking their focus
 const PANEL_OPTIONS = {
-  statusPanelView: true,
-  disableAnnotation: true,
+  statusPanelView: true
 };
 
+const ATTRIBUTES = [
+    "role",
+    "aria-hidden"
+];
+
 require("./style.less");
 
+const formatAttributeForMethodName = (attribute) => {
+    return attribute.split("-").map(part => `${part[0].toUpperCase()}${part.substr(1)}`).join("");
+}
+
 class AriaVisualizer extends Plugin {
     constructor(...args) {
-      const options = Object.assign({}, args, { panel: PANEL_OPTIONS });
+        const options = Object.assign({}, args, { panel: PANEL_OPTIONS });
+
+        super(options);
+
+        this.ariaAttributes = ATTRIBUTES.reduce((functionMap, attribute) => {
+            const methodSuffix = formatAttributeForMethodName(attribute);
 
-      super(options);
+            functionMap[attribute] = {
+                enable: this[`start${methodSuffix}`],
+                disable: this[`stop${methodSuffix}`]
+            };
+
+            return functionMap;
+        }, {});
     }
 
     getTitle() {
         return "aria-* Visualizer";
     }
 
     getDescription() {
-        return "See the effects of your aria-* attributes";
+        return "See the effects of your aria-* and other a11y attributes";
+    }
+
+    startAriaHidden(attribute) {
+        const ariaName = `aria-${attribute}`;
+
+        [...document.querySelectorAll(`[${ariaName}="true"]:not(.tota11y)`)].forEach((element) => {
+            if (!element.closest(".tota11y")) {
+                element.classList.add(`tota11y-${ariaName}-visualized`);
+            }
+        });
+    }
+
+    stopAriaHidden(attribute) {
+        const ariaName = `aria-${attribute}`;
+
+        const className = `tota11y-${ariaName}-visualized`;
+
+        [...document.querySelectorAll(`.${className}`)].forEach((element) => {
+            element.classList.remove(className);
+        });
+    }
+
+    startRole(attribute) {
+        [...document.querySelectorAll(`[${attribute}]:not(.tota11y)`)].forEach((element) => {
+            if (!element.closest(".tota11y")) {
+                annotate.label(
+                    element,
+                    `role: ${element.getAttribute("role")}`
+                );
+            }
+        });
+    }
+
+    stopRole() {
+        annotate.removeAll();
     }
 
     run() {
         // pop up our info panel to let the user know what we're doing
-        this.summary("Visualizing aria-*");
+        this.summary("Visualizing a11y attributes");
         this.panel.render();
 
-        [...document.querySelectorAll("[aria-hidden=\"true\"]:not(.tota11y)")].forEach((element) => {
-          if (!element.closest(".tota11y")) {
-            element.classList.add("tota11y-aria-hidden-visualized");
-          }
+        Object.keys(this.ariaAttributes).forEach((property) => {
+            this.ariaAttributes[property].enable(property);
         });
     }
 
     cleanup() {
-        [...document.querySelectorAll(".tota11y-aria-hidden-visualized")].forEach((element) => {
-          element.classList.remove("tota11y-aria-hidden-visualized");
+        Object.keys(this.ariaAttributes).forEach((property) => {
+            this.ariaAttributes[property].disable(property);
         });
     }
 }

diff --git a/plugins/shared/annotate/index.js b/plugins/shared/annotate/index.js
@@ -20,6 +20,9 @@ require("./style.less");
 // and across.
 const MIN_HIGHLIGHT_SIZE = 25;
 
+// typecast to jQuery collection in case our plugin is jquery-less
+const ensureJqueryCollection = (el) => (el instanceof $) ? el : $(el);
+
 // Polyfill fallback for IE < 10
 window.requestAnimationFrame = window.requestAnimationFrame ||
     function(callback) {
@@ -102,7 +105,9 @@ module.exports = (namespace) => {
     return {
         // Places a small label in the top left corner of a given jQuery
         // element. By default, this label contains the element's tagName.
-        label($el, text=$el.prop("tagName").toLowerCase()) {
+        label(el, text=$el.prop("tagName").toLowerCase()) {
+            const $el = ensureJqueryCollection(el);
+
             let $label = createAnnotation($el, "tota11y-label");
             return $label.html(text);
         },
@@ -115,7 +120,9 @@ module.exports = (namespace) => {
         // object will contain a "show()" method when the info panel is
         // rendered, allowing us to externally open the entry in the info
         // panel corresponding to this error.
-        errorLabel($el, text, expanded, errorEntry) {
+        errorLabel(el, text, expanded, errorEntry) {
+            const $el = ensureJqueryCollection(el);
+
             let $innerHtml = $(errorLabelTemplate({
                 text: text,
                 detail: expanded,
@@ -143,7 +150,9 @@ module.exports = (namespace) => {
 
         // Highlights a given jQuery element by placing a translucent
         // rectangle directly over it
-        highlight($el) {
+        highlight(el) {
+            const $el = ensureJqueryCollection(el);
+
             let $highlight = createAnnotation($el, "tota11y-highlight");
             return $highlight.css({
                 // include margins
@@ -154,7 +163,9 @@ module.exports = (namespace) => {
 
         // Toggles a highlight on a given jQuery element `$el` when `$trigger`
         // is hovered (mouseenter/mouseleave) or focused (focus/blur)
-        toggleHighlight($el, $trigger) {
+        toggleHighlight(el, $trigger) {
+            const $el = ensureJqueryCollection(el);
+
             let $highlight;
 
             $trigger.on("mouseenter focus", () => {