mirror of
https://github.com/pa11y/pa11y-dashboard.git
synced 2025-09-24 22:31:15 +00:00
Fixed the a11y errors on Pa11y dashboard results and add new url page (#285)
* Fixed the a11y errors on Pa11y dashboard results page and add new url page. * Removed few more unnecessary roles along with Holli's suggestions implemented. * Added close button ARIA label Co-authored-by: Hollie Kay <1948361+hollsk@users.noreply.github.com> Co-authored-by: Hollie Kay <1948361+hollsk@users.noreply.github.com>
This commit is contained in:
@@ -40,7 +40,7 @@ along with Pa11y Dashboard. If not, see <http://www.gnu.org/licenses/>.
|
||||
{{#deleted}}
|
||||
<div class="col-md-12 clearfix" data-test="alert">
|
||||
<div class="alert alert-info">
|
||||
<button aria-hidden="true" data-dismiss="alert" class="close" type="button">×</button>
|
||||
<button data-dismiss="alert" class="close" type="button" aria-label="Close">×</button>
|
||||
<strong>Bye Bye URL</strong>
|
||||
<p>The URL you selected and its associated results have been deleted.</p>
|
||||
</div>
|
||||
|
@@ -19,7 +19,7 @@ along with Pa11y Dashboard. If not, see <http://www.gnu.org/licenses/>.
|
||||
Add a new URL
|
||||
{{/content}}
|
||||
|
||||
<form role="form" class="col-md-12" action="/new" method="post" data-test="new-url-form">
|
||||
<form class="col-md-12" action="/new" method="post" data-test="new-url-form">
|
||||
|
||||
<div class="legend">
|
||||
<h1 class="h2 crunch-top">Add a new URL</h1>
|
||||
|
@@ -15,7 +15,7 @@ You should have received a copy of the GNU General Public License
|
||||
along with Pa11y Dashboard. If not, see <http://www.gnu.org/licenses/>.
|
||||
}}
|
||||
<footer>
|
||||
<div class="footer" role="contentinfo">
|
||||
<div class="footer">
|
||||
<div class="container">
|
||||
<div class="col-md-5">
|
||||
<small>© 2013–{{year}} Team Pa11y.<br/>Pa11y Dashboard is licensed under the GNU General Public License 3.0.<br/>Version {{version}}</small>
|
||||
|
@@ -15,7 +15,7 @@ You should have received a copy of the GNU General Public License
|
||||
along with Pa11y Dashboard. If not, see <http://www.gnu.org/licenses/>.
|
||||
}}
|
||||
<header>
|
||||
<div role="banner" class="header">
|
||||
<div class="header">
|
||||
<div class="container">
|
||||
{{#if isHomePage}}<h1>{{else}}<div class="h1">{{/if}}
|
||||
<a href="/">Pa11y Dashboard</a> -
|
||||
|
@@ -40,12 +40,14 @@ along with Pa11y Dashboard. If not, see <http://www.gnu.org/licenses/>.
|
||||
<h2 class="h4">
|
||||
<span class="glyphicon glyphicon-calendar" aria-hidden="true"></span> {{date-format task.lastResult.date format="DD MMM YYYY"}}
|
||||
</h2>
|
||||
<h3 class="h5 show-stats">Select a date to show stats for:</h3>
|
||||
<ul role="navigation" class="dates-list">
|
||||
{{#results}}
|
||||
<li><a class="" href="{{href}}">{{date-format date format="DD MMM YYYY"}}</a></li>
|
||||
{{/results}}
|
||||
</ul>
|
||||
<h3 class="h5 show-stats" id="dates-navigation">Select a date to show stats for:</h3>
|
||||
<nav aria-labelledby="dates-navigation">
|
||||
<ul class="dates-list">
|
||||
{{#results}}
|
||||
<li><a class="" href="{{href}}">{{date-format date format="DD MMM YYYY"}}</a></li>
|
||||
{{/results}}
|
||||
</ul>
|
||||
</nav>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -61,7 +63,7 @@ along with Pa11y Dashboard. If not, see <http://www.gnu.org/licenses/>.
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-md-9" role="main">
|
||||
<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">
|
||||
<a class="category-list__link" id="errors" href="#errors-list" aria-controls="errors-list" role="tab" data-toggle="tab" data-test="task-errors">
|
||||
@@ -116,10 +118,10 @@ along with Pa11y Dashboard. If not, see <http://www.gnu.org/licenses/>.
|
||||
|
||||
<div class="task-details collapse" id="error-index-{{@index}}">
|
||||
{{#if solutions.length}}
|
||||
<div class="subtitle" id="error-solutions">Solutions:</div>
|
||||
<ul class="list-unstyled solutions-list" role="list" aria-labelledby="error-solutions">
|
||||
<div class="subtitle">Solutions:</div>
|
||||
<ul class="list-unstyled solutions-list">
|
||||
{{#each solutions}}
|
||||
<li class="list-unstyled__item" role="listitem">
|
||||
<li class="list-unstyled__item">
|
||||
<a class="link" href="{{url}}" target="_blank">
|
||||
<span class="glyphicon glyphicon-share" aria-hidden="true"></span> {{title}}
|
||||
</a>
|
||||
@@ -129,10 +131,10 @@ along with Pa11y Dashboard. If not, see <http://www.gnu.org/licenses/>.
|
||||
{{/if}}
|
||||
|
||||
{{#if items.length}}
|
||||
<div class="subtitle" id="error-selectors">Selectors:</div>
|
||||
<ul class="list-unstyled selectors-list" role="list" aria-labelledby="error-selectors">
|
||||
<div class="subtitle">Selectors:</div>
|
||||
<ul class="list-unstyled selectors-list">
|
||||
{{#each items}}
|
||||
<li class="list-unstyled__item" role="listitem">
|
||||
<li class="list-unstyled__item">
|
||||
<span title="Context" data-role="context-popover" data-toggle="popover" data-content="{{context}}">
|
||||
<code class="code">{{selector}}</code>
|
||||
</span>
|
||||
@@ -182,10 +184,10 @@ along with Pa11y Dashboard. If not, see <http://www.gnu.org/licenses/>.
|
||||
|
||||
<div class="task-details collapse" id="warning-index-{{@index}}">
|
||||
{{#if solutions.length}}
|
||||
<div class="subtitle" id="warning-solutions">Solutions:</div>
|
||||
<ul class="list-unstyled solutions-list" role="list" aria-labelledby="warning-solutions">
|
||||
<div class="subtitle">Solutions:</div>
|
||||
<ul class="list-unstyled solutions-list">
|
||||
{{#each solutions}}
|
||||
<li class="list-unstyled__item" role="listitem">
|
||||
<li class="list-unstyled__item">
|
||||
<a class="link" href="{{url}}" target="_blank">
|
||||
<span class="glyphicon glyphicon-share" aria-hidden="true"></span> {{title}}
|
||||
</a>
|
||||
@@ -195,10 +197,10 @@ along with Pa11y Dashboard. If not, see <http://www.gnu.org/licenses/>.
|
||||
{{/if}}
|
||||
|
||||
{{#if items.length}}
|
||||
<div class="subtitle" id="warning-selectors">Selectors:</div>
|
||||
<ul class="list-unstyled selectors-list" role="list" aria-labelledby="warning-selectors">
|
||||
<div class="subtitle">Selectors:</div>
|
||||
<ul class="list-unstyled selectors-list">
|
||||
{{#each items}}
|
||||
<li class="list-unstyled__item" role="listitem">
|
||||
<li class="list-unstyled__item">
|
||||
<span title="Context" data-role="context-popover" data-toggle="popover" data-content="{{context}}">
|
||||
<code class="code">{{selector}}</code>
|
||||
</span>
|
||||
@@ -248,10 +250,10 @@ along with Pa11y Dashboard. If not, see <http://www.gnu.org/licenses/>.
|
||||
|
||||
<div class="task-details collapse" id="notice-index-{{@index}}">
|
||||
{{#if solutions.length}}
|
||||
<div class="subtitle" id="notice-solutions">Solutions:</div>
|
||||
<ul class="list-unstyled solutions-list" role="list" aria-labelledby="notice-solutions">
|
||||
<div class="subtitle">Solutions:</div>
|
||||
<ul class="list-unstyled solutions-list">
|
||||
{{#each solutions}}
|
||||
<li class="list-unstyled__item" role="listitem">
|
||||
<li class="list-unstyled__item">
|
||||
<a class="link" href="{{url}}" target="_blank">
|
||||
<span class="glyphicon glyphicon-share" aria-hidden="true"></span> {{title}}
|
||||
</a>
|
||||
@@ -261,10 +263,10 @@ along with Pa11y Dashboard. If not, see <http://www.gnu.org/licenses/>.
|
||||
{{/if}}
|
||||
|
||||
{{#if items.length}}
|
||||
<div class="subtitle" id="notice-selectors">Selectors:</div>
|
||||
<ul class="list-unstyled selectors-list" role="list" aria-labelledby="notice-selectors">
|
||||
<div class="subtitle">Selectors:</div>
|
||||
<ul class="list-unstyled selectors-list">
|
||||
{{#each items}}
|
||||
<li class="list-unstyled__item" role="listitem">
|
||||
<li class="list-unstyled__item">
|
||||
<span title="Context" data-role="context-popover" data-toggle="popover" data-content="{{context}}">
|
||||
<code class="code">{{selector}}</code>
|
||||
</span>
|
||||
|
@@ -24,11 +24,13 @@ along with Pa11y Dashboard. If not, see <http://www.gnu.org/licenses/>.
|
||||
<div class="run-details task-header clearfix">
|
||||
<div class="col-md-12 clearfix">
|
||||
{{#unless readonly}}
|
||||
<ul class="inline-list" role="menu">
|
||||
<li><a href="/{{task.id}}/edit">Edit this task</a></li>
|
||||
<li><a href="/{{task.id}}/delete">Delete this task</a></li>
|
||||
<li><a href="{{task.hrefRun}}" data-test="run-task">Run Pa11y</a></li>
|
||||
</ul>
|
||||
<nav aria-label="task tools">
|
||||
<ul class="inline-list">
|
||||
<li><a href="/{{task.id}}/edit">Edit this task</a></li>
|
||||
<li><a href="/{{task.id}}/delete">Delete this task</a></li>
|
||||
<li><a href="{{task.hrefRun}}" data-test="run-task">Run Pa11y</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
{{/unless}}
|
||||
{{#if mainResult}}
|
||||
<div class="date">Last run: <strong>{{date-format mainResult.date format="DD MMM YYYY"}}</strong></div>
|
||||
|
@@ -56,12 +56,14 @@ 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>
|
||||
<ul class="dropdown-menu pull-right" role="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>
|
||||
<li><a href="{{href}}/run" data-test="run-task">Run Pa11y</a></li>
|
||||
</ul>
|
||||
<nav aria-label="task tools">
|
||||
<ul class="dropdown-menu pull-right">
|
||||
<li><a href="{{href}}/edit">Edit this task</a></li>
|
||||
<li><a href="{{href}}/delete">Delete this task</a></li>
|
||||
<li class="divider"></li>
|
||||
<li><a href="{{href}}/run" data-test="run-task">Run Pa11y</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
</div>
|
||||
{{/unless}}
|
||||
</li>
|
||||
|
@@ -29,7 +29,7 @@ along with Pa11y Dashboard. If not, see <http://www.gnu.org/licenses/>.
|
||||
</div>
|
||||
{{/edited}}
|
||||
|
||||
<form role="form" class="col-md-12" action="/{{task.id}}/edit" method="post" data-test="edit-url-form">
|
||||
<form class="col-md-12" action="/{{task.id}}/edit" method="post" data-test="edit-url-form">
|
||||
|
||||
<div class="legend">
|
||||
<h1 class="h2 crunch-top">Edit URL</h1>
|
||||
|
@@ -22,7 +22,7 @@ along with Pa11y Dashboard. If not, see <http://www.gnu.org/licenses/>.
|
||||
{{#added}}
|
||||
<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 data-dismiss="alert" class="close" type="button">×</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 aria-hidden="true" data-dismiss="alert" class="close" type="button">×</button>
|
||||
<button data-dismiss="alert" class="close" type="button">×</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 aria-hidden="true" data-dismiss="alert" class="close" type="button">×</button>
|
||||
<button data-dismiss="alert" class="close" type="button">×</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 aria-hidden="true" data-dismiss="alert" class="close" type="button">×</button>
|
||||
<button data-dismiss="alert" class="close" type="button">×</button>
|
||||
<strong>Rule unignored!</strong>
|
||||
<p>
|
||||
You've removed an ignored accessibility rule for this URL.
|
||||
|
Reference in New Issue
Block a user