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

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>