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

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>