Merge pull request #57 from Khan/magic-wand

Add magic wand feature.

plugins/a11y-text-wand/index.js

@@ -0,0 +1,51 @@
+/**
+ * Allows users to see what screen readers would see.
+ */
+
+let $ = require("jquery");
+let Plugin = require("../base");
+
+require("./style.less");
+
+class A11yTextWand extends Plugin {
+    getTitle() {
+        return "Screen Reader Wand";
+    }
+
+    getDescription() {
+        return "Hover over elements to view them as a screen reader would";
+    }
+
+    run() {
+        // HACK(jordan): We provide a fake summary to force the info panel to
+        //     render.
+        this.summary(" ");
+        this.panel.render();
+
+        $(document).on("mousemove.wand", function(e) {
+            let element = document.elementFromPoint(e.clientX, e.clientY);
+
+            let textAlternative = $.axs.properties.findTextAlternatives(
+                element, {});
+
+            $(".tota11y-outlined").removeClass("tota11y-outlined");
+            $(element).addClass("tota11y-outlined");
+
+            if (!textAlternative) {
+                $(".tota11y-info-section.active").html(
+                    <i className="tota11y-nothingness">
+                        No text visible to a screen reader
+                    </i>
+                );
+            } else {
+                $(".tota11y-info-section.active").text(textAlternative);
+            }
+        });
+    }
+
+    cleanup() {
+        $(document).off("mousemove.wand");
+    }
+}
+
+module.exports = A11yTextWand;

plugins/a11y-text-wand/style.less

@@ -0,0 +1,9 @@
+@import "../../less/variables.less";
+
+.tota11y-outlined {
+	outline: 2px solid fadein(@highlightColor, 100%);
+}
+
+.tota11y-nothingness {
+	color: #888;
+}

plugins/index.js

@@ -10,6 +10,7 @@ let HeadingsPlugin = require("./headings");
 let LabelsPlugin = require("./labels");
 let LandmarksPlugin = require("./landmarks");
 let LinkTextPlugin = require("./link-text");
+let A11yTextWand = require("./a11y-text-wand");
 
 module.exports = {
     default: [
@@ -21,5 +22,7 @@ module.exports = {
         new LandmarksPlugin(),
     ],
 
-    experimental: [],
+    experimental: [
+        new A11yTextWand(),
+    ],
 };

plugins/shared/info-panel/style.less

@@ -96,7 +96,7 @@
     &-section {
         .position(absolute, 0, 0, 0, 0);
 
-        & * {
+        &, * {
             color: @darkGray;
         }
 

plugins/shared/info-panel/template.handlebars

@@ -6,7 +6,9 @@
                 Annotate:
                 <input class="toggle-annotation" type="checkbox" checked>
             </label>
-            <a href="#" class="tota11y-info-dismiss-trigger">&times;</a>
+            <a aria-label="Close this window" href="#" class="tota11y-info-dismiss-trigger">
+                &times;
+            </a>
         </span>
     </header>
     <div class="tota11y-info-body">