external-repos/pa11y-dashboard
2
0
Fork 1
mirror of https://github.com/pa11y/pa11y-dashboard.git synced 2025-09-25 14:51:28 +00:00
Code Issues Packages Projects Releases Wiki 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

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>