Make the errors/warnings/notices lists keyboard accessible

This commit is contained in:
Alex Kilgour
2016-01-28 15:40:22 +00:00
parent 0829482020
commit 537b93c671
5 changed files with 48 additions and 23 deletions

File diff suppressed because one or more lines are too long

View File

@@ -61,16 +61,32 @@ $(document).ready(function(){
};
// Toggle appearance of lists of error/warnings/notices
expandLink.click( function(){
$(this).parent().next().slideToggle('slow', function(){});
if ($(this).parent().hasClass('showing')) {
$(this).html('+');
expandLink.click( function(){
$(this).next().slideToggle('slow', function(){});
if ($(this).hasClass('showing')) {
$(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();
}
});

File diff suppressed because one or more lines are too long

View File

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

View File

@@ -1,4 +1,4 @@
{{!
{{!
This file is part of pa11y-dashboard.
pa11y-dashboard is free software: you can redistribute it and/or modify
@@ -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">
<span data-role="expander" class="pull-right expander"> - </span>
<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 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">
<span data-role="expander" class="pull-right expander"> + </span>
<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 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">
<span data-role="expander" class="pull-right expander"> + </span>
<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 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">
<span data-role="expander" class="pull-right expander"> + </span>
<div class="heading label-default pointer" id="ignore" data-role="expander" role="button" tabindex="0" aria-expanded="false" aria-controls="ignore-list">
<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>