Contrast plugin suggestion preview - Fixes #21

This adds a checkbox next to the suggested color combination which will toggle between original colors and suggested colors. In order to embed the functionality for the checkbox I had to modify all plugins to pass their descriptions as jQuery objects (with the blessing of @jdan of course). It might be worth discussing if there is a better way to represent the control for this than a checkbox; it seemed like the cleanest and simplest way to me but I can see that it might not be very intuitive, especially without a label.
jdan · Jul 22, 2015 · bf3b328 · bf3b328
1 parent c3a58c0
commit bf3b328
Show file tree

Hide file tree

Showing 10 changed files with 100 additions and 51 deletions.
diff --git a/.eslintrc b/.eslintrc
@@ -9,6 +9,7 @@
         "comma-dangle": 0,
         "no-underscore-dangle": 0,
         "quotes": [2, "double"],
+        "space-after-keywords": [2, "always"],
         "space-infix-ops": 0,
         "strict": 0
     },

diff --git a/plugins/alt-text/index.js b/plugins/alt-text/index.js
@@ -39,7 +39,7 @@ class AltTextPlugin extends Plugin {
                 annotate.label($el, "&#x2717;")
                     .addClass("tota11y-label-error");
 
-                this.error("Image is missing alt text", errorTemplate(), $el);
+                this.error("Image is missing alt text", $(errorTemplate()), $el);
             }
         });
     }

diff --git a/plugins/base.js b/plugins/base.js
@@ -44,8 +44,8 @@ class Plugin {
     }
 
     // Adds an entry to the info panel's "Errors" tab
-    error(title, description, $el) {
-        return this.panel.addError(title, description, $el);
+    error(title, $description, $el) {
+        return this.panel.addError(title, $description, $el);
     }
 
     /**

diff --git a/plugins/contrast/error-description.handlebars b/plugins/contrast/error-description.handlebars
@@ -1,33 +1,33 @@
-<p>
-    The color combination
-    <span class="tota11y-color-hexes">{{fgColorHex}}/{{bgColorHex}}</span>
-    has a contrast ratio of <strong>{{contrastRatio}}</strong>, which is not
-    sufficient. At this size, you will need a ratio of at least
-    <strong>{{requiredRatio}}</strong>.
-</p>
+<div>
+    <p>
+        The color combination
+        <span class="tota11y-color-hexes">{{fgColorHex}}/{{bgColorHex}}</span>
+        has a contrast ratio of <strong>{{contrastRatio}}</strong>, which is not
+        sufficient. At this size, you will need a ratio of at least
+        <strong>{{requiredRatio}}</strong>.
+    </p>
 
-<p>
-    Consider using the following foreground/background combination:
-</p>
+    <p>
+        Consider using the following foreground/background combination:
+    </p>
 
-<div class="tota11y-contrast-suggestion">
-    <span class="tota11y-color-hexes">
-        {{suggestedFgColorHex}}/{{suggestedBgColorHex}}
-    </span>
-
-    <span class="tota11y-swatches">
-        <span
-            class="tota11y-swatch"
-            style="background-color: {{suggestedFgColorHex}}">
-        </span>
-        /
-        <span
-            class="tota11y-swatch"
-            style="background-color: {{suggestedBgColorHex}}">
+    <div class="tota11y-contrast-suggestion">
+        <span class="tota11y-color-hexes">
+            {{suggestedFgColorHex}}/{{suggestedBgColorHex}}
         </span>
-    </span>
 
-    has a ratio of
+        <span class="tota11y-swatches">
+            <span
+                class="tota11y-swatch"
+                style="background-color: {{suggestedFgColorHex}}">
+            </span>
+            /
+            <span
+                class="tota11y-swatch"
+                style="background-color: {{suggestedBgColorHex}}">
+            </span>
+        </span>
 
-    <strong>{{suggestedColorsRatio}}</strong>
+        has a ratio of <strong>{{suggestedColorsRatio}}</strong> <input class="previewCb" type="checkbox">
+    </div>
 </div>
diff --git a/plugins/contrast/index.js b/plugins/contrast/index.js
@@ -39,9 +39,23 @@ class ContrastPlugin extends Plugin {
             suggestedColorsRatio: suggestedColors.contrast
         };
 
+        // Add click handler to preview checkbox.
+        let $description = $(descriptionTemplate(templateData));
+        $description.find(".previewCb").click(function() {
+            if (this.checked) {
+                // Set suggested colors.
+                $(el).css("color", suggestedColors.fg);
+                $(el).css("background-color", suggestedColors.bg);
+            } else {
+                // Set original colors.
+                $(el).css("color", axs.utils.colorToString(fgColor));
+                $(el).css("background-color", axs.utils.colorToString(bgColor));
+            }
+        });
+
         return this.error(
             titleTemplate(templateData),
-            descriptionTemplate(templateData),
+            $description,
             $(el));
     }
 
@@ -63,6 +77,10 @@ class ContrastPlugin extends Plugin {
         // entry currently present in the info panel
         let combinations = {};
 
+        // List of original colors for elements with insufficient contrast.
+        // Used to restore original colors in cleanup.
+        this.origColorsList = [];
+
         $("*").each((i, el) => {
             // Only check elements with a direct text descendant
             if (!axs.properties.hasDirectTextDescendant(el)) {
@@ -118,6 +136,13 @@ class ContrastPlugin extends Plugin {
                         {fgColor, bgColor, contrastRatio, requiredRatio},
                         el);
 
+                    // Save original color so it can be restored on cleanup.
+                    this.origColorsList.push({
+                        $el: $(el),
+                        fg: axs.utils.colorToString(fgColor),
+                        bg: axs.utils.colorToString(bgColor)
+                    });
+
                     combinations[key] = error;
                 }
 
@@ -140,6 +165,12 @@ class ContrastPlugin extends Plugin {
     }
 
     cleanup() {
+        // Set all elements to original color.
+        for (let i = 0; i < this.origColorsList.length; i++) {
+            let item = this.origColorsList[i];
+            item.$el.css("color", item.fg);
+            item.$el.css("background-color", item.bg);
+        }
         annotate.removeAll();
     }
 }

diff --git a/plugins/headings/index.js b/plugins/headings/index.js
@@ -15,10 +15,12 @@ const ERRORS = {
         return {
             title: "First heading is not an &lt;h1&gt;",
             description: `
-                To give your document a proper structure for assistive
-                technologies, it is important to lay out your headings
-                beginning with an <code>&lt;h1&gt;</code>. We found an
-                <code>&lt;h${level}&gt;</code> instead.
+                <div>
+                    To give your document a proper structure for assistive
+                    technologies, it is important to lay out your headings
+                    beginning with an <code>&lt;h1&gt;</code>. We found an
+                    <code>&lt;h${level}&gt;</code> instead.
+                </div>
             `
         };
     },
@@ -42,24 +44,27 @@ const ERRORS = {
     NONCONSECUTIVE_HEADER(prevLevel, currLevel) {
         let _tag = (level) => `<code>&lt;h${level}&gt;</code>`;
         let description = `
-            This document contains an ${_tag(currLevel)} tag directly
-            following an ${_tag(prevLevel)}. In order to maintain a consistent
-            outline of the page for assistive technologies, reduce the gap in
-            the heading level by upgrading this tag to an
-            ${_tag(prevLevel+1)}`;
+            <div>
+                This document contains an ${_tag(currLevel)} tag directly
+                following an ${_tag(prevLevel)}. In order to maintain a consistent
+                outline of the page for assistive technologies, reduce the gap in
+                the heading level by upgrading this tag to an
+                ${_tag(prevLevel+1)}`;
 
         // Suggest upgrading the tag to the same level as `prevLevel` iff
         // `prevLevel` is not 1
         if (prevLevel !== 1) {
             description += ` or ${_tag(prevLevel)}`;
         }
 
+        description += `.</div>`;
+
         return {
             title: `
                 Nonconsecutive heading level used (h${prevLevel} &rarr;
                 h${currLevel})
             `,
-            description: description + "."
+            description: description
         };
     }
 };
@@ -109,7 +114,7 @@ class HeadingsPlugin extends Plugin {
             if (error) {
                 // Register an error to the info panel
                 let infoPanelError = this.error(
-                    error.title, error.description, $el);
+                    error.title, $(error.description), $el);
 
                 // Place an error label on the heading tag
                 annotate.errorLabel(

diff --git a/plugins/labels/index.js b/plugins/labels/index.js
@@ -36,7 +36,7 @@ class LabelsPlugin extends Plugin {
 
                 // Place an error label on the element and register it as an
                 // error in the info panel
-                let entry = this.error(title, this.errorMessage($el), $el);
+                let entry = this.error(title, $(this.errorMessage($el)), $el);
                 annotate.errorLabel($el, "", title, entry);
             });
         }

diff --git a/plugins/link-text/index.js b/plugins/link-text/index.js
@@ -69,7 +69,7 @@ class LinkTextPlugin extends Plugin {
     }
 
     reportError($el, description, content) {
-        let entry = this.error("Link text is unclear", description, $el);
+        let entry = this.error("Link text is unclear", $(description), $el);
         annotate.errorLabel($el, "",
             `Link text "${content}" is unclear`, entry);
     }
@@ -90,10 +90,12 @@ class LinkTextPlugin extends Plugin {
 
                 if (!report.result) {
                     let description = `
+                    <div>
                         The alt text for this link's image,
                         <i>"${report.extractedText}"</i>, is unclear without
                         context and may be confusing to screen readers.
                         Consider providing more detailed alt text.
+                    </div>
                     `;
 
                     this.reportError($el, description, report.extractedText);
@@ -103,10 +105,12 @@ class LinkTextPlugin extends Plugin {
 
                 if (!report.result) {
                     let description = `
-                        The text <i>"${report.extractedText}"</i> is unclear
-                        without context and may be confusing to screen readers.
-                        Consider rearranging the <code>&lt;a&gt;&lt;/a&gt;
-                        </code> tags or including special screen reader text.
+                        <div>
+                            The text <i>"${report.extractedText}"</i> is unclear
+                            without context and may be confusing to screen readers.
+                            Consider rearranging the <code>&lt;a&gt;&lt;/a&gt;
+                            </code> tags or including special screen reader text.
+                        </div>
                     `;
 
                     this.reportError($el, description, report.extractedText);

diff --git a/plugins/shared/info-panel/error.handlebars b/plugins/shared/info-panel/error.handlebars
@@ -11,5 +11,5 @@
             {{{title}}}
         </div>
     </a>
-    <div class="tota11y-info-error-description tota11y-collapsed">{{{description}}}</div>
+    <div class="tota11y-info-error-description tota11y-collapsed"></div>
 </li>
diff --git a/plugins/shared/info-panel/index.js b/plugins/shared/info-panel/index.js
@@ -61,8 +61,8 @@ class InfoPanel {
      * Adds an error to the errors tab. Also receives a jQuery element to
      * highlight on hover.
      */
-    addError(title, description, $el) {
-        let error = {title, description, $el};
+    addError(title, $description, $el) {
+        let error = {title, $description, $el};
         this.errors.push(error);
         return error;
     }
@@ -203,6 +203,14 @@ class InfoPanel {
 
             this.errors.forEach((error, i) => {
                 let $error = $(errorTemplate(error));
+
+                // Insert description jQuery object into template.
+                // Description is passed as jQuery object
+                // so that functionality can be inserted.
+                $error
+                    .find(".tota11y-info-error-description")
+                    .append(error.$description);
+
                 $errors.append($error);
 
                 // Wire up the expand/collapse trigger