Bump minimatch and mocha

Bumps [minimatch](https://github.com/isaacs/minimatch) to 3.1.2 and updates ancestor dependency [mocha](https://github.com/mochajs/mocha). These dependencies need to be updated together.


Updates `minimatch` from 3.0.4 to 3.1.2
- [Changelog](https://github.com/isaacs/minimatch/blob/main/changelog.md)
- [Commits](https://github.com/isaacs/minimatch/compare/v3.0.4...v3.1.2)

Updates `mocha` from 7.2.0 to 10.2.0
- [Release notes](https://github.com/mochajs/mocha/releases)
- [Changelog](https://github.com/mochajs/mocha/blob/master/CHANGELOG.md)
- [Commits](https://github.com/mochajs/mocha/compare/v7.2.0...v10.2.0)

---
updated-dependencies:
- dependency-name: minimatch
  dependency-type: indirect
- dependency-name: mocha
  dependency-type: direct:development
...

Signed-off-by: dependabot[bot] <support@github.com>

.editorconfig

@@ -5,9 +5,19 @@ root = true
 [*]
 charset = utf-8
 end_of_line = lf
-insert_final_newline = true
+indent_size = 4
 indent_style = tab
+insert_final_newline = true
 trim_trailing_whitespace = true
 
 [*.md]
+indent_style = spaces
 trim_trailing_whitespace = false
+
+[*.yml]
+indent_style = space
+indent_size = 2
+
+[package.json]
+indent_style = space
+indent_size = 2

.github/issue_template.md

@@ -0,0 +1,20 @@
+**This repository's issues are reserved for feature requests, bug reports, and other issues with Pa11y Dashboard itself.**
+
+If you need help using Pa11y Dashboard, we recommend using [Stack Overflow](https://stackoverflow.com/questions/tagged/pa11y).
+
+For a bug report, please use the template below. To keep the backlog clean and actionable, issues may be immediately closed if they do not follow one this template.
+
+---
+
+## Expected behaviour
+
+
+## Actual behaviour
+
+
+## Steps to reproduce
+
+
+## Environment
+
+_Please specify the versions of Pa11y Dashboard, MongoDB, and Node.js that can be sued to reproduce this issue._

.github/workflows/tests.yml

@@ -1,19 +1,14 @@
-# This workflow will do a clean install of node dependencies, build the source code and run tests.
-# For more information see: https://help.github.com/actions/language-and-framework-guides/using-nodejs-with-github-actions
-
 name: Build and lint
 
 on:
   push:
-    branches: # Run actions when code is committed to these branches
+    branches:
-      - master
+      - main
   pull_request:
-    branches: # Run actions when a PR is pushed based on one of these branches
-      - master
 
 jobs:
   checkout_and_test:
-    runs-on: ubuntu-latest
+    runs-on: ubuntu-20.04
     strategy:
       matrix:
         include:

CHANGELOG.md

@@ -1,5 +1,10 @@
 # Changelog
 
+## 4.2.0 (2022-03-30)
+
+* Add request logging for easier debugging
+* Dependencies update
+
 ## 4.1.0 (2021-11-26)
 
 * Add support for new WCAG 2.1 rules and remove all references to Section 508.

app.js

@@ -20,6 +20,8 @@ const createClient = require('pa11y-webservice-client-node');
 const EventEmitter = require('events').EventEmitter;
 const express = require('express');
 const hbs = require('express-hbs');
+const morgan = require('morgan');
+const {nanoid} = require('nanoid');
 const http = require('http');
 const pkg = require('./package.json');
 
@@ -35,14 +37,57 @@ function initApp(config, callback) {
 	}
 
 	const app = new EventEmitter();
+
 	app.address = null;
 	app.express = express();
 	app.server = http.createServer(app.express);
 	app.webservice = createClient(webserviceUrl);
 
+	loadMiddleware(app);
+
+	// View engine
+	loadViewEngine(app, config);
+
+	// Load routes
+	loadRoutes(app, config);
+
+	// Error handling
+	loadErrorHandling(app, config, callback);
+}
+
+// Get default configurations
+function defaultConfig(config) {
+	if (typeof config.noindex !== 'boolean') {
+		config.noindex = true;
+	}
+	if (typeof config.readonly !== 'boolean') {
+		config.readonly = false;
+	}
+	return config;
+}
+
+function loadMiddleware(app) {
 	// Compression
 	app.express.use(compression());
 
+	// Adds an ID to every request, used later for logging
+	app.express.use(addRequestId);
+
+	// Logging middleware
+	morgan.token('id', request => {
+		return request.id;
+	});
+
+	// Log the start of all HTTP requests
+	const startLog = '[:date[iso] #:id] Started :method :url for :remote-addr';
+	// Immediate: true is required to log the request
+	//  before the response happens
+	app.express.use(morgan(startLog, {immediate: true}));
+
+	// Log the end of all HTTP requests
+	const endLog = '[:date[iso] #:id] Completed :status :res[content-length] in :response-time ms';
+	app.express.use(morgan(endLog));
+
 	// Public files
 	app.express.use(express.static(`${__dirname}/public`, {
 		maxAge: (process.env.NODE_ENV === 'production' ? 604800000 : 0)
@@ -53,8 +98,9 @@ function initApp(config, callback) {
 	app.express.use(bodyParser.urlencoded({
 		extended: true
 	}));
+}
 
-	// View engine
+function loadViewEngine(app, config) {
 	app.express.engine('html', hbs.express4({
 		extname: '.html',
 		contentHelperName: 'content',
@@ -89,10 +135,16 @@ function initApp(config, callback) {
 		response.locals.host = request.hostname;
 		next();
 	});
+}
 
-	// Load routes
+function loadRoutes(app, config) {
+	// Because there's some overlap between the different routes,
+	//  they have to be loaded in a specific order in order to avoid
+	//  passing mongo the wrong id which would result in
+	//  "ObjectID generation failed." errors (e.g. #277)
 	require('./route/index')(app);
 	require('./route/result/download')(app);
+
 	if (!config.readonly) {
 		require('./route/new')(app);
 		require('./route/task/delete')(app);
@@ -101,12 +153,14 @@ function initApp(config, callback) {
 		require('./route/task/ignore')(app);
 		require('./route/task/unignore')(app);
 	}
+
 	// Needs to be loaded after `/route/new`
 	require('./route/task/index')(app);
 	// Needs to be loaded after `/route/task/edit`
 	require('./route/result/index')(app);
+}
 
-	// Error handling
+function loadErrorHandling(app, config, callback) {
 	app.express.get('*', (request, response) => {
 		response.status(404);
 		response.render('404');
@@ -129,16 +183,14 @@ function initApp(config, callback) {
 		app.address = `http://${address.address}:${address.port}`;
 		callback(error, app);
 	});
-
 }
 
-// Get default configurations
+// Express middleware
-function defaultConfig(config) {
+function addRequestId(request, response, next) {
-	if (typeof config.noindex !== 'boolean') {
+	// Create a random request (nano)id, 10 characters long
-		config.noindex = true;
+	// Nano ids are [0-9A-Za-z_-] so chance of collision is 1 in 64^10
-	}
+	// If a site has so much traffic that this chance is too high
-	if (typeof config.readonly !== 'boolean') {
+	//  we probably have worse things to worry about
-		config.readonly = false;
+	request.id = nanoid(10);
-	}
+	next();
-	return config;
 }

data/standards.js

@@ -805,7 +805,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.'
 				},
 				{
-					name: 'WCAG2AA.Principle1.Guideline1_4.1_4_3.G145 ',
+					name: 'WCAG2AA.Principle1.Guideline1_4.1_4_3.G1451',
 					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.'
 				},
 				{
@@ -1430,11 +1430,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/}.'
 				},
 				{
-					name: 'WCAG2AAA.Principle1.Guideline1_4.1_4_6.G17 ',
+					name: 'WCAG2AAA.Principle1.Guideline1_4.1_4_6.G17-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-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.'
 				},
 				{

index.js

@@ -33,8 +33,8 @@ require('./app')(config, (error, app) => {
 	console.log(kleur.grey('mode: %s'), process.env.NODE_ENV);
 	console.log(kleur.grey('uri:  %s'), app.address);
 
-	app.on('route-error', error => {
+	app.on('route-error', routeError => {
-		const stack = (error.stack ? error.stack.split('\n') : [error.message]);
+		const stack = (routeError.stack ? routeError.stack.split('\n') : [routeError.message]);
 		const msg = kleur.red(stack.shift());
 		console.error('');
 		console.error(msg);
@@ -43,9 +43,9 @@ require('./app')(config, (error, app) => {
 
 	// Start the webservice if required
 	if (typeof config.webservice === 'object') {
-		require('pa11y-webservice')(config.webservice, (error, webservice) => {
+		require('pa11y-webservice')(config.webservice, (webserviceError, webservice) => {
-			if (error) {
+			if (webserviceError) {
-				console.error(error.stack);
+				console.error(webserviceError.stack);
 				process.exit(1);
 			}
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "pa11y-dashboard",
-  "version": "4.1.0",
+  "version": "4.2.0",
   "private": true,
   "description": "Pa11y Dashboard is a visual web interface to the Pa11y accessibility reporter",
   "keywords": [
@@ -24,24 +24,26 @@
     "node": ">=12 <16"
   },
   "dependencies": {
-    "body-parser": "~1.19.0",
+    "body-parser": "~1.19.2",
     "compression": "~1.7.4",
-    "express": "~4.17.1",
+    "express": "~4.17.3",
     "express-hbs": "~2.4.0",
     "http-headers": "~3.0.2",
     "kleur": "~4.1.4",
     "moment": "~2.29.1",
-    "pa11y-webservice": "~4.0.0",
+    "morgan": "~1.10.0",
+    "nanoid": "~3.3.2",
+    "pa11y-webservice": "~4.0.1",
     "pa11y-webservice-client-node": "~3.0.0",
-    "underscore": "~1.13.1"
+    "underscore": "~1.13.2"
   },
   "devDependencies": {
     "bower": "^1.8.13",
     "cheerio": "^1.0.0-rc.10",
     "eslint": "^7.27.0",
     "less": "^3.11.1",
-    "mocha": "^8.4.0",
+    "mocha": "^10.2.0",
-    "pa11y-lint-config": "^1.2.1",
+    "pa11y-lint-config": "^2.0.0",
     "proclaim": "^3.6.0",
     "request": "^2.88.2",
     "uglify-js": "^3.11.0"

public/js/vendor/bootstrap/_layouts/default.html

@@ -43,9 +43,9 @@
             </ul>
           </div>
         </div>
-        <div class="col-md-9" role="main">
+        <main class="col-md-9" role="main">
           {{ content }}
-        </div>
+        </main>
       </div>
 
     </div>

public/js/vendor/bootstrap/js/tab.js

@@ -68,10 +68,12 @@
     function next() {
       $active
         .removeClass('active')
+        .attr('aria-selected', false)
         .find('> .dropdown-menu > .active')
         .removeClass('active')
 
       element.addClass('active')
+      element.attr('aria-selected', true)
 
       if (transition) {
         element[0].offsetWidth // reflow for transition

public/js/vendor/bootstrap/js/tests/unit/alert.js

@@ -32,7 +32,7 @@ $(function () {
         $.support.transition = false
 
         var alertHTML = '<div class="alert-message warning fade in">'
-          + '<a class="close" href="#" data-dismiss="alert">×</a>'
+          + '<a class="close" href="#" data-dismiss="alert" aria-label="Close">×</a>'
           + '<p><strong>Holy guacamole!</strong> Best check yo self, you\'re not looking too good.</p>'
           + '</div>'
           , alert = $(alertHTML).appendTo('#qunit-fixture').alert()

public/less/site.less

@@ -95,6 +95,11 @@
 	li a {
 		text-indent: -20px;
 	}
+	ul.options-menu  {
+		list-style: none;
+		padding: 5px 0;
+		margin: 2px 10px 0 0;
+	}
 }
 
 .dropdown-toggle {
@@ -262,6 +267,7 @@
 }
 
 /* Task details page*/
+
 .task-header {
 	margin-bottom: 30px;
 
@@ -502,6 +508,10 @@ ul.date-links {
 		padding: 0;
 		margin: 0;
 	}
+	.dates-list > li:first-child a {
+		font-weight: bold;
+		font-size: 16px;
+	}
 
 	.dates-list a {
 		color: #fff;
@@ -709,6 +719,16 @@ ul.date-links {
 	}
 }
 
+/* Edit task page */
+
+#skipRules {
+	position: absolute;
+	left: -999px;
+}
+#skipRules:focus {
+	position: static;
+}
+
 /* inline link list */
 
 .inline-list {
@@ -760,3 +780,7 @@ ul.date-links {
 		opacity: 1;
 	};
 }
+
+section {
+	margin: 1em 0;
+}

route/new.js

@@ -1,3 +1,4 @@
+/* eslint-disable complexity */
 // This file is part of Pa11y Dashboard.
 //
 // Pa11y Dashboard is free software: you can redistribute it and/or modify
@@ -30,42 +31,21 @@ function route(app) {
 			return standard;
 		});
 		response.render('new', {
-			standards: standards,
+			standards,
 			isNewTaskPage: true
 		});
 	});
 
 	app.express.post('/new', (request, response) => {
 
-		let parsedActions;
+		const parsedActions = parseActions(request.body.actions);
-		if (request.body.actions) {
-			parsedActions = request.body.actions.split(/[\r\n]+/)
-				.map(action => {
-					return action.trim();
-				})
-				.filter(action => {
-					return Boolean(action);
-				});
-		}
-
 		let parsedHeaders;
+
 		if (request.body.headers) {
 			parsedHeaders = httpHeaders(request.body.headers, true);
 		}
 
-		const newTask = {
+		const newTask = createNewTask(request, parsedActions, parsedHeaders);
-			name: request.body.name,
-			url: request.body.url,
-			standard: request.body.standard,
-			ignore: request.body.ignore || [],
-			timeout: request.body.timeout || undefined,
-			wait: request.body.wait || undefined,
-			actions: parsedActions,
-			username: request.body.username || undefined,
-			password: request.body.password || undefined,
-			headers: parsedHeaders,
-			hideElements: request.body.hideElements || undefined
-		};
 
 		app.webservice.tasks.create(newTask, (error, task) => {
 			if (error) {
@@ -84,8 +64,8 @@ function route(app) {
 				newTask.actions = request.body.actions;
 				newTask.headers = request.body.headers;
 				return response.render('new', {
-					error: error,
+					error,
-					standards: standards,
+					standards,
 					task: newTask
 				});
 			}
@@ -94,3 +74,32 @@ function route(app) {
 	});
 
 }
+
+function parseActions(actions) {
+	if (actions) {
+		return actions.split(/[\r\n]+/)
+			.map(action => {
+				return action.trim();
+			})
+			.filter(action => {
+				return Boolean(action);
+			});
+	}
+}
+
+/* eslint-disable complexity */
+function createNewTask(request, actions, headers) {
+	return {
+		name: request.body.name,
+		url: request.body.url,
+		standard: request.body.standard,
+		ignore: request.body.ignore || [],
+		timeout: request.body.timeout || undefined,
+		wait: request.body.wait || undefined,
+		actions,
+		username: request.body.username || undefined,
+		password: request.body.password || undefined,
+		headers,
+		hideElements: request.body.hideElements || undefined
+	};
+}

route/result/download.js

@@ -29,8 +29,8 @@ function route(app) {
 			app.webservice
 				.task(request.params.id)
 				.result(request.params.rid)
-				.get({full: true}, (error, result) => {
+				.get({full: true}, (webserviceError, result) => {
-					if (error) {
+					if (webserviceError) {
 						return next('route');
 					}
 					response.locals.task = task;

route/result/index.js

@@ -30,8 +30,8 @@ function route(app) {
 			app.webservice
 				.task(request.params.id)
 				.result(request.params.rid)
-				.get({full: true}, (error, result) => {
+				.get({full: true}, (webserviceError, result) => {
-					if (error) {
+					if (webserviceError) {
 						return next();
 					}
 					response.render('result', {

route/task/edit.js

@@ -43,13 +43,15 @@ function route(app) {
 			task.actions = (task.actions ? task.actions.join('\n') : '');
 			response.render('task/edit', {
 				edited: (typeof request.query.edited !== 'undefined'),
-				standards: standards,
+				standards,
 				task: presentTask(task),
 				isTaskSubPage: true
 			});
 		});
 	});
 
+	/* eslint-disable complexity */
+	/* eslint-disable max-statements */
 	app.express.post('/:id/edit', (request, response, next) => {
 		app.webservice.task(request.params.id).get({}, (error, task) => {
 			if (error) {
@@ -57,9 +59,11 @@ function route(app) {
 			}
 			const originalActions = request.body.actions;
 			const originalHeaders = request.body.headers;
+
 			request.body.ignore = request.body.ignore || [];
 			request.body.timeout = request.body.timeout || undefined;
 			request.body.wait = request.body.wait || undefined;
+
 			if (request.body.actions) {
 				request.body.actions = request.body.actions.split(/[\r\n]+/)
 					.map(action => {
@@ -69,15 +73,18 @@ function route(app) {
 						return Boolean(action);
 					});
 			}
+
 			if (!request.body.actions) {
 				request.body.actions = [];
 			}
+
 			request.body.username = request.body.username || undefined;
 			request.body.password = request.body.password || undefined;
 			request.body.hideElements = request.body.hideElements || undefined;
 			request.body.headers = httpHeaders(request.body.headers || '', true);
-			app.webservice.task(request.params.id).edit(request.body, error => {
+
-				if (error) {
+			app.webservice.task(request.params.id).edit(request.body, webserviceError => {
+				if (webserviceError) {
 					task.name = request.body.name;
 					task.ignore = request.body.ignore;
 					task.timeout = request.body.timeout;
@@ -100,9 +107,9 @@ function route(app) {
 						return standard;
 					});
 					return response.render('task/edit', {
-						error: error,
+						webserviceError,
-						standards: standards,
+						standards,
-						task: task,
+						task,
 						isTaskSubPage: true
 					});
 				}

route/task/index.js

@@ -28,9 +28,9 @@ function route(app) {
 			if (error) {
 				return next();
 			}
-			app.webservice.task(request.params.id).results({}, (error, results) => {
+			app.webservice.task(request.params.id).results({}, (webserviceError, results) => {
-				if (error) {
+				if (webserviceError) {
-					return next(error);
+					return next(webserviceError);
 				}
 				const presentedResults = presentResultList(results.map(presentResult));
 				response.render('task', {

view/layout/default.html

@@ -47,19 +47,17 @@ along with Pa11y Dashboard.  If not, see <http://www.gnu.org/licenses/>.
 
 	{{> breadcrumb}}
 
-	<div class="container">
+	<main class="container" >
 		{{#if readonly}}
 			<div class="row readonly-mode">
 		{{else}}
 			<div class="row">
 		{{/if}}
-			<section>
+			<div class="section">
-				<div class="section" role="main">
 				{{{body}}}
 			</div>
-			</section>
-		</div>
 		</div>
+	</main>
 
 	{{> page-footer}}
 

view/new.html

@@ -78,8 +78,8 @@ along with Pa11y Dashboard.  If not, see <http://www.gnu.org/licenses/>.
 		<div class="row">
 			<div class="col-md-4 col-sm-4 col-xs-6">
 				<label class="control-label" for="new-task-wait">Wait (milliseconds)</label>
-				<input class="form-control" id="new-task-wait" type="text" placeholder="E.g. 3000" name="wait" value="{{task.wait}}"/>
+				<input class="form-control" id="new-task-wait" type="text" placeholder="E.g. 3000" name="wait" value="{{task.wait}}" aria-describedby="int3"/>
-				<em>(Note: default wait time is 0ms)</em>
+				<em id="int3">(Note: default wait time is 0ms)</em>
 			</div>
 		</div>
 	</div>
@@ -110,7 +110,7 @@ along with Pa11y Dashboard.  If not, see <http://www.gnu.org/licenses/>.
 		<div class="row">
 			<div class="col-md-4 col-sm-4 col-xs-6">
 				<label class="control-label" for="new-task-password">Password</label>
-				<input class="form-control" id="new-task-password" type="text" name="password" value="{{task.password}}"/> <em>(Note: this will be stored and displayed in plain-text - only suitable for use in a secure environment)</em>
+				<input class="form-control" id="new-task-password" type="text" name="password" value="{{task.password}}" aria-describedby="pwd"/> <span id="pwd"><em>(Note: this will be stored and displayed in plain-text - only suitable for use in a secure environment)</em></span>
 			</div>
 		</div>
 	</div>
@@ -119,8 +119,8 @@ along with Pa11y Dashboard.  If not, see <http://www.gnu.org/licenses/>.
 		<div class="row">
 			<div class="col-md-4 col-sm-4 col-xs-6">
 				<label class="control-label" for="new-task-headers">HTTP Headers</label>
-				<textarea class="form-control" id="new-task-headers" name="headers" placeholder="Cookie: foo=bar">{{task.headers}}</textarea>
+				<textarea class="form-control" id="new-task-headers" name="headers" placeholder="Cookie: foo=bar" aria-describedby="int1">{{task.headers}}</textarea>
-				<em>(As key/value pairs, separated by newlines/colons)</em>
+				<em id="int1">(As key/value pairs, separated by newlines/colons)</em>
 			</div>
 		</div>
 	</div>
@@ -129,7 +129,8 @@ along with Pa11y Dashboard.  If not, see <http://www.gnu.org/licenses/>.
 		<div class="row">
 			<div class="col-md-4 col-sm-4 col-xs-6">
 				<label class="control-label" for="new-task-hide-elements">Hide Elements</label>
-				<input class="form-control" id="new-task-hide-elements" type="text" name="hideElements" value="{{task.hideElements}}" placeholder=".advert, #modal, div[aria-role=presentation]"/> <em>(CSS selector)</em>
+				<input class="form-control" id="new-task-hide-elements" type="text" name="hideElements" value="{{task.hideElements}}" placeholder=".advert, #modal, div[aria-role=presentation]" aria-describedby="int2"/>
+				<em id="int2">(CSS selector)</em>
 			</div>
 		</div>
 	</div>

view/partial/breadcrumb.html

@@ -15,9 +15,10 @@ 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}}
@@ -36,5 +37,5 @@ along with Pa11y Dashboard.  If not, see <http://www.gnu.org/licenses/>.
 				</ol>
 			</div>
 		</div>
-	</div>
+	</nav>
 {{/unless}}

view/partial/graph.html

@@ -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>
@@ -59,10 +58,10 @@ along with Pa11y Dashboard.  If not, see <http://www.gnu.org/licenses/>.
 			</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>
+
+	<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>
@@ -86,4 +85,5 @@ along with Pa11y Dashboard.  If not, see <http://www.gnu.org/licenses/>.
 				</tbody>
 			</table>
 		</div>
+	</div>
 </div>

view/partial/result.html

@@ -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 class="h3" id="dates-navigation">Select a date to show stats for: <span class="glyphicon glyphicon-calendar"></span></h2>
-						</h2>
-						<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}}
@@ -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">
+<section class="col-md-9" id="top">
-	<ul class="nav nav-tabs category-list" role="tablist">
+	<h2 id="tabSectionHeading" class="crunch-top">Results</h2>
-		<li class="category-list__item category-list__item_type_error active" role="presentation">
+	<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>
+</section>

view/partial/task-header.html

@@ -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>

view/partial/tasks.html

@@ -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">
+					<nav class="dropdown-menu pull-right" aria-label="task tools">
-						<ul class="dropdown-menu pull-right">
+						<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>

view/presenter/ignore.js

@@ -22,7 +22,7 @@ module.exports = presentIgnoreRules;
 function presentIgnoreRules(ignore) {
 	return ignore.map(name => {
 		return {
-			name: name,
+			name,
 			description: rules[name]
 		};
 	});

view/result/index.html

@@ -16,7 +16,7 @@ along with Pa11y Dashboard.  If not, see <http://www.gnu.org/licenses/>.
 }}
 
 {{#content "title"}}
-    {{task.name}} - {{simplify-url task.url}} ({{task.standard}}) - {{date-format mainResult.date format="DD MMM YYYY"}}
+    Pa11y Dashboard Results - {{task.name}} - {{date-format mainResult.date format="DD MMM YYYY"}}
 {{/content}}
 
 {{> result-header}}

view/task/edit.html

@@ -22,7 +22,7 @@ along with Pa11y Dashboard.  If not, see <http://www.gnu.org/licenses/>.
 {{#edited}}
 	<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 aria-hidden="true" data-dismiss="alert" class="close" type="button" aria-label="Close">×</button>
 			<strong>Success!</strong>
 			<p>Your changes have been saved.</p>
 		</div>
@@ -146,7 +146,7 @@ along with Pa11y Dashboard.  If not, see <http://www.gnu.org/licenses/>.
 		</div>
 	</div>
 
-	<p class="control-label"><b>Ignore these rules</b> <a target="_blank" href="https://github.com/pa11y/pa11y/wiki/HTML-CodeSniffer-Rules">(full list of rules here)</a></p>
+	<p class="control-label"><b>Ignore these rules</b> (<a target="_blank" href="https://github.com/pa11y/pa11y/wiki/HTML-CodeSniffer-Rules">full list of rules here</a>) <a href="#submitEditBtn" id="skipRules">Skip list of rules</a></p>
 
 	<div class="standards-lists">
 		{{#standards}}
@@ -166,7 +166,7 @@ along with Pa11y Dashboard.  If not, see <http://www.gnu.org/licenses/>.
 		{{/standards}}
 	</div>
 
-	<button type="submit" class="btn btn-success">Save changes <span class="glyphicon glyphicon-save"></span></button>
+	<button type="submit" id="submitEditBtn" class="btn btn-success">Save changes <span class="glyphicon glyphicon-save"></span></button>
 	<a href="/{{task.id}}/edit" class="btn btn-primary">Undo <span class="glyphicon glyphicon-refresh"></span></a>
 
 </form>

view/task/index.html

@@ -16,13 +16,13 @@ along with Pa11y Dashboard.  If not, see <http://www.gnu.org/licenses/>.
 }}
 
 {{#content "title"}}
-	{{task.name}} - {{simplify-url task.url}} ({{task.standard}})
+	Pa11y Dashboard Results for {{task.name}} - ({{task.standard}})
 {{/content}}
 
 {{#added}}
 	<div class="col-md-12 clearfix" data-test="alert">
 		<div class="alert alert-success">
-			<button data-dismiss="alert" class="close" type="button">×</button>
+			<button data-dismiss="alert" class="close" type="button" aria-label="Close">×</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 data-dismiss="alert" class="close" type="button">×</button>
+			<button data-dismiss="alert" class="close" type="button" aria-label="Close">×</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 data-dismiss="alert" class="close" type="button">×</button>
+			<button data-dismiss="alert" class="close" type="button" aria-label="Close">×</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 data-dismiss="alert" class="close" type="button">×</button>
+			<button data-dismiss="alert" class="close" type="button" aria-label="Close">×</button>
 			<strong>Rule unignored!</strong>
 			<p>
 				You've removed an ignored accessibility rule for this URL.