Skip to content

Commit 5202f59

Browse files
sangitamanecmuncharaz
sangitamane
and
cmuncharaz
authored
A11y fixes for pa11y dashboard pages. (#306)
* First draft of a11y fixes. * Amended results title * Amended results title (again) * Back to top keyboard operation Removed the 'data-role="top"' attribute, which implemented a cool animation to scroll to top but prevented the default behaviour, resulting in the keyboard focus not going back to top. * Options Button Fix to have a working options button, but using the mouse only. This is not a good solution because it cannot be operated via the keyboard. * Fixed options menu css. * Results view layout changes * Undoing layout changes * Graph layout fixes. * Skip Rules Link Added a link to skip the list of rules, which can get very long and annoying for any keyboard user not interested in selecting a rule. Most probably, implementing a collapsible list of rules would be a better solution here. Co-authored-by: Carlos Muncharaz <carlos@muncharaz.eu>
1 parent b9b049e commit 5202f59

File tree

19 files changed

+8817
-115
lines changed

19 files changed

+8817
-115
lines changed

‎data/standards.js

+3-3
Original file line numberDiff line numberDiff line change
@@ -805,7 +805,7 @@ function getStandards() {
805805
description: 'This element\'s text is placed on a background image. Ensure the contrast ratio between the text and all covered parts of the image are at least 4.5:1.'
806806
},
807807
{
808-
name: 'WCAG2AA.Principle1.Guideline1_4.1_4_3.G145 ',
808+
name: 'WCAG2AA.Principle1.Guideline1_4.1_4_3.G1451',
809809
description: 'This element\'s text is placed on a background image. Ensure the contrast ratio between the text and all covered parts of the image are at least 3:1.'
810810
},
811811
{
@@ -1430,11 +1430,11 @@ function getStandards() {
14301430
description: 'This element has insufficient contrast at this conformance level. Expected a contrast ratio of at least 4.5:1, but text in this element has a contrast ratio of /{value/}. Recommendation: /{colour recommendations/}.'
14311431
},
14321432
{
1433-
name: 'WCAG2AAA.Principle1.Guideline1_4.1_4_6.G17 ',
1433+
name: 'WCAG2AAA.Principle1.Guideline1_4.1_4_6.G17-1',
14341434
description: 'This element\'s text is placed on a background image. Ensure the contrast ratio between the text and all covered parts of the image are at least 7:1.'
14351435
},
14361436
{
1437-
name: 'WCAG2AAA.Principle1.Guideline1_4.1_4_6.G18 ',
1437+
name: 'WCAG2AAA.Principle1.Guideline1_4.1_4_6.G18-1',
14381438
description: 'This element\'s text is placed on a background image. Ensure the contrast ratio between the text and all covered parts of the image are at least 4.5:1.'
14391439
},
14401440
{

‎package-lock.json

+8,675
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎public/css/site.min.css

+1-1
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎public/js/site.min.js

+1-1
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎public/js/vendor/bootstrap/_layouts/default.html

+2-2
Original file line numberDiff line numberDiff line change
@@ -43,9 +43,9 @@ <h1>{{ page.title }}</h1>
4343
</ul>
4444
</div>
4545
</div>
46-
<div class="col-md-9" role="main">
46+
<main class="col-md-9" role="main">
4747
{{ content }}
48-
</div>
48+
</main>
4949
</div>
5050

5151
</div>

‎public/js/vendor/bootstrap/js/tab.js

+2
Original file line numberDiff line numberDiff line change
@@ -68,10 +68,12 @@
6868
function next() {
6969
$active
7070
.removeClass('active')
71+
.attr('aria-selected', false)
7172
.find('> .dropdown-menu > .active')
7273
.removeClass('active')
7374

7475
element.addClass('active')
76+
element.attr('aria-selected', true)
7577

7678
if (transition) {
7779
element[0].offsetWidth // reflow for transition

‎public/js/vendor/bootstrap/js/tests/unit/alert.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -32,7 +32,7 @@ $(function () {
3232
$.support.transition = false
3333

3434
var alertHTML = '<div class="alert-message warning fade in">'
35-
+ '<a class="close" href="#" data-dismiss="alert">×</a>'
35+
+ '<a class="close" href="#" data-dismiss="alert" aria-label="Close">×</a>'
3636
+ '<p><strong>Holy guacamole!</strong> Best check yo self, you\'re not looking too good.</p>'
3737
+ '</div>'
3838
, alert = $(alertHTML).appendTo('#qunit-fixture').alert()

‎public/less/site.less

+24
Original file line numberDiff line numberDiff line change
@@ -95,6 +95,11 @@
9595
li a {
9696
text-indent: -20px;
9797
}
98+
ul.options-menu {
99+
list-style: none;
100+
padding: 5px 0;
101+
margin: 2px 10px 0 0;
102+
}
98103
}
99104

100105
.dropdown-toggle {
@@ -262,6 +267,7 @@
262267
}
263268

264269
/* Task details page*/
270+
265271
.task-header {
266272
margin-bottom: 30px;
267273

@@ -502,6 +508,10 @@ ul.date-links {
502508
padding: 0;
503509
margin: 0;
504510
}
511+
.dates-list > li:first-child a {
512+
font-weight: bold;
513+
font-size: 16px;
514+
}
505515

506516
.dates-list a {
507517
color: #fff;
@@ -709,6 +719,16 @@ ul.date-links {
709719
}
710720
}
711721

722+
/* Edit task page */
723+
724+
#skipRules {
725+
position: absolute;
726+
left: -999px;
727+
}
728+
#skipRules:focus {
729+
position: static;
730+
}
731+
712732
/* inline link list */
713733

714734
.inline-list {
@@ -760,3 +780,7 @@ ul.date-links {
760780
opacity: 1;
761781
};
762782
}
783+
784+
section {
785+
margin: 1em 0;
786+
}

‎route/new.js

+1
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
/* eslint-disable complexity */
12
// This file is part of Pa11y Dashboard.
23
//
34
// Pa11y Dashboard is free software: you can redistribute it and/or modify

‎view/layout/default.html

+5-7
Original file line numberDiff line numberDiff line change
@@ -47,19 +47,17 @@
4747

4848
{{> breadcrumb}}
4949

50-
<div class="container">
50+
<main class="container" >
5151
{{#if readonly}}
5252
<div class="row readonly-mode">
5353
{{else}}
5454
<div class="row">
5555
{{/if}}
56-
<section>
57-
<div class="section" role="main">
58-
{{{body}}}
59-
</div>
60-
</section>
56+
<div class="section">
57+
{{{body}}}
58+
</div>
6159
</div>
62-
</div>
60+
</main>
6361

6462
{{> page-footer}}
6563

‎view/new.html

+7-6
Original file line numberDiff line numberDiff line change
@@ -78,8 +78,8 @@ <h1 class="h2 crunch-top">Add a new URL</h1>
7878
<div class="row">
7979
<div class="col-md-4 col-sm-4 col-xs-6">
8080
<label class="control-label" for="new-task-wait">Wait (milliseconds)</label>
81-
<input class="form-control" id="new-task-wait" type="text" placeholder="E.g. 3000" name="wait" value="{{task.wait}}"/>
82-
<em>(Note: default wait time is 0ms)</em>
81+
<input class="form-control" id="new-task-wait" type="text" placeholder="E.g. 3000" name="wait" value="{{task.wait}}" aria-describedby="int3"/>
82+
<em id="int3">(Note: default wait time is 0ms)</em>
8383
</div>
8484
</div>
8585
</div>
@@ -110,7 +110,7 @@ <h1 class="h2 crunch-top">Add a new URL</h1>
110110
<div class="row">
111111
<div class="col-md-4 col-sm-4 col-xs-6">
112112
<label class="control-label" for="new-task-password">Password</label>
113-
<input class="form-control" id="new-task-password" type="text" name="password" value="{{task.password}}"/> <em>(Note: this will be stored and displayed in plain-text - only suitable for use in a secure environment)</em>
113+
<input class="form-control" id="new-task-password" type="text" name="password" value="{{task.password}}" aria-describedby="pwd"/> <span id="pwd"><em>(Note: this will be stored and displayed in plain-text - only suitable for use in a secure environment)</em></span>
114114
</div>
115115
</div>
116116
</div>
@@ -119,8 +119,8 @@ <h1 class="h2 crunch-top">Add a new URL</h1>
119119
<div class="row">
120120
<div class="col-md-4 col-sm-4 col-xs-6">
121121
<label class="control-label" for="new-task-headers">HTTP Headers</label>
122-
<textarea class="form-control" id="new-task-headers" name="headers" placeholder="Cookie: foo=bar">{{task.headers}}</textarea>
123-
<em>(As key/value pairs, separated by newlines/colons)</em>
122+
<textarea class="form-control" id="new-task-headers" name="headers" placeholder="Cookie: foo=bar" aria-describedby="int1">{{task.headers}}</textarea>
123+
<em id="int1">(As key/value pairs, separated by newlines/colons)</em>
124124
</div>
125125
</div>
126126
</div>
@@ -129,7 +129,8 @@ <h1 class="h2 crunch-top">Add a new URL</h1>
129129
<div class="row">
130130
<div class="col-md-4 col-sm-4 col-xs-6">
131131
<label class="control-label" for="new-task-hide-elements">Hide Elements</label>
132-
<input class="form-control" id="new-task-hide-elements" type="text" name="hideElements" value="{{task.hideElements}}" placeholder=".advert, #modal, div[aria-role=presentation]"/> <em>(CSS selector)</em>
132+
<input class="form-control" id="new-task-hide-elements" type="text" name="hideElements" value="{{task.hideElements}}" placeholder=".advert, #modal, div[aria-role=presentation]" aria-describedby="int2"/>
133+
<em id="int2">(CSS selector)</em>
133134
</div>
134135
</div>
135136
</div>

‎view/partial/breadcrumb.html

+4-3
Original file line numberDiff line numberDiff line change
@@ -15,16 +15,17 @@
1515
along with Pa11y Dashboard. If not, see <http://www.gnu.org/licenses/>.
1616
}}
1717
{{#unless isHomePage}}
18-
<div class="container">
18+
<nav class="container" aria-labelledby="breadcrumb">
1919
<div class="row">
2020
<div class="col-md-12">
21+
<h2 id="breadcrumb" class="sr-only">Breadcrumb Navigation</h2>
2122
<ol class="breadcrumb">
2223
<li><a href="/">Dashboard</a></li>
2324
{{#if isNewTaskPage}}
2425
<li class="active">Add URL</li>
2526
{{/if}}
2627
{{#if isTaskPage}}
27-
<li class="active">{{task.name}}</li>
28+
<li class="active">{{task.name}}</li>
2829
{{/if}}
2930
{{#if isTaskSubPage}}
3031
<li><a href="{{task.href}}">{{task.name}}</a></li>
@@ -36,5 +37,5 @@
3637
</ol>
3738
</div>
3839
</div>
39-
</div>
40+
</nav>
4041
{{/unless}}

‎view/partial/graph.html

+55-55
Original file line numberDiff line numberDiff line change
@@ -18,72 +18,72 @@
1818
<div class="graph-container graph-spacer ruled clearfix">
1919
<div class="row">
2020
<div class="col-md-3 col-sm-4 col-xs-3">
21-
<span class="btn btn-sm btn-default btn-full-width btn_action_export">Export graph</span>
21+
<button class="btn btn-sm btn-default btn-full-width btn_action_export" type="button">Export graph</button>
2222
</div>
23-
2423
<div class="col-md-5 col-sm-6 col-xs-9 pull-right">
2524
<ul class="list-unstyled floated-list series-checkboxes clearfix" data-role="series-checkboxes"></ul>
2625
</div>
2726
</div>
2827
<div data-role="graph" class="graph"></div>
2928
<div class="dashedLegend">
3029
<div class="dashedContainer">
31-
<table>
32-
<tbody>
33-
<tr>
34-
<td class="legendColorBox">
35-
<div class="clearfix legendIcon legendErrors">
36-
<div></div>
37-
</div>
38-
</td>
39-
<td class="legendLabel">Errors</td>
40-
</tr>
41-
<tr>
42-
<td class="legendColorBox">
43-
<div class="clearfix legendIcon legendWarnings">
44-
<div></div><div></div>
45-
</div>
46-
</td>
47-
<td class="legendLabel">Warnings</td>
48-
</tr>
49-
<tr>
50-
<td class="legendColorBox">
51-
<div class="clearfix legendIcon legendNotices">
52-
<div></div><div></div><div></div>
53-
</div>
54-
</td>
55-
<td class="legendLabel">Notices</td>
56-
</tr>
57-
</tbody>
58-
</table>
30+
<table>
31+
<tbody>
32+
<tr>
33+
<td class="legendColorBox">
34+
<div class="clearfix legendIcon legendErrors">
35+
<div></div>
36+
</div>
37+
</td>
38+
<td class="legendLabel">Errors</td>
39+
</tr>
40+
<tr>
41+
<td class="legendColorBox">
42+
<div class="clearfix legendIcon legendWarnings">
43+
<div></div><div></div>
44+
</div>
45+
</td>
46+
<td class="legendLabel">Warnings</td>
47+
</tr>
48+
<tr>
49+
<td class="legendColorBox">
50+
<div class="clearfix legendIcon legendNotices">
51+
<div></div><div></div><div></div>
52+
</div>
53+
</td>
54+
<td class="legendLabel">Notices</td>
55+
</tr>
56+
</tbody>
57+
</table>
5958
</div>
6059
</div>
6160
<button data-role='zoom-reset' class="btn btn-xs btn-primary pull-right btn-reset hidden">Reset Zoom <i class="glyphicon glyphicon-zoom-out"></i></button>
61+
6262
</div>
63-
</div>
6463

65-
<div class="col-md-12 hidden">
66-
<div class="graph-spacer ruled">
67-
<table id="graph-data" class="table graph-table" summary="Accessibility results from Pa11y for this page">
68-
<caption>Pa11y results for this URL</caption>
69-
<thead>
70-
<tr>
71-
<th>Date</th>
72-
<th class="text-center">Errors</th>
73-
<th class="text-center">Warnings</th>
74-
<th class="text-center">Notices</th>
75-
</tr>
76-
</thead>
77-
<tbody>
78-
{{#results}}
79-
<tr data-role="url-stats">
80-
<td data-value="{{date-timestamp date}}" data-role="date">{{date-format date format="DD MMM YYYY"}}</td>
81-
<td class="text-center" data-label="error">{{count.error}}</td>
82-
<td class="text-center" data-label="warning">{{count.warning}}</td>
83-
<td class="text-center" data-label="notice">{{count.notice}}</td>
84-
</tr>
85-
{{/results}}
86-
</tbody>
87-
</table>
64+
<div class="col-md-12 hidden">
65+
<div class="graph-spacer ruled">
66+
<table id="graph-data" class="table graph-table" summary="Accessibility results from Pa11y for this page">
67+
<caption>Pa11y results for this URL</caption>
68+
<thead>
69+
<tr>
70+
<th>Date</th>
71+
<th class="text-center">Errors</th>
72+
<th class="text-center">Warnings</th>
73+
<th class="text-center">Notices</th>
74+
</tr>
75+
</thead>
76+
<tbody>
77+
{{#results}}
78+
<tr data-role="url-stats">
79+
<td data-value="{{date-timestamp date}}" data-role="date">{{date-format date format="DD MMM YYYY"}}</td>
80+
<td class="text-center" data-label="error">{{count.error}}</td>
81+
<td class="text-center" data-label="warning">{{count.warning}}</td>
82+
<td class="text-center" data-label="notice">{{count.notice}}</td>
83+
</tr>
84+
{{/results}}
85+
</tbody>
86+
</table>
87+
</div>
8888
</div>
89-
</div>
89+
</div>

0 commit comments

Comments
 (0)