tcitcs/pa11y-dashboard
2
0
Fork 0
forked from external-repos/pa11y-dashboard
Code Pull Requests Activity

A11y fixes for pa11y dashboard pages. (#306)

Browse Source 
* 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>
This commit is contained in:
Sangita Mane
2022-10-11 14:17:43 +02:00
committed by GitHub
parent b9b049ec2b
commit 5202f59008
19 changed files with 8817 additions and 115 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
view/layout/default.html
View File

@@ -47,19 +47,17 @@ along with Pa11y Dashboard. If not, see <http://www.gnu.org/licenses/>.
{{> breadcrumb}}
<div class="container">
<main class="container" >
{{#if readonly}}
<div class="row readonly-mode">
{{else}}
<div class="row">
{{/if}}
<section>
<div class="section" role="main">
{{{body}}}
</div>
</section>
<div class="section">
{{{body}}}
</div>
</div>
</div>
</main>
{{> page-footer}}

13
view/new.html
View File

@@ -78,8 +78,8 @@ along with Pa11y Dashboard. If not, see <http://www.gnu.org/licenses/>.
<div class="row">
<div class="col-md-4 col-sm-4 col-xs-6">
<label class="control-label" for="new-task-wait">Wait (milliseconds)</label>
<input class="form-control" id="new-task-wait" type="text" placeholder="E.g. 3000" name="wait" value="{{task.wait}}"/>
<em>(Note: default wait time is 0ms)</em>
<input class="form-control" id="new-task-wait" type="text" placeholder="E.g. 3000" name="wait" value="{{task.wait}}" aria-describedby="int3"/>
<em id="int3">(Note: default wait time is 0ms)</em>
</div>
</div>
</div>
@@ -110,7 +110,7 @@ along with Pa11y Dashboard. If not, see <http://www.gnu.org/licenses/>.
<div class="row">
<div class="col-md-4 col-sm-4 col-xs-6">
<label class="control-label" for="new-task-password">Password</label>
<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>
<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>
</div>
</div>
</div>
@@ -119,8 +119,8 @@ along with Pa11y Dashboard. If not, see <http://www.gnu.org/licenses/>.
<div class="row">
<div class="col-md-4 col-sm-4 col-xs-6">
<label class="control-label" for="new-task-headers">HTTP Headers</label>
<textarea class="form-control" id="new-task-headers" name="headers" placeholder="Cookie: foo=bar">{{task.headers}}</textarea>
<em>(As key/value pairs, separated by newlines/colons)</em>
<textarea class="form-control" id="new-task-headers" name="headers" placeholder="Cookie: foo=bar" aria-describedby="int1">{{task.headers}}</textarea>
<em id="int1">(As key/value pairs, separated by newlines/colons)</em>
</div>
</div>
</div>
@@ -129,7 +129,8 @@ along with Pa11y Dashboard. If not, see <http://www.gnu.org/licenses/>.
<div class="row">
<div class="col-md-4 col-sm-4 col-xs-6">
<label class="control-label" for="new-task-hide-elements">Hide Elements</label>
<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>
<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"/>
<em id="int2">(CSS selector)</em>
</div>
</div>
</div>

7
view/partial/breadcrumb.html
View File

@@ -15,16 +15,17 @@ You should have received a copy of the GNU General Public License
along with Pa11y Dashboard. If not, see <http://www.gnu.org/licenses/>.
}}
{{#unless isHomePage}}
<div class="container">
<nav class="container" aria-labelledby="breadcrumb">
<div class="row">
<div class="col-md-12">
<h2 id="breadcrumb" class="sr-only">Breadcrumb Navigation</h2>
<ol class="breadcrumb">
<li><a href="/">Dashboard</a></li>
{{#if isNewTaskPage}}
<li class="active">Add URL</li>
{{/if}}
{{#if isTaskPage}}
<li class="active">{{task.name}}</li>
<li class="active">{{task.name}}</li>
{{/if}}
{{#if isTaskSubPage}}
<li><a href="{{task.href}}">{{task.name}}</a></li>
@@ -36,5 +37,5 @@ along with Pa11y Dashboard. If not, see <http://www.gnu.org/licenses/>.
</ol>
</div>
</div>
</div>
</nav>
{{/unless}}

110
view/partial/graph.html
View File

@@ -18,9 +18,8 @@ along with Pa11y Dashboard. If not, see <http://www.gnu.org/licenses/>.
<div class="graph-container graph-spacer ruled clearfix">
<div class="row">
<div class="col-md-3 col-sm-4 col-xs-3">
<span class="btn btn-sm btn-default btn-full-width btn_action_export">Export graph</span>
<button class="btn btn-sm btn-default btn-full-width btn_action_export" type="button">Export graph</button>
</div>
<div class="col-md-5 col-sm-6 col-xs-9 pull-right">
<ul class="list-unstyled floated-list series-checkboxes clearfix" data-role="series-checkboxes"></ul>
</div>
@@ -28,62 +27,63 @@ along with Pa11y Dashboard. If not, see <http://www.gnu.org/licenses/>.
<div data-role="graph" class="graph"></div>
<div class="dashedLegend">
<div class="dashedContainer">
<table>
<tbody>
<tr>
<td class="legendColorBox">
<div class="clearfix legendIcon legendErrors">
<div></div>
</div>
</td>
<td class="legendLabel">Errors</td>
</tr>
<tr>
<td class="legendColorBox">
<div class="clearfix legendIcon legendWarnings">
<div></div><div></div>
</div>
</td>
<td class="legendLabel">Warnings</td>
</tr>
<tr>
<td class="legendColorBox">
<div class="clearfix legendIcon legendNotices">
<div></div><div></div><div></div>
</div>
</td>
<td class="legendLabel">Notices</td>
</tr>
</tbody>
</table>
<table>
<tbody>
<tr>
<td class="legendColorBox">
<div class="clearfix legendIcon legendErrors">
<div></div>
</div>
</td>
<td class="legendLabel">Errors</td>
</tr>
<tr>
<td class="legendColorBox">
<div class="clearfix legendIcon legendWarnings">
<div></div><div></div>
</div>
</td>
<td class="legendLabel">Warnings</td>
</tr>
<tr>
<td class="legendColorBox">
<div class="clearfix legendIcon legendNotices">
<div></div><div></div><div></div>
</div>
</td>
<td class="legendLabel">Notices</td>
</tr>
</tbody>
</table>
</div>
</div>
<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>
</div>
</div>
<div class="col-md-12 hidden">
<div class="graph-spacer ruled">
<table id="graph-data" class="table graph-table" summary="Accessibility results from Pa11y for this page">
<caption>Pa11y results for this URL</caption>
<thead>
<tr>
<th>Date</th>
<th class="text-center">Errors</th>
<th class="text-center">Warnings</th>
<th class="text-center">Notices</th>
</tr>
</thead>
<tbody>
{{#results}}
<tr data-role="url-stats">
<td data-value="{{date-timestamp date}}" data-role="date">{{date-format date format="DD MMM YYYY"}}</td>
<td class="text-center" data-label="error">{{count.error}}</td>
<td class="text-center" data-label="warning">{{count.warning}}</td>
<td class="text-center" data-label="notice">{{count.notice}}</td>
</tr>
{{/results}}
</tbody>
</table>
<div class="col-md-12 hidden">
<div class="graph-spacer ruled">
<table id="graph-data" class="table graph-table" summary="Accessibility results from Pa11y for this page">
<caption>Pa11y results for this URL</caption>
<thead>
<tr>
<th>Date</th>
<th class="text-center">Errors</th>
<th class="text-center">Warnings</th>
<th class="text-center">Notices</th>
</tr>
</thead>
<tbody>
{{#results}}
<tr data-role="url-stats">
<td data-value="{{date-timestamp date}}" data-role="date">{{date-format date format="DD MMM YYYY"}}</td>
<td class="text-center" data-label="error">{{count.error}}</td>
<td class="text-center" data-label="warning">{{count.warning}}</td>
<td class="text-center" data-label="notice">{{count.notice}}</td>
</tr>
{{/results}}
</tbody>
</table>
</div>
</div>
</div>
</div>

44
view/partial/result.html
View File

@@ -32,15 +32,14 @@ along with Pa11y Dashboard. If not, see <http://www.gnu.org/licenses/>.
</div>
</div>
</div>
<div class="row date-selector-row">
<div id="top" class="col-md-12 col-sm-12 clearfix">
<div class="col-md-12 col-sm-12 clearfix">
<div class="well dark-well">
<div class="date-selector">
<div class="btn-group block-level clearfix">
<h2 class="h4">
<span class="glyphicon glyphicon-calendar" aria-hidden="true"></span>&nbsp;&nbsp;{{date-format task.lastResult.date format="DD MMM YYYY"}}
</h2>
<h3 class="h5 show-stats" id="dates-navigation">Select a date to show stats for:</h3>
<h2 class="h3" id="dates-navigation">Select a date to show stats for: <span class="glyphicon glyphicon-calendar"></span></h2>
<nav aria-labelledby="dates-navigation">
<ul class="dates-list">
{{#results}}
@@ -56,31 +55,32 @@ along with Pa11y Dashboard. If not, see <http://www.gnu.org/licenses/>.
<div class="row">
<div class="col-md-12 col-sm-12 clearfix">
<div class="well">
<h4 class="crunch-top">View results in browser</h4>
<h2 class="crunch-top h3">View results in browser</h2>
<p class="crunch-bottom">Pa11y uses HTML_CodeSniffer to find accessibility issues. <a href="http://squizlabs.github.io/HTML_CodeSniffer/">Use their bookmarklet</a> to view results on the page you are testing.</p>
</div>
</div>
</div>
</div>
<div class="col-md-9">
<ul class="nav nav-tabs category-list" role="tablist">
<li class="category-list__item category-list__item_type_error active" role="presentation">
<section class="col-md-9" id="top">
<h2 id="tabSectionHeading" class="crunch-top">Results</h2>
<ul class="nav nav-tabs category-list" aria-labelledby="tabSectionHeading" role="tablist">
<li class="category-list__item category-list__item_type_error active" aria-selected="true" role="presentation">
<a class="category-list__link" id="errors" href="#errors-list" aria-controls="errors-list" role="tab" data-toggle="tab" data-test="task-errors">
Errors ( {{mainResult.count.error}} )
</a>
</li>
<li class="category-list__item category-list__item_type_warning" role="presentation">
<li class="category-list__item category-list__item_type_warning" aria-selected="false" role="presentation">
<a class="category-list__link" id="warnings" href="#warnings-list" aria-controls="warnings-list" role="tab" data-toggle="tab" data-test="task-warnings">
Warnings ( {{mainResult.count.warning}} )
</a>
</li>
<li class="category-list__item category-list__item_type_notice" role="presentation">
<li class="category-list__item category-list__item_type_notice" aria-selected="false" role="presentation">
<a class="category-list__link" id="notices" href="#notices-list" aria-controls="notices-list" role="tab" data-toggle="tab" data-test="task-notices">
Notices ( {{mainResult.count.notice}} )
</a>
</li>
<li class="category-list__item category-list__item_type_ignore" role="presentation">
<li class="category-list__item category-list__item_type_ignore" aria-selected="false" role="presentation">
<a class="category-list__link" id="ignore" href="#ignore-list" aria-controls="ignore-list" role="tab" data-toggle="tab">
Ignored rules ( {{mainResult.ignore.length}} )
</a>
@@ -88,7 +88,7 @@ along with Pa11y Dashboard. If not, see <http://www.gnu.org/licenses/>.
</ul>
<div class="tab-content">
<div id="errors-list" role="tabpanel" class="tab-pane tasks-list fade in active">
<div id="errors-list" role="tabpanel" class="tab-pane tasks-list fade in active" aria-labelledby="errors">
{{#if mainResult.count.error}}
{{#mainResult.errors}}
<div class="panel panel-default task task_type_error">
@@ -147,14 +147,14 @@ along with Pa11y Dashboard. If not, see <http://www.gnu.org/licenses/>.
</div>
{{/mainResult.errors}}
<div class="to-top">
<a class="link" href="#top" data-role="top"><span class="glyphicon glyphicon-chevron-up" aria-hidden="true"></span>Back to top</a>
<a class="link" href="#top"><span class="glyphicon glyphicon-chevron-up" aria-hidden="true"></span>Back to top</a>
</div>
{{else}}
<div class="text">Well done! You have 0 errors. <span class="glyphicon glyphicon-ok pull-right" aria-hidden="true"></span></div>
{{/if}}
</div>
<div id="warnings-list" role="tabpanel" class="tab-pane tasks-list fade">
<div id="warnings-list" role="tabpanel" class="tab-pane tasks-list fade" aria-labelledby="warning">
{{#if mainResult.count.warning}}
{{#mainResult.warnings}}
<div class="panel panel-default task task_type_warning">
@@ -213,14 +213,14 @@ along with Pa11y Dashboard. If not, see <http://www.gnu.org/licenses/>.
</div>
{{/mainResult.warnings}}
<div class="to-top">
<a class="link" href="#top" data-role="top"><span class="glyphicon glyphicon-chevron-up" aria-hidden="true"></span>Back to top</a>
<a class="link" href="#top"><span class="glyphicon glyphicon-chevron-up" aria-hidden="true"></span>Back to top</a>
</div>
{{else}}
<div class="text">Well done! You have 0 warnings. <span class="glyphicon glyphicon-ok pull-right" aria-hidden="true"></span></div>
{{/if}}
</div>
<div id="notices-list" role="tabpanel" class="tab-pane tasks-list fade">
<div id="notices-list" role="tabpanel" class="tab-pane tasks-list fade" aria-labelledby="notices">
{{#if mainResult.count.notice}}
{{#mainResult.notices}}
<div class="panel panel-default task task_type_notice">
@@ -279,14 +279,14 @@ along with Pa11y Dashboard. If not, see <http://www.gnu.org/licenses/>.
</div>
{{/mainResult.notices}}
<div class="to-top">
<a class="link" href="#top" data-role="top"><span class="glyphicon glyphicon-chevron-up" aria-hidden="true"></span>Back to top</a>
<a class="link" href="#top"><span class="glyphicon glyphicon-chevron-up" aria-hidden="true"></span>Back to top</a>
</div>
{{else}}
<div class="text">Well done! You have 0 notices. <span class="glyphicon glyphicon-ok pull-right" aria-hidden="true"></span></div>
{{/if}}
</div>
<div id="ignore-list" role="tabpanel" class="tab-pane tasks-list fade">
<div id="ignore-list" role="tabpanel" class="tab-pane tasks-list fade" aria-labelledby="ignore">
{{#if mainResult.ignore.length}}
{{#mainResult.ignore}}
<div class="panel panel-default task task_type_ignore">
@@ -316,11 +316,11 @@ along with Pa11y Dashboard. If not, see <http://www.gnu.org/licenses/>.
</div>
{{/mainResult.ignore}}
<div class="to-top">
<a class="link" href="#top" data-role="top"><span class="glyphicon glyphicon-chevron-up" aria-hidden="true"></span>Back to top</a>
<a class="link" href="#top"><span class="glyphicon glyphicon-chevron-up" aria-hidden="true"></span>Back to top</a>
</div>
{{else}}
<div class="text">You have no ignored rules.</div>
{{/if}}
</div>
</div>
</div>
</div>
</section>

4
view/partial/task-header.html
View File

@@ -14,7 +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-12 zfix">
<section class="col-md-12 zfix">
<div class="ruled task-header">
<div class="row clearfix">
<div class="col-md-12">
@@ -41,4 +41,4 @@ along with Pa11y Dashboard. If not, see <http://www.gnu.org/licenses/>.
</div>
</div>
</div>
</div>
</section>

6
view/partial/tasks.html
View File

@@ -25,7 +25,7 @@ along with Pa11y Dashboard. If not, see <http://www.gnu.org/licenses/>.
<li class="col-md-4 col-sm-6 task-card add-task">
<a class="well task-card-link crunch-bottom" data-role="add-task" href="/new" data-test="add-task">
<p class="h3 crunch">Add new URL</p>
<p class="supersize-me crunch">+</p>
<p class="supersize-me crunch" aria-hidden="true">+</p>
</a>
</li>
{{/unless}}
@@ -56,8 +56,8 @@ along with Pa11y Dashboard. If not, see <http://www.gnu.org/licenses/>.
{{#unless ../readonly}}
<div class="btn-group options-button text-right">
<button type="button" class="btn btn-info btn-xs dropdown-toggle" data-toggle="dropdown"><span class="sr-only">Options</span><span class="glyphicon glyphicon-cog"></span></button>
<nav aria-label="task tools">
<ul class="dropdown-menu pull-right">
<nav class="dropdown-menu pull-right" aria-label="task tools">
<ul class="options-menu">
<li><a href="{{href}}/edit">Edit this task</a></li>
<li><a href="{{href}}/delete">Delete this task</a></li>
<li class="divider"></li>

2
view/result/index.html
View File

@@ -16,7 +16,7 @@ along with Pa11y Dashboard. If not, see <http://www.gnu.org/licenses/>.
}}
{{#content "title"}}
{{task.name}} - {{simplify-url task.url}} ({{task.standard}}) - {{date-format mainResult.date format="DD MMM YYYY"}}
Pa11y Dashboard Results - {{task.name}} - {{date-format mainResult.date format="DD MMM YYYY"}}
{{/content}}
{{> result-header}}

6
view/task/edit.html
View File

@@ -22,7 +22,7 @@ along with Pa11y Dashboard. If not, see <http://www.gnu.org/licenses/>.
{{#edited}}
<div class="col-md-12 clearfix" data-test="alert">
<div class="alert alert-success">
<button aria-hidden="true" data-dismiss="alert" class="close" type="button">×</button>
<button aria-hidden="true" data-dismiss="alert" class="close" type="button" aria-label="Close">×</button>
<strong>Success!</strong>
<p>Your changes have been saved.</p>
</div>
@@ -146,7 +146,7 @@ along with Pa11y Dashboard. If not, see <http://www.gnu.org/licenses/>.
</div>
</div>
<p class="control-label"><b>Ignore these rules</b> <a target="_blank" href="https://github.com/pa11y/pa11y/wiki/HTML-CodeSniffer-Rules">(full list of rules here)</a></p>
<p class="control-label"><b>Ignore these rules</b> (<a target="_blank" href="https://github.com/pa11y/pa11y/wiki/HTML-CodeSniffer-Rules">full list of rules here</a>) <a href="#submitEditBtn" id="skipRules">Skip list of rules</a></p>
<div class="standards-lists">
{{#standards}}
@@ -166,7 +166,7 @@ along with Pa11y Dashboard. If not, see <http://www.gnu.org/licenses/>.
{{/standards}}
</div>
<button type="submit" class="btn btn-success">Save changes <span class="glyphicon glyphicon-save"></span></button>
<button type="submit" id="submitEditBtn" class="btn btn-success">Save changes <span class="glyphicon glyphicon-save"></span></button>
<a href="/{{task.id}}/edit" class="btn btn-primary">Undo <span class="glyphicon glyphicon-refresh"></span></a>
</form>

10
view/task/index.html
View File

@@ -16,13 +16,13 @@ along with Pa11y Dashboard. If not, see <http://www.gnu.org/licenses/>.
}}
{{#content "title"}}
{{task.name}} - {{simplify-url task.url}} ({{task.standard}})
Pa11y Dashboard Results for {{task.name}} - ({{task.standard}})
{{/content}}
{{#added}}
<div class="col-md-12 clearfix" data-test="alert">
<div class="alert alert-success">
<button data-dismiss="alert" class="close" type="button">×</button>
<button data-dismiss="alert" class="close" type="button" aria-label="Close">×</button>
<strong>Whoop whoop!</strong>
<p>Your new URL has been added.</p>
</div>
@@ -32,7 +32,7 @@ along with Pa11y Dashboard. If not, see <http://www.gnu.org/licenses/>.
{{#running}}
<div class="col-md-12 clearfix" data-test="alert">
<div class="alert alert-success">
<button data-dismiss="alert" class="close" type="button">×</button>
<button data-dismiss="alert" class="close" type="button" aria-label="Close">×</button>
<strong>New results incoming!</strong>
<p>
New results are being generated for this URL in the background.
@@ -45,7 +45,7 @@ along with Pa11y Dashboard. If not, see <http://www.gnu.org/licenses/>.
{{#ruleIgnored}}
<div class="col-md-12 clearfix" data-test="alert">
<div class="alert alert-success">
<button data-dismiss="alert" class="close" type="button">×</button>
<button data-dismiss="alert" class="close" type="button" aria-label="Close">×</button>
<strong>Rule ignored!</strong>
<p>
You've ignored an accessibility rule for this URL.
@@ -58,7 +58,7 @@ along with Pa11y Dashboard. If not, see <http://www.gnu.org/licenses/>.
{{#ruleUnignored}}
<div class="col-md-12 clearfix" data-test="alert">
<div class="alert alert-success">
<button data-dismiss="alert" class="close" type="button">×</button>
<button data-dismiss="alert" class="close" type="button" aria-label="Close">×</button>
<strong>Rule unignored!</strong>
<p>
You've removed an ignored accessibility rule for this URL.