feat(plugin): add aria-* visualizer plugin

jdan · Mar 21, 2019 · 2582da9 · 2582da9
1 parent 0876b3f
commit 2582da9
Show file tree

Hide file tree

Showing 8 changed files with 108 additions and 15 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/plugins/aria-visualizer/index.js b/plugins/aria-visualizer/index.js
@@ -0,0 +1,50 @@
+/**
+ * Allows users to see what screen readers would see.
+ */
+
+let Plugin = require("../base");
+
+// 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,
+};
+
+require("./style.less");
+
+class AriaVisualizer extends Plugin {
+    constructor(...args) {
+      const options = Object.assign({}, args, { panel: PANEL_OPTIONS });
+
+      super(options);
+    }
+
+    getTitle() {
+        return "aria-* Visualizer";
+    }
+
+    getDescription() {
+        return "See the effects of your aria-* attributes";
+    }
+
+    run() {
+        // pop up our info panel to let the user know what we're doing
+        this.summary("Visualizing aria-*");
+        this.panel.render();
+
+        [...document.querySelectorAll("[aria-hidden=\"true\"]:not(.tota11y)")].forEach((element) => {
+          if (!element.closest(".tota11y")) {
+            element.classList.add("tota11y-aria-hidden-visualized");
+          }
+        });
+    }
+
+    cleanup() {
+        [...document.querySelectorAll(".tota11y-aria-hidden-visualized")].forEach((element) => {
+          element.classList.remove("tota11y-aria-hidden-visualized");
+        });
+    }
+}
+
+module.exports = AriaVisualizer;
diff --git a/plugins/aria-visualizer/style.less b/plugins/aria-visualizer/style.less
@@ -0,0 +1,5 @@
+@import "../../less/variables.less";
+
+.tota11y-aria-hidden-visualized {
+  visibility: hidden !important;
+}
diff --git a/plugins/base.js b/plugins/base.js
@@ -14,8 +14,8 @@ let InfoPanel = require("./shared/info-panel");
 require("./style.less");
 
 class Plugin {
-    constructor() {
-        this.panel = new InfoPanel(this);
+    constructor(options = {}) {
+        this.panel = new InfoPanel(this, options.panel);
         this.$checkbox = null;
     }
 

diff --git a/plugins/index.js b/plugins/index.js
@@ -11,6 +11,7 @@ let LabelsPlugin = require("./labels");
 let LandmarksPlugin = require("./landmarks");
 let LinkTextPlugin = require("./link-text");
 let A11yTextWand = require("./a11y-text-wand");
+let AriaVisualizer = require('./aria-visualizer');
 
 module.exports = {
     default: [
@@ -24,5 +25,6 @@ module.exports = {
 
     experimental: [
         new A11yTextWand(),
+        new AriaVisualizer(),
     ],
 };
diff --git a/plugins/shared/info-panel/index.js b/plugins/shared/info-panel/index.js
@@ -23,10 +23,12 @@ require("./style.less");
 const INITIAL_PANEL_MARGIN_PX = 10;
 const COLLAPSED_CLASS_NAME = "tota11y-collapsed";
 const HIDDEN_CLASS_NAME = "tota11y-info-hidden";
+const STATUS_PANEL_VIEW_CLASS_NAME = "tota11y-info-status-panel-view";
 
 class InfoPanel {
-    constructor(plugin) {
+    constructor(plugin, options = {}) {
         this.plugin = plugin;
+        this.options = options;
 
         this.about = null;
         this.summary = null;
@@ -179,6 +181,23 @@ class InfoPanel {
         });
     }
 
+    renderAnnotationCheckbox() {
+        if (!this.options.disableAnnotation) {
+            return (
+                <label className="tota11y-info-annotation-toggle">
+                    Annotate:
+                    {" "}
+                    <input
+                        className="toggle-annotation"
+                        type="checkbox"
+                        checked="checked" />
+                </label>
+            );
+        }
+
+        return null;
+    }
+
     render() {
         // Destroy the existing info panel to prevent double-renders
         if (this.$el) {
@@ -187,19 +206,18 @@ class InfoPanel {
 
         let hasContent = false;
 
+        const classNames = ["tota11y", "tota11y-info"];
+
+        if (this.options.statusPanelView) {
+            classNames.push(STATUS_PANEL_VIEW_CLASS_NAME);
+        }
+
         this.$el = (
-            <div className="tota11y tota11y-info" tabindex="-1">
+            <div className={classNames.join(" ")} tabindex="-1">
                 <header className="tota11y-info-title">
                     {this.plugin.getTitle()}
                     <span className="tota11y-info-controls">
-                        <label className="tota11y-info-annotation-toggle">
-                            Annotate:
-                            {" "}
-                            <input
-                                className="toggle-annotation"
-                                type="checkbox"
-                                checked="checked" />
-                        </label>
+                        {this.renderAnnotationCheckbox()}
                         <a aria-label="Close info panel"
                            href="#"
                            className="tota11y-info-dismiss-trigger">

diff --git a/plugins/shared/info-panel/style.less b/plugins/shared/info-panel/style.less
@@ -3,6 +3,8 @@
 @panelBodyWidth: 400px;
 @panelBodyHeight: 270px;
 
+@statusPanelHeight: 35px;
+
 @tabHoverColor: #555;
 @tabActiveColor: @white;
 
@@ -86,12 +88,20 @@
         &.active &-anchor-text {
             color: @darkGray;
         }
+
+        .tota11y-info-status-panel-view & {
+            display: none;
+        }
     }
 
     &-sections {
         position: relative;
         height: @panelBodyHeight;
         width: @panelBodyWidth;
+
+        .tota11y-info-status-panel-view & {
+            height: @statusPanelHeight;
+        }
     }
 
     &-section {
@@ -109,6 +119,10 @@
         &.active {
             display: block;
         }
+
+        .tota11y-info-status-panel-view & {
+            overflow: hidden;
+        }
     }
 
     &-errors {

diff --git a/test/index.html b/test/index.html
@@ -60,6 +60,12 @@ <h1>Hello, world!</h1>
 
             <p><a class="btn btn-primary btn-lg btn-success" href="#" role="button">Continue</a></p>
 
+            <article id="article">
+                <p>This paragraph is visible.</p>
+                <p id="p-with-hidden">This paragraph has a <span id="span" aria-hidden="true">hidden</span> span.</p>
+                <p id="hidden-p" aria-hidden="true">This paragraph is hidden.</p>
+            </article>
+
             <p>
                 <img width="40px" height="40px" src="http://s.gravatar.com/avatar/3517596df161030c3779c532f7844383?s=256" alt="jordan">
                 <img width="40px" height="40px" src="http://s.gravatar.com/avatar/3517596df161030c3779c532f7844383?s=256" alt="">