external-repos/pa11y-dashboard
2
0
Fork 1
mirror of https://github.com/pa11y/pa11y-dashboard.git synced 2025-09-25 06:41:21 +00:00
Code Issues Packages Projects Releases Wiki Activity

Fixed the a11y errors on Pa11y dashboard results and add new url page (#285)

Browse Source 
* 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:
Sangita Mane
2021-05-26 16:38:38 +02:00
committed by GitHub
parent 6d4b8c9676
commit 4c0bd924ab
13 changed files with 67 additions and 54 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
data/standards.js
View File

@@ -112,7 +112,7 @@ function getStandards() {
description: 'The heading structure is not logically nested. This [Node name, eg. h2] element appears to be the primary document heading, so should be an h1 element.' description: 'The heading structure is not logically nested. This [Node name, eg. h2] element appears to be the primary document heading, so should be an h1 element.'
}, },
{ {
name: 'Section508.D.HeadingOrder', name: 'Section508.D.HeadingOrder ',
description: 'The heading structure is not logically nested. This [Node name, eg. h4] element should be an [Expected heading node name, eg. h2] to be properly nested.' description: 'The heading structure is not logically nested. This [Node name, eg. h4] element should be an [Expected heading node name, eg. h2] to be properly nested.'
}, },
{ {
@@ -922,7 +922,7 @@ function getStandards() {
description: 'This element\'s text is placed on a background image. Ensure the contrast ratio between the text and all covered parts of the image are at least 4.5:1.' description: 'This element\'s text is placed on a background image. Ensure the contrast ratio between the text and all covered parts of the image are at least 4.5:1.'
}, },
{ {
name: 'WCAG2AA.Principle1.Guideline1_4.1_4_3.G145', name: 'WCAG2AA.Principle1.Guideline1_4.1_4_3.G145 ',
description: 'This element\'s text is placed on a background image. Ensure the contrast ratio between the text and all covered parts of the image are at least 3:1.' description: 'This element\'s text is placed on a background image. Ensure the contrast ratio between the text and all covered parts of the image are at least 3:1.'
}, },
{ {
@@ -1427,11 +1427,11 @@ function getStandards() {
description: 'This element has insufficient contrast at this conformance level. Expected a contrast ratio of at least 4.5:1, but text in this element has a contrast ratio of /{value/}. Recommendation: /{colour recommendations/}.' description: 'This element has insufficient contrast at this conformance level. Expected a contrast ratio of at least 4.5:1, but text in this element has a contrast ratio of /{value/}. Recommendation: /{colour recommendations/}.'
}, },
{ {
name: 'WCAG2AAA.Principle1.Guideline1_4.1_4_6.G17', name: 'WCAG2AAA.Principle1.Guideline1_4.1_4_6.G17 ',
description: 'This element\'s text is placed on a background image. Ensure the contrast ratio between the text and all covered parts of the image are at least 7:1.' description: 'This element\'s text is placed on a background image. Ensure the contrast ratio between the text and all covered parts of the image are at least 7:1.'
}, },
{ {
name: 'WCAG2AAA.Principle1.Guideline1_4.1_4_6.G18', name: 'WCAG2AAA.Principle1.Guideline1_4.1_4_6.G18 ',
description: 'This element\'s text is placed on a background image. Ensure the contrast ratio between the text and all covered parts of the image are at least 4.5:1.' description: 'This element\'s text is placed on a background image. Ensure the contrast ratio between the text and all covered parts of the image are at least 4.5:1.'
}, },
{ {

2
public/css/site.min.css vendored
View File

File diff suppressed because one or more lines are too long

9
public/less/site.less
View File

@@ -175,7 +175,6 @@
text-transform: uppercase; text-transform: uppercase;
display: block; display: block;
line-height: 1.4; line-height: 1.4;
.opacity(.8);
} }
// Stats box colours // Stats box colours
@@ -753,3 +752,11 @@ ul.date-links {
border-top-right-radius: 0; border-top-right-radius: 0;
} }
} }
/*close button on success alert*/
.alert-success {
.close {
color: #fff;
opacity: 1;
};
}

6
public/less/variables-flatly.less
View File

@@ -18,9 +18,9 @@
// ------------------------- // -------------------------
@brand-primary: #2C3E50; @brand-primary: #2C3E50;
@brand-success: #00806F; @brand-success: #006053;
@brand-warning: #A86700; @brand-warning: #b24d04;
@brand-danger: #D83D2D; @brand-danger: #c92a2a;
@brand-info: #177BBE; @brand-info: #177BBE;
// Scaffolding // Scaffolding

2
view/index.html
View File

@@ -40,7 +40,7 @@ along with Pa11y Dashboard. If not, see <http://www.gnu.org/licenses/>.
{{#deleted}} {{#deleted}}
<div class="col-md-12 clearfix" data-test="alert"> <div class="col-md-12 clearfix" data-test="alert">
<div class="alert alert-info"> <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> <strong>Bye Bye URL</strong>
<p>The URL you selected and its associated results have been deleted.</p> <p>The URL you selected and its associated results have been deleted.</p>
</div> </div>

2
view/new.html
View File

@@ -19,7 +19,7 @@ along with Pa11y Dashboard. If not, see <http://www.gnu.org/licenses/>.
Add a new URL Add a new URL
{{/content}} {{/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"> <div class="legend">
<h1 class="h2 crunch-top">Add a new URL</h1> <h1 class="h2 crunch-top">Add a new URL</h1>

2
view/partial/page-footer.html
View File

@@ -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/>. along with Pa11y Dashboard. If not, see <http://www.gnu.org/licenses/>.
}} }}
<footer> <footer>
<div class="footer" role="contentinfo"> <div class="footer">
<div class="container"> <div class="container">
<div class="col-md-5"> <div class="col-md-5">
<small>&copy; 2013–{{year}} Team Pa11y.<br/>Pa11y Dashboard is licensed under the GNU General Public License 3.0.<br/>Version {{version}}</small> <small>&copy; 2013–{{year}} Team Pa11y.<br/>Pa11y Dashboard is licensed under the GNU General Public License 3.0.<br/>Version {{version}}</small>

2
view/partial/page-header.html
View File

@@ -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/>. along with Pa11y Dashboard. If not, see <http://www.gnu.org/licenses/>.
}} }}
<header> <header>
<div role="banner" class="header"> <div class="header">
<div class="container"> <div class="container">
{{#if isHomePage}}<h1>{{else}}<div class="h1">{{/if}} {{#if isHomePage}}<h1>{{else}}<div class="h1">{{/if}}
<a href="/">Pa11y Dashboard</a> - <a href="/">Pa11y Dashboard</a> -

52
view/partial/result.html
View File

@@ -40,12 +40,14 @@ along with Pa11y Dashboard. If not, see <http://www.gnu.org/licenses/>.
<h2 class="h4"> <h2 class="h4">
<span class="glyphicon glyphicon-calendar" aria-hidden="true"></span>&nbsp;&nbsp;{{date-format task.lastResult.date format="DD MMM YYYY"}} <span class="glyphicon glyphicon-calendar" aria-hidden="true"></span>&nbsp;&nbsp;{{date-format task.lastResult.date format="DD MMM YYYY"}}
</h2> </h2>
<h3 class="h5 show-stats">Select a date to show stats for:</h3> <h3 class="h5 show-stats" id="dates-navigation">Select a date to show stats for:</h3>
<ul role="navigation" class="dates-list"> <nav aria-labelledby="dates-navigation">
{{#results}} <ul class="dates-list">
<li><a class="" href="{{href}}">{{date-format date format="DD MMM YYYY"}}</a></li> {{#results}}
{{/results}} <li><a class="" href="{{href}}">{{date-format date format="DD MMM YYYY"}}</a></li>
</ul> {{/results}}
</ul>
</nav>
</div> </div>
</div> </div>
</div> </div>
@@ -61,7 +63,7 @@ along with Pa11y Dashboard. If not, see <http://www.gnu.org/licenses/>.
</div> </div>
</div> </div>
<div class="col-md-9" role="main"> <div class="col-md-9">
<ul class="nav nav-tabs category-list" role="tablist"> <ul class="nav nav-tabs category-list" role="tablist">
<li class="category-list__item category-list__item_type_error active" role="presentation"> <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"> <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}}"> <div class="task-details collapse" id="error-index-{{@index}}">
{{#if solutions.length}} {{#if solutions.length}}
<div class="subtitle" id="error-solutions">Solutions:</div> <div class="subtitle">Solutions:</div>
<ul class="list-unstyled solutions-list" role="list" aria-labelledby="error-solutions"> <ul class="list-unstyled solutions-list">
{{#each solutions}} {{#each solutions}}
<li class="list-unstyled__item" role="listitem"> <li class="list-unstyled__item">
<a class="link" href="{{url}}" target="_blank"> <a class="link" href="{{url}}" target="_blank">
<span class="glyphicon glyphicon-share" aria-hidden="true"></span>&nbsp;{{title}} <span class="glyphicon glyphicon-share" aria-hidden="true"></span>&nbsp;{{title}}
</a> </a>
@@ -129,10 +131,10 @@ along with Pa11y Dashboard. If not, see <http://www.gnu.org/licenses/>.
{{/if}} {{/if}}
{{#if items.length}} {{#if items.length}}
<div class="subtitle" id="error-selectors">Selectors:</div> <div class="subtitle">Selectors:</div>
<ul class="list-unstyled selectors-list" role="list" aria-labelledby="error-selectors"> <ul class="list-unstyled selectors-list">
{{#each items}} {{#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}}"> <span title="Context" data-role="context-popover" data-toggle="popover" data-content="{{context}}">
<code class="code">{{selector}}</code> <code class="code">{{selector}}</code>
</span> </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}}"> <div class="task-details collapse" id="warning-index-{{@index}}">
{{#if solutions.length}} {{#if solutions.length}}
<div class="subtitle" id="warning-solutions">Solutions:</div> <div class="subtitle">Solutions:</div>
<ul class="list-unstyled solutions-list" role="list" aria-labelledby="warning-solutions"> <ul class="list-unstyled solutions-list">
{{#each solutions}} {{#each solutions}}
<li class="list-unstyled__item" role="listitem"> <li class="list-unstyled__item">
<a class="link" href="{{url}}" target="_blank"> <a class="link" href="{{url}}" target="_blank">
<span class="glyphicon glyphicon-share" aria-hidden="true"></span>&nbsp;{{title}} <span class="glyphicon glyphicon-share" aria-hidden="true"></span>&nbsp;{{title}}
</a> </a>
@@ -195,10 +197,10 @@ along with Pa11y Dashboard. If not, see <http://www.gnu.org/licenses/>.
{{/if}} {{/if}}
{{#if items.length}} {{#if items.length}}
<div class="subtitle" id="warning-selectors">Selectors:</div> <div class="subtitle">Selectors:</div>
<ul class="list-unstyled selectors-list" role="list" aria-labelledby="warning-selectors"> <ul class="list-unstyled selectors-list">
{{#each items}} {{#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}}"> <span title="Context" data-role="context-popover" data-toggle="popover" data-content="{{context}}">
<code class="code">{{selector}}</code> <code class="code">{{selector}}</code>
</span> </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}}"> <div class="task-details collapse" id="notice-index-{{@index}}">
{{#if solutions.length}} {{#if solutions.length}}
<div class="subtitle" id="notice-solutions">Solutions:</div> <div class="subtitle">Solutions:</div>
<ul class="list-unstyled solutions-list" role="list" aria-labelledby="notice-solutions"> <ul class="list-unstyled solutions-list">
{{#each solutions}} {{#each solutions}}
<li class="list-unstyled__item" role="listitem"> <li class="list-unstyled__item">
<a class="link" href="{{url}}" target="_blank"> <a class="link" href="{{url}}" target="_blank">
<span class="glyphicon glyphicon-share" aria-hidden="true"></span>&nbsp;{{title}} <span class="glyphicon glyphicon-share" aria-hidden="true"></span>&nbsp;{{title}}
</a> </a>
@@ -261,10 +263,10 @@ along with Pa11y Dashboard. If not, see <http://www.gnu.org/licenses/>.
{{/if}} {{/if}}
{{#if items.length}} {{#if items.length}}
<div class="subtitle" id="notice-selectors">Selectors:</div> <div class="subtitle">Selectors:</div>
<ul class="list-unstyled selectors-list" role="list" aria-labelledby="notice-selectors"> <ul class="list-unstyled selectors-list">
{{#each items}} {{#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}}"> <span title="Context" data-role="context-popover" data-toggle="popover" data-content="{{context}}">
<code class="code">{{selector}}</code> <code class="code">{{selector}}</code>
</span> </span>

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

@@ -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="run-details task-header clearfix">
<div class="col-md-12 clearfix"> <div class="col-md-12 clearfix">
{{#unless readonly}} {{#unless readonly}}
<ul class="inline-list" role="menu"> <nav aria-label="task tools">
<li><a href="/{{task.id}}/edit">Edit this task</a></li> <ul class="inline-list">
<li><a href="/{{task.id}}/delete">Delete this task</a></li> <li><a href="/{{task.id}}/edit">Edit this task</a></li>
<li><a href="{{task.hrefRun}}" data-test="run-task">Run Pa11y</a></li> <li><a href="/{{task.id}}/delete">Delete this task</a></li>
</ul> <li><a href="{{task.hrefRun}}" data-test="run-task">Run Pa11y</a></li>
</ul>
</nav>
{{/unless}} {{/unless}}
{{#if mainResult}} {{#if mainResult}}
<div class="date">Last run: <strong>{{date-format mainResult.date format="DD MMM YYYY"}}</strong></div> <div class="date">Last run: <strong>{{date-format mainResult.date format="DD MMM YYYY"}}</strong></div>

14
view/partial/tasks.html
View File

@@ -56,12 +56,14 @@ along with Pa11y Dashboard. If not, see <http://www.gnu.org/licenses/>.
{{#unless ../readonly}} {{#unless ../readonly}}
<div class="btn-group options-button text-right"> <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> <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"> <nav aria-label="task tools">
<li><a href="{{href}}/edit">Edit this task</a></li> <ul class="dropdown-menu pull-right">
<li><a href="{{href}}/delete">Delete this task</a></li> <li><a href="{{href}}/edit">Edit this task</a></li>
<li class="divider"></li> <li><a href="{{href}}/delete">Delete this task</a></li>
<li><a href="{{href}}/run" data-test="run-task">Run Pa11y</a></li> <li class="divider"></li>
</ul> <li><a href="{{href}}/run" data-test="run-task">Run Pa11y</a></li>
</ul>
</nav>
</div> </div>
{{/unless}} {{/unless}}
</li> </li>

2
view/task/edit.html
View File

@@ -29,7 +29,7 @@ along with Pa11y Dashboard. If not, see <http://www.gnu.org/licenses/>.
</div> </div>
{{/edited}} {{/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"> <div class="legend">
<h1 class="h2 crunch-top">Edit URL</h1> <h1 class="h2 crunch-top">Edit URL</h1>

8
view/task/index.html
View File

@@ -22,7 +22,7 @@ along with Pa11y Dashboard. If not, see <http://www.gnu.org/licenses/>.
{{#added}} {{#added}}
<div class="col-md-12 clearfix" data-test="alert"> <div class="col-md-12 clearfix" data-test="alert">
<div class="alert alert-success"> <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> <strong>Whoop whoop!</strong>
<p>Your new URL has been added.</p> <p>Your new URL has been added.</p>
</div> </div>
@@ -32,7 +32,7 @@ along with Pa11y Dashboard. If not, see <http://www.gnu.org/licenses/>.
{{#running}} {{#running}}
<div class="col-md-12 clearfix" data-test="alert"> <div class="col-md-12 clearfix" data-test="alert">
<div class="alert alert-success"> <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> <strong>New results incoming!</strong>
<p> <p>
New results are being generated for this URL in the background. 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}} {{#ruleIgnored}}
<div class="col-md-12 clearfix" data-test="alert"> <div class="col-md-12 clearfix" data-test="alert">
<div class="alert alert-success"> <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> <strong>Rule ignored!</strong>
<p> <p>
You've ignored an accessibility rule for this URL. 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}} {{#ruleUnignored}}
<div class="col-md-12 clearfix" data-test="alert"> <div class="col-md-12 clearfix" data-test="alert">
<div class="alert alert-success"> <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> <strong>Rule unignored!</strong>
<p> <p>
You've removed an ignored accessibility rule for this URL. You've removed an ignored accessibility rule for this URL.