Make the errors/warnings/notices lists keyboard accessible

public/js/site.js

@@ -61,16 +61,32 @@ $(document).ready(function(){
     };
 
     // Toggle appearance of lists of error/warnings/notices
-	expandLink.click( function(){
+    expandLink.click( function(){
-		$(this).parent().next().slideToggle('slow', function(){});
+		$(this).next().slideToggle('slow', function(){});
-        if ($(this).parent().hasClass('showing')) {
+        if ($(this).hasClass('showing')) {
-            $(this).html('+');
+            $(this).find('span.expander').html('+');
+            $(this).attr('aria-expanded', false);
         }
         else {
-            $(this).html('-');
+            $(this).find('span.expander').html('-');
+            $(this).attr('aria-expanded', true);
         }
-        $(this).parent().toggleClass('showing');
+        $(this).toggleClass('showing');
 	});
+    $(document).on('keydown.lists', '[data-role="expander"]', function (e) {
+        var $this = $(this);
+        var k = e.which || e.keyCode;
+
+        if (!/(13|32)/.test(k)) {
+            return;
+        }
+        if (k === 13 || k === 32) {
+            $this.click();
+        }
+
+        e.preventDefault();
+        e.stopPropagation();
+    });
 
      // Back to top links
     toTopLinks.click( function(e){
@@ -94,7 +110,7 @@ $(document).ready(function(){
         target = $(this).attr('href');
         animateSection($(target), -25);
         if (!$(target).hasClass('showing')) {
-            $(target).children('[data-role="expander"]').click();
+            $(target).click();
         }
     });
 

public/less/utilities.less

@@ -43,3 +43,11 @@
 .affix {
   position: fixed;
 }
+
+
+// Cursors
+// -------------------------
+
+.pointer {
+  cursor: pointer;
+}

view/partial/result.html

@@ -14,6 +14,7 @@ GNU General Public License for more details.
 You should have received a copy of the GNU General Public License
 along with pa11y-dashboard.  If not, see <http://www.gnu.org/licenses/>.
 }}
+
 <div class="col-md-3 aside">
 	<div class="row">
 		<div id="top" class="col-md-12 col-sm-6 col-xs-12">
@@ -50,13 +51,13 @@ along with pa11y-dashboard.  If not, see <http://www.gnu.org/licenses/>.
 	</div>
 </div>
 
-<div class="col-md-9">
+<div class="col-md-9" data-role="expandable-results">
 	{{#if mainResult.count.error}}
-		<div class="heading label-danger showing first" id="errors" data-test="task-errors">
+		<div class="heading label-danger pointer showing first" id="errors" data-test="task-errors" data-role="expander" role="button" tabindex="0" aria-expanded="true" aria-controls="errors-list">
-			<span data-role="expander" class="pull-right expander"> - </span>
+			<span class="pull-right expander"> - <span class="hide">(close panel)</span></span>
 			Errors ( {{mainResult.count.error}} )
 		</div>
-		<div class="task-danger tasks-list collapse clearfix in">
+		<div class="task-danger tasks-list collapse clearfix in" id="errors-list">
 
 			<ul class="list-unstyled">
 				{{#mainResult.errors}}
@@ -81,11 +82,11 @@ along with pa11y-dashboard.  If not, see <http://www.gnu.org/licenses/>.
 	{{/if}}
 
 	{{#if mainResult.count.warning}}
-		<div class="heading label-warning" id="warnings" data-test="task-warnings">
+		<div class="heading label-warning pointer" id="warnings" data-test="task-warnings" data-role="expander" role="button" tabindex="0" aria-expanded="false" aria-controls="warnings-list">
-			<span data-role="expander" class="pull-right expander"> + </span>
+			<span class="pull-right expander"> + <span class="hide">(open panel)</span></span>
 			Warnings ( {{mainResult.count.warning}} )
 		</div>
-		<div class="task-warning tasks-list collapse clearfix">
+		<div class="task-warning tasks-list collapse clearfix" id="warnings-list">
 			<ul class="list-unstyled">
 				{{#mainResult.warnings}}
 					<li>
@@ -110,11 +111,11 @@ along with pa11y-dashboard.  If not, see <http://www.gnu.org/licenses/>.
 	{{/if}}
 
 	{{#if mainResult.count.notice}}
-		<div class="heading label-info" id="notices" data-test="task-notices">
+		<div class="heading label-info pointer" id="notices" data-test="task-notices" data-role="expander" role="button" tabindex="0" aria-expanded="false" aria-controls="notices-list">
-			<span data-role="expander" class="pull-right expander"> + </span>
+			<span class="pull-right expander"> + <span class="hide">(open panel)</span></span>
 			Notices ( {{mainResult.count.notice}} )
 		</div>
-		<div class="task-info tasks-list collapse clearfix">
+		<div class="task-info tasks-list collapse clearfix" id="notices-list">
 			<ul class="list-unstyled">
 				{{#mainResult.notices}}
 					<li>
@@ -138,11 +139,11 @@ along with pa11y-dashboard.  If not, see <http://www.gnu.org/licenses/>.
 	{{/if}}
 
 	{{#if mainResult.ignore.length}}
-		<div class="heading label-default">
+		<div class="heading label-default pointer" id="ignore" data-role="expander" role="button" tabindex="0" aria-expanded="false" aria-controls="ignore-list">
-			<span data-role="expander" class="pull-right expander"> + </span>
+			<span class="pull-right expander"> + <span class="hide">(open panel)</span></span>
 			Ignored Rules ( {{mainResult.ignore.length}} )
 		</div>
-		<div class="task-default tasks-list collapse clearfix">
+		<div class="task-default tasks-list collapse clearfix" id="ignore-list">
 			<ul class="list-unstyled">
 			    {{#mainResult.ignore}}
 			        <li>