feat(headings): add warnings for hidden heading levels

closes #121
jdan · Mar 16, 2019 · e3f4a43 · e3f4a43
1 parent 00a3159
commit e3f4a43
Show file tree

Hide file tree

Showing 6 changed files with 54 additions and 13 deletions.
diff --git a/plugins/base.js b/plugins/base.js
@@ -43,8 +43,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, level = "error") {
+        return this.panel.addError(title, $description, $el, level);
     }
 
     /**

diff --git a/plugins/headings/index.js b/plugins/headings/index.js
@@ -12,7 +12,7 @@ require("./style.less");
 const ERRORS = {
     FIRST_NOT_H1(level) {
         return {
-            title: "First heading is not an &lt;h1&gt;",
+            title: "Error: First heading is not an &lt;h1&gt;",
             description: `
                 <div>
                     To give your document a proper structure for assistive
@@ -36,7 +36,7 @@ const ERRORS = {
     // [1]: http://www.w3.org/html/wg/drafts/html/master/semantics.html#outline
     // [2]: https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Sections_and_Outlines_of_an_HTML5_document#The_HTML5_Outline_Algorithm
     MULTIPLE_H1: {
-        title: "&lt;h1&gt; used when one is already present"
+        title: "Error: &lt;h1&gt; used when one is already present"
     },
 
     // This error accepts two arguments to display a relevant error message
@@ -60,11 +60,35 @@ const ERRORS = {
 
         return {
             title: `
-                Nonconsecutive heading level used (h${prevLevel} &rarr;
+                Error: Nonconsecutive heading level used (h${prevLevel} &rarr;
                 h${currLevel})
             `,
             description: description
         };
+    },
+
+    HIDDEN_HEADER(level) {
+        return {
+            title: `Warning: Hidden heading level (h${level})`,
+            description: `
+                <div>
+                    This document contains a hidden h${level}
+                </div>
+            `,
+            errorLevel: "warning",
+        };
+    },
+
+    ARIA_HIDDEN_HEADER(level) {
+        return {
+            title: `Warning: ARIA Hidden heading level (h${level})`,
+            description: `
+                <div>
+                    This document contains an h${level} with aria-hidden set to true.
+                </div>
+            `,
+            errorLevel: "warning"
+        };
     }
 };
 
@@ -102,6 +126,14 @@ class HeadingsPlugin extends Plugin {
                 error = ERRORS.NONCONSECUTIVE_HEADER(prevLevel, level);     // eslint-disable-line new-cap
             }
 
+            if ($el.attr("aria-hidden")) {
+                error = ERRORS.ARIA_HIDDEN_HEADER(level);
+            }
+
+            if ($el.is(":hidden")) {
+                error = ERRORS.HIDDEN_HEADER(level);
+            }
+
             prevLevel = level;
 
             // Render the entry in the outline for the "Summary" tab
@@ -116,23 +148,26 @@ class HeadingsPlugin extends Plugin {
             annotate.toggleHighlight($el, $item);
 
             if (error) {
+                const { errorLevel = "error" } = error;
+
                 // Register an error to the info panel
                 let infoPanelError = this.error(
-                    error.title, $(error.description), $el);
+                    error.title, $(error.description), $el, errorLevel);
 
                 // Place an error label on the heading tag
                 annotate.errorLabel(
                     $el,
                     $el.prop("tagName").toLowerCase(),
                     error.title,
-                    infoPanelError);
+                    infoPanelError,
+                    errorLevel);
 
                 // Mark the summary item as red
                 // Pretty hacky, since we're borrowing label styles for this
                 // summary tab
                 $item
                     .find(".tota11y-heading-outline-level")
-                    .addClass("tota11y-label-error");
+                    .addClass(`tota11y-label-${errorLevel}`);
             } else {
                 // Label the heading tag
                 annotate.label($el).addClass("tota11y-label-success");

diff --git a/plugins/shared/annotate/index.js b/plugins/shared/annotate/index.js
@@ -115,7 +115,7 @@ 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, level = "error") {
             let $innerHtml = $(errorLabelTemplate({
                 text: text,
                 detail: expanded,
@@ -137,7 +137,7 @@ module.exports = (namespace) => {
             }
 
             return this.label($el)
-                .addClass("tota11y-label-error")
+                .addClass(`tota11y-label-${level}`)
                 .html($innerHtml);
         },
 

diff --git a/plugins/shared/info-panel/error.handlebars b/plugins/shared/info-panel/error.handlebars
@@ -1,4 +1,4 @@
-<li class="tota11y-info-error">
+<li class="tota11y-info-error tota11y-info-{{{level}}}">
     <a aria-label="Scroll to error" href="#" class="tota11y-info-error-scroll">
         <div class="tota11y-info-error-scroll-glyph tota11y-info-error-scroll-lens"></div>
         <div class="tota11y-info-error-scroll-glyph tota11y-info-error-scroll-handle"></div>

diff --git a/plugins/shared/info-panel/index.js b/plugins/shared/info-panel/index.js
@@ -53,8 +53,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, level = "error") {
+        let error = {title, $description, $el, level};
         this.errors.push(error);
         return error;
     }

diff --git a/test/index.html b/test/index.html
@@ -19,6 +19,10 @@
             font-size: 24px;
             font-weight: bold;
         }
+
+        .hidden {
+            display: none;
+        }
     </style>
     <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet">
 </head>
@@ -32,6 +36,7 @@
                     <span class="icon-bar"></span>
                     <span class="icon-bar"></span>
                 </button>
+                <h6 class="hidden">This heading should be hidden.</h3>
                 <h4 class="navbar-brand">Project name</h4>
             </div>
             <div id="navbar" class="navbar-collapse collapse">
@@ -52,6 +57,7 @@ <h4 class="navbar-brand">Project name</h4>
     <div class="jumbotron">
         <div class="container">
             <h1>Hello, world!</h1>
+            <h2 aria-hidden="true">This heading should be hidden from screen readers.</h2>
             <p>This is a template for a simple marketing or informational website. It includes a large callout called a jumbotron and three supporting pieces of content. Use it as a starting point to create something more unique.</p>
             <p>
                 <a href="#">Click here</a> to see why. Or <a href="#">check out more demo pages</a> on my blog.