Bump express from 4.17.3 to 4.19.2 (#324)

Bumps [semver](https://github.com/npm/node-semver) from 5.7.1 to 5.7.2.
- [Release notes](https://github.com/npm/node-semver/releases)
- [Changelog](https://github.com/npm/node-semver/blob/v5.7.2/CHANGELOG.md)
- [Commits](https://github.com/npm/node-semver/compare/v5.7.1...v5.7.2)

---
updated-dependencies:
- dependency-name: semver
  dependency-type: indirect
...

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

.editorconfig

@@ -1,13 +1,21 @@
-# http://editorconfig.org
-
 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 = space
 trim_trailing_whitespace = false
+
+[*.yml]
+indent_style = space
+indent_size = 2
+
+[package.json]
+indent_style = space
+indent_size = 2

.eslintrc.js

@@ -1,3 +1,12 @@
 'use strict';
 
-module.exports = require('pa11y-lint-config/eslint/es2017');
+const pa11yConfig = require('pa11y-lint-config/eslint/es2017');
+
+const config = {
+	...pa11yConfig,
+	parserOptions: {
+		ecmaVersion: 2019
+	}
+};
+
+module.exports = config;

.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,49 +1,58 @@
-# 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
-      - master
+    branches:
+      - main
   pull_request:
-    branches: # Run actions when a PR is pushed based on one of these branches
-      - master
 
 jobs:
-  checkout_and_test:
+  lint:
     runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+      - uses: actions/setup-node@v3
+        with:
+          node-version: 12
+      - run: npm ci
+      - run: npm run lint
+
+  test:
+    name: test (node ${{ matrix.node }}, mongodb ${{ matrix.mongo }})
+    runs-on: ubuntu-20.04
     strategy:
+      fail-fast: false
       matrix:
+        node: [12, 14, 16, 18, 20]
+        mongo: [latest]
         include:
-          - node-version: 12.x
-            lint: true # Linter is run only once to shorten the total build time
-          - node-version: 14.x
+          - { node: 12, mongo: 6.0.11 }
+          - { node: 12, mongo: 5.0.22 }
+          - { node: 12, mongo: 4.4.25 }
+          - { node: 12, mongo: 3.6.23 }
+          - { node: 12, mongo: 2.6.12 }
 
     steps:
-      - name: Checkout code from ${{ github.repository }}
-        uses: actions/checkout@v2
-      - name: Setup node
-        uses: actions/setup-node@v2
+      - uses: actions/checkout@v4
+      - uses: actions/setup-node@v3
         with:
-          node-version: ${{ matrix.node-version }}
-      - name: MongoDB in GitHub Actions
-        uses: supercharge/mongodb-github-action@1.3.0
+          node-version: ${{ matrix.node }}
+      - run: npm ci
+
+      - name: Supply MongoDB ${{ matrix.mongo }}
+        uses: supercharge/mongodb-github-action@1.5.0
         with:
-          mongodb-version: 3.4
-      - name: Install dependencies
-        run: npm i
-      - name: Run linter
-        if: ${{ matrix.lint }}
-        run: make lint
-      - name: Create test config
+          mongodb-version: ${{ matrix.mongo }}
+
+      - name: Supply integration test configuration file
         run: cp config/test.sample.json config/test.json
-      - name: Start test app
+
+      - name: Make dashboard available to be integration-tested
         run: NODE_ENV=test node index.js &
-      - name: Wait / Sleep
-        uses: jakejarvis/wait-action@v0.1.0
+      - name: Wait for dashboard to respond
+        uses: iFaxity/wait-on-action@v1.1.0
         with:
-          time: '10s'
-      - name: Run tests
-        run: make ci
+          resource: http://localhost:4000
+          delay: 1000
+          timeout: 30000
+          log: true
+
+      - run: NODE_ENV=test npm test

.gitignore

@@ -1,4 +1,3 @@
-
 # Config files
 config/development.json
 config/production.json
@@ -8,5 +7,5 @@ config/test.json
 node_modules
 npm-debug.log
 
-# JetBrains IDE
+# Editors
 .idea

.npmrc

@@ -0,0 +1 @@
+lockfile-version=2

.nvmrc

@@ -0,0 +1 @@
+14

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.

CONTRIBUTING.md

@@ -1,6 +1,4 @@
-
-Contributing Guide
-==================
+# Contributing Guide
 
 Thanks for getting involved :tada:
 
@@ -14,8 +12,8 @@ Our website outlines the many ways that you can contribute to Pa11y:
 
 
 
-[code-of-conduct]: http://pa11y.org/contributing/code-of-conduct/
-[communications]: http://pa11y.org/contributing/communications/
-[companies]: http://pa11y.org/contributing/companies/
-[designers]: http://pa11y.org/contributing/designers/
-[developers]: http://pa11y.org/contributing/developers/
+[code-of-conduct]: https://pa11y.org/contributing/code-of-conduct/
+[communications]: https://pa11y.org/contributing/communications/
+[companies]: https://pa11y.org/contributing/companies/
+[designers]: https://pa11y.org/contributing/designers/
+[developers]: https://pa11y.org/contributing/developers/

Makefile

@@ -1,25 +1,10 @@
-include Makefile.node
-
-# We need to run integration tests recursively
-export INTEGRATION_FLAGS := --recursive
-
-
-# Verify tasks
-# ------------
-
-# Lint alias for backwards compatibility
-lint: verify
-
-
 # Client-side asset tasks
 # -----------------------
 
-# Compile LESS
 less:
 	@lessc -x ./public/less/main.less ./public/css/site.min.css
 	@$(TASK_DONE)
 
-# Compile client-side JavaScript
 uglify:
 	@uglifyjs \
 		public/js/vendor/jquery/jquery.min.js \

Makefile.node

@@ -1,125 +0,0 @@
-#
-# Node.js Makefile
-# ================
-#
-# Do not update this file manually – it's maintained separately on GitHub:
-# https://github.com/rowanmanning/makefiles/blob/master/Makefile.node
-#
-# To update to the latest version, run `make update-makefile`.
-#
-
-
-# Meta tasks
-# ----------
-
-.PHONY: test
-
-
-# Useful variables
-# ----------------
-
-NPM_BIN = ./node_modules/.bin
-export PATH := $(NPM_BIN):$(PATH)
-export EXPECTED_COVERAGE := 90
-export INTEGRATION_TIMEOUT := 10000
-export INTEGRATION_SLOW := 4000
-
-
-# Output helpers
-# --------------
-
-TASK_DONE = echo "✓ $@ done"
-
-
-# Group tasks
-# -----------
-
-all: install ci
-ci: verify test
-
-
-# Install tasks
-# -------------
-
-clean:
-	@git clean -fxd
-	@$(TASK_DONE)
-
-install: node_modules
-	@$(TASK_DONE)
-
-node_modules: package.json
-	@npm prune --production=false
-	@npm install
-	@$(TASK_DONE)
-
-
-# Verify tasks
-# ------------
-
-verify: verify-javascript verify-dust verify-spaces
-	@$(TASK_DONE)
-
-verify-javascript: verify-eslint verify-jshint verify-jscs
-	@$(TASK_DONE)
-
-verify-dust:
-	@if [ -e .dustmiterc* ]; then dustmite --path ./view && $(TASK_DONE); fi
-
-verify-eslint:
-	@if [ -e .eslintrc* ]; then eslint . && $(TASK_DONE); fi
-
-verify-jshint:
-	@if [ -e .jshintrc* ]; then jshint . && $(TASK_DONE); fi
-
-verify-jscs:
-	@if [ -e .jscsrc* ]; then jscs . && $(TASK_DONE); fi
-
-verify-spaces:
-	@if [ -e .editorconfig* ] && [ -x $(NPM_BIN)/lintspaces ]; then \
-		git ls-files | xargs lintspaces -e .editorconfig && $(TASK_DONE); \
-	fi
-
-verify-coverage:
-	@if [ -d coverage ]; then \
-		if [ -x $(NPM_BIN)/nyc ]; then \
-			nyc check-coverage --lines $(EXPECTED_COVERAGE) --functions $(EXPECTED_COVERAGE) --branches $(EXPECTED_COVERAGE) && $(TASK_DONE); \
-		else \
-			if [ -x $(NPM_BIN)/istanbul ]; then \
-				istanbul check-coverage --statement $(EXPECTED_COVERAGE) --branch $(EXPECTED_COVERAGE) --function $(EXPECTED_COVERAGE) && $(TASK_DONE); \
-			fi \
-		fi \
-	fi
-
-# Test tasks
-# ----------
-
-test: test-unit-coverage verify-coverage test-integration
-	@$(TASK_DONE)
-
-test-unit:
-	@if [ -d test/unit ]; then mocha test/unit --recursive && $(TASK_DONE); fi
-
-test-unit-coverage:
-	@if [ -d test/unit ]; then \
-		if [ -x $(NPM_BIN)/nyc ]; then \
-			nyc --reporter=text --reporter=html $(NPM_BIN)/_mocha test/unit --recursive && $(TASK_DONE); \
-		else \
-			if [ -x $(NPM_BIN)/istanbul ]; then \
-				istanbul cover $(NPM_BIN)/_mocha -- test/unit --recursive && $(TASK_DONE); \
-			else \
-				make test-unit; \
-			fi \
-		fi \
-	fi
-
-test-integration:
-	@if [ -d test/integration ]; then mocha test/integration --timeout $(INTEGRATION_TIMEOUT) --slow $(INTEGRATION_SLOW) $(INTEGRATION_FLAGS) && $(TASK_DONE); fi
-
-
-# Tooling tasks
-# -------------
-
-update-makefile:
-	@curl -s https://raw.githubusercontent.com/rowanmanning/makefiles/master/Makefile.node > Makefile.node
-	@$(TASK_DONE)

README.md

@@ -14,13 +14,14 @@ Pa11y Dashboard is a web interface to the [Pa11y][pa11y] accessibility reporter;
 
 ## Requirements
 
-Pa11y Dashboard is a [Node.js][node] application and requires a stable or LTS version of Node, currently version 12 or 14.
+- [Node.js][node]: Pa11y Dashboard 4 requires a stable (even-numbered) version of Node.js of 12 or above.
+- [MongoDB][mongodb]: This project depends on Pa11y Webservice, which stores test results in a MongoDB database and expects one to be available and running.
 
-⚠️ At the moment, Pa11y Dashboard won't work with Node.js v16. Please use Node.js 12 or 14. ⚠️
+### Pally Dashboard 4 and Linux/Ubuntu
 
-Pa11y Dashboard uses a [MongoDB][mongo] database to store the results of the tests. The database doesn't have to be in the same server or computer where Pa11y Dashboard is running from.
+Pa11y (and therefore this service) uses Headless Chrome to perform accessibility testing. On Linux and other Unix-like systems, Pa11y's attempt to install it as a dependency sometimes fails since additional operating system packages will be required. Your distribution's documentation should describe how to install these.
 
-Pa11y Dashboard uses [puppeteer](https://www.npmjs.com/package/puppeteer) to create a headless instance of the Chromium browser in order to run the tests. On certain environments this may require additional dependencies to be installed. For example, in Debian/Ubuntu systems you may need to install the `libnss3` and `libgconf-2-4` libraries in order to be able to run tests on Pa11y Dashboard. Please refer to the documentation from your provider for details on how to do this.
+In addition, to use Pa11y Dashboard 4 with a version of Ubuntu above 20.04, a path to the Chrome executable must be defined in `chromeLaunchConfig`, as `chromeLaunchConfig.executablePath`. Version 5 of Pa11y Dashboard, which will use Pa11y 7 along with a more recent version of Puppeteer, will resolve this issue.
 
 ## Setting up Pa11y Dashboard
 
@@ -41,11 +42,11 @@ npm install
 
 Instructions for installing and running MongoDB are outside the scope of this document. When in doubt, please refer to the [MongoDB installation instructions](https://docs.mongodb.com/manual/installation/) for details of how to install and run MongoDB on your specific operating system. An example of the installation and configuration process for macOS follows.
 
-Pa11y Dashboard currently uses version 3 of the Node.js MongoDB driver, which means that [only MongoDB servers of versions 4.4 or older are supported](https://docs.mongodb.com/drivers/node/current/compatibility/#mongodb-compatibility). Please ensure that your MongoDB server fills the requirements before trying to run Pa11y Dashboard.
+Pa11y Dashboard uses [MongoDB Node.js Driver][mongodb-package] version 3, which [may not support some features][mongodb-package-compatibility] of MongoDB versions 6 and beyond. We do however test against MongoDB versions 2 to 6, plus the latest major version, which at the time of writing is `7`.
 
 #### Example MongoDB installation for macOS
 
-On recent versions of macOS (10.13 or later), you can use [Homebrew](https://brew.sh/) to install MongoDB Community Edition. More recent versions of MongoDB are untested and unsupported.
+On recent versions of macOS (10.13 or later), you can use [Homebrew] to install MongoDB Community Edition.
 
 Tap the MongoDB Homebrew Tap:
 
@@ -67,8 +68,9 @@ brew services start mongodb/brew/mongodb-community@4.4
 
 Check that the service has started properly:
 
-```sh
+```console
 $ brew services list
+
 Name              Status  User       Plist
 mongodb-community started pa11y      /Users/pa11y/Library/LaunchAgents/homebrew.mxcl.mongodb-community.plist
 ```
@@ -99,43 +101,49 @@ Three example files are provided in this repository, you can copy and customise
 
 ```sh
 cp config/development.sample.json config/development.json
+```
+
+```sh
 cp config/production.sample.json config/production.json
+```
+
+```sh
 cp config/test.sample.json config/test.json
 ```
 
 The [available configurations](#configurations) are documented in the next section.
 
-If you run into problems, check the [troubleshooting guide][#troubleshooting].
+If you run into problems, check the [troubleshooting guide](#troubleshooting).
 
 ## Configurations
 
 The boot configurations for Pa11y Dashboard are as follows. Look at the sample JSON files in the repo for example usage.
 
-### port
+### `port`
 
 *(number)* The port to run the application on. Set via a config file or the `PORT` environment variable.
 
-### noindex
+### `noindex`
 
 *(boolean)* If set to `true` (default), the dashboard will not be indexed by search engines. Set to `false` to allow indexing. Set via a config file or the `NOINDEX` environment variable.
 
-### readonly
+### `readonly`
 
 *(boolean)* If set to `true`, users will not be able to add, delete or run URLs (defaults to `false`). Set via a config file or the `READONLY` environment variable.
 
-### siteMessage
+### `siteMessage`
 
 *(string)* A message to display prominently on the site home page. Defaults to `null`.
 
-### webservice
+### `webservice`
 
-This can either be an object containing [Pa11y Webservice configurations][pa11y-webservice-config], or a string which is the base URL of a [Pa11y Webservice][pa11y-webservice] instance you are running separately. If using environment variables, prefix the webservice vars with `WEBSERVICE_`.
+This can either be an object containing [Pa11y Webservice configurations][pa11y-webservice-config], or a string which is the base URL of a Pa11y Webservice instance you are running separately. If using environment variables, prefix the webservice vars with `WEBSERVICE_`.
 
 ## Contributing
 
 There are many ways to contribute to Pa11y Dashboard, we cover these in the [contributing guide](CONTRIBUTING.md) for this repo.
 
-If you're ready to contribute some code, you'll need to clone the repo and get set up as outlined in the [setup guide](#setup). You'll then need to start the application in test mode with:
+If you're ready to contribute some code, you'll need to clone the repo and get set up as outlined in the [setup guide](#setting-up-pa11y-dashboard). You'll then need to start the application in test mode with:
 
 ```sh
 NODE_ENV=test node index.js
@@ -144,9 +152,8 @@ NODE_ENV=test node index.js
 You'll now be able to run the following commands:
 
 ```sh
-make verify              # Verify all of the code (ESLint)
-make test                # Run all tests
-make test-integration    # Run the integration tests
+npm run lint   # Lint the code
+npm test       # Run all tests
 ```
 
 To compile the client-side JavaScript and CSS, you'll need the following commands. Compiled code is committed to the repository.
@@ -158,51 +165,56 @@ make uglify  # Compile and uglify the client-side JavaScript
 
 ## Useful resources
 
-* [Setting up An Accessibility Dashboard from Scratch with Pa11y on DigitalOcean](https://una.im/pa11y-dash/)
-* [Monitoring Web Accessibility Compliance With Pa11y Dashboard](https://www.lullabot.com/articles/monitoring-web-accessibility-compliance-with-pa11y-dashboard)
+- [Setting up An Accessibility Dashboard from Scratch with Pa11y on DigitalOcean](https://una.im/pa11y-dash/)
+- [Monitoring Web Accessibility Compliance With Pa11y Dashboard](https://www.lullabot.com/articles/monitoring-web-accessibility-compliance-with-pa11y-dashboard)
 
 ## Troubleshooting
 
 ### Common issues
 
-* `500` errors or `Could not connect to pa11y-webservice` messages are often related to MongoDB. Ensure that you have the [appropriate version of MongoDB][#installing-mongodb] installed, and that it's running - it doesn't always start automatically.
-* Error messages saying that pa11y-webservice isn't running may be due to dependency installation problems. Try deleting your `pa11y-dashboard/node_modules` directory and running `npm install` again.
+- `500` errors or `Could not connect to pa11y-webservice` messages are often related to MongoDB. Ensure that you have the [appropriate version of MongoDB](#installing-mongodb) installed, and that it's running - it doesn't always start automatically.
+- Error messages saying that pa11y-webservice isn't running may be due to dependency installation problems. Try deleting your `pa11y-dashboard/node_modules` directory and running `npm install` again.
 
 ### Create a new issue
 
-Check the [issue tracker][issues] for similar issues before creating a new one. If the problem that you're experiencing is not covered by one of the existing issues, you can [create a new issue][create-issue]. Please include your node.js and MongoDB version numbers, and your operating system, as well as any information that may be useful in debugging the issue.
+Check the [issue tracker][issues] for similar issues before creating a new one. If the problem that you're experiencing is not covered by one of the existing issues, you can [create a new issue][issues-create]. Please include your node.js and MongoDB version numbers, and your operating system, as well as any information that may be useful in debugging the issue.
 
-## Support and Migration
+## Support and migration
 
-Pa11y Dashboard major versions are normally supported for 6 months after their last minor release. This means that patch-level changes will be added and bugs will be fixed. The table below outlines the end-of-support dates for major versions, and the last minor release for that version.
+> [!NOTE]
+> We maintain a [migration guide](MIGRATION.md) to help you migrate between major versions.
 
-We also maintain a [migration guide](MIGRATION.md) to help you migrate.
+When we release a new major version we will continue to support the previous major version for 6 months. This support will be limited to fixes for critical bugs and security issues. If you're opening an issue related to this project, please mention the specific version that the issue affects.
 
-| :grey_question: | Major Version | Last Minor Release | Node.js Versions | Support End Date |
-| :-------------- | :------------ | :----------------- | :--------------- | :--------------- |
-| :heart:         | 4             | N/A                | 12+              | N/A              |
-| :hourglass:     | 3             | 3.3.0              | 8+               | 2022-05-26       |
-| :skull:         | 2             | 2.4.2              | 4+               | 2020-01-16       |
-| :skull:         | 1             | 1.12               | 0.10–6           | 2016-12-05       |
+The following table lists the major versions available and, for each previous major version, its end-of-support date, and its final minor version released.
 
-If you're opening issues related to these, please mention the version that the issue relates to.
+| Major version | Last minor release | Node.js support             | Support end date |
+| :------------ | :----------------- | :------------------------ | :--------------- |
+| `4`           | Imminent           | `>= 12`                     | ✅ Current major version |
+| `3`           | `3.3.0`            | `8`, `10`                   | 2022-05-26       |
+| `2`           | `2.4.2`            | `4`, `6`                    | 2020-01-16       |
+| `1`           | `1.12.0`           | `0.10`, `0.12`, `4`, `6`    | 2016-12-05       |
 
 ## License
 
-Pa11y Dashboard is licensed under the [GNU General Public License 3.0][info-license].<br/>
-Copyright &copy; 2013–2020, Team Pa11y and contributors
+Pa11y Dashboard is licensed under the [GNU General Public License 3.0][info-license].  
+Copyright &copy; 2023, Team Pa11y and contributors
 
-[gpl]: http://www.gnu.org/licenses/gpl-3.0.html
-[mongo]: http://www.mongodb.org/
+[homebrew]: https://brew.sh/
+[issues]: https://github.com/pa11y/pa11y-dashboard/issues?utf8=%E2%9C%93&q=is%3Aissue
+[issues-create]: https://github.com/pa11y/pa11y-dashboard/issues/new
+[mongodb]: http://www.mongodb.org/
+[mongodb-package]: https://www.npmjs.com/package/mongodb
+[mongodb-package-compatibility]: https://docs.mongodb.com/drivers/node/current/compatibility
 [node]: http://nodejs.org/
 [pa11y]: https://github.com/pa11y/pa11y
 [pa11y-webservice-config]: https://github.com/pa11y/webservice#configurations
-[issues]: https://github.com/pa11y/pa11y-dashboard/issues?utf8=%E2%9C%93&q=is%3Aissue
-[create-issue]: https://github.com/pa11y/pa11y-dashboard/issues/new
+
 [info-node]: package.json
-[info-build]: https://travis-ci.org/pa11y/pa11y-dashboard
+[info-build]: https://github.com/pa11y/pa11y-dashboard/actions/workflows/tests.yml
 [info-license]: LICENSE
+
 [shield-version]: https://img.shields.io/github/package-json/v/pa11y/pa11y-dashboard.svg
 [shield-node]: https://img.shields.io/node/v/pa11y/pa11y-dashboard.svg
-[shield-build]: https://img.shields.io/travis/pa11y/pa11y-dashboard/master.svg
+[shield-build]: https://github.com/pa11y/pa11y-dashboard/actions/workflows/tests.yml/badge.svg
 [shield-license]: https://img.shields.io/badge/license-GPL%203.0-blue.svg

app.js

@@ -17,15 +17,16 @@
 const bodyParser = require('body-parser');
 const compression = require('compression');
 const createClient = require('pa11y-webservice-client-node');
-const EventEmitter = require('events').EventEmitter;
+const {EventEmitter} = require('events');
 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');
 
 module.exports = initApp;
 
-// Initialise the application
 function initApp(config, callback) {
 	config = defaultConfig(config);
 
@@ -35,14 +36,54 @@ function initApp(config, callback) {
 	}
 
 	const app = new EventEmitter();
-	app.address = null;
+
 	app.express = express();
 	app.server = http.createServer(app.express);
 	app.webservice = createClient(webserviceUrl);
 
-	// Compression
+	loadMiddleware(app);
+
+	// View engine
+	loadViewEngine(app, config);
+
+	// Load routes
+	loadRoutes(app, config);
+
+	// Error handling
+	loadErrorHandling(app, config, callback);
+}
+
+function defaultConfig(config) {
+	if (typeof config.noindex !== 'boolean') {
+		config.noindex = true;
+	}
+	if (typeof config.readonly !== 'boolean') {
+		config.readonly = false;
+	}
+	return config;
+}
+
+function loadMiddleware(app) {
 	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 +94,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 +131,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 +149,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');
@@ -125,20 +175,16 @@ function initApp(config, callback) {
 	});
 
 	app.server.listen(config.port, error => {
-		const address = app.server.address();
-		app.address = `http://${address.address}:${address.port}`;
 		callback(error, app);
 	});
-
 }
 
-// Get default configurations
-function defaultConfig(config) {
-	if (typeof config.noindex !== 'boolean') {
-		config.noindex = true;
-	}
-	if (typeof config.readonly !== 'boolean') {
-		config.readonly = false;
-	}
-	return config;
+// Express middleware
+function addRequestId(request, response, next) {
+	// Create a random request (nano)id, 10 characters long
+	// 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
+	//  we probably have worse things to worry about
+	request.id = nanoid(10);
+	next();
 }

bower.json

@@ -1,6 +1,5 @@
 {
   "name": "pa11y-dashboard",
-
   "dependencies": {
     "jquery": "~1.10",
     "bootstrap": "~3.0",

config.js

@@ -15,6 +15,7 @@
 'use strict';
 
 const fs = require('fs');
+
 const environment = (process.env.NODE_ENV || 'development');
 const jsonPath = `./config/${environment}.json`;
 const jsPath = `./config/${environment}.js`;
@@ -28,7 +29,6 @@ if (fs.existsSync(jsonPath)) {
 		port: Number(env('PORT', '4000')),
 		noindex: env('NOINDEX', 'true') === 'true',
 		readonly: env('READONLY', 'false') === 'true',
-
 		webservice: env('WEBSERVICE_URL', {
 			database: env('WEBSERVICE_DATABASE', 'mongodb://localhost/pa11y-webservice'),
 			host: env('WEBSERVICE_HOST', '0.0.0.0'),

config/development.sample.json

@@ -2,7 +2,6 @@
 	"port": 4000,
 	"noindex": true,
 	"readonly": false,
-
 	"webservice": {
 		"database": "mongodb://localhost/pa11y-webservice-dev",
 		"host": "0.0.0.0",

config/production.sample.json

@@ -2,7 +2,6 @@
 	"port": 4000,
 	"noindex": true,
 	"readonly": false,
-
 	"webservice": {
 		"database": "mongodb://localhost/pa11y-webservice",
 		"host": "0.0.0.0",

config/test.sample.json

@@ -2,10 +2,9 @@
 	"port": 4000,
 	"noindex": true,
 	"readonly": false,
-
 	"webservice": {
-		"database": "mongodb://localhost/pa11y-webservice-test",
-		"host": "0.0.0.0",
+		"database": "mongodb://127.0.0.1/pa11y-dashboard-integration-test",
+		"host": "127.0.0.1",
 		"port": 3000,
 		"cron": "0 30 0 * * *"
 	}

data/standards.js

@@ -12,13 +12,9 @@
 //
 // You should have received a copy of the GNU General Public License
 // along with Pa11y Dashboard.  If not, see <http://www.gnu.org/licenses/>.
-
-// jscs:disable maximumLineLength
 'use strict';
 
-module.exports = getStandards;
-
-function getStandards() {
+module.exports = function getStandards() {
 	return [
 		{
 			title: 'WCAG2A',
@@ -805,7 +801,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 +1426,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.'
 				},
 				{
@@ -1800,4 +1796,4 @@ function getStandards() {
 			]
 		}
 	];
-}
+};

data/techniques.js

@@ -12,13 +12,9 @@
 //
 // You should have received a copy of the GNU General Public License
 // along with Pa11y Dashboard.  If not, see <http://www.gnu.org/licenses/>.
-
-// jscs:disable maximumLineLength
 'use strict';
 
-module.exports = getTechniques;
-
-function getTechniques() {
+module.exports = function getTechniques() {
 	return {
 		H30: {
 			title: 'H30: Providing link text that describes the purpose of a link for anchor elements',
@@ -713,4 +709,4 @@ function getTechniques() {
 			url: 'https://www.w3.org/WAI/WCAG21/Techniques/failures/F96'
 		}
 	};
-}
+};

index.js

@@ -14,27 +14,36 @@
 // along with Pa11y Dashboard.  If not, see <http://www.gnu.org/licenses/>.
 'use strict';
 
+const initService = require('pa11y-webservice');
 const kleur = require('kleur');
+
 const config = require('./config');
+const initDashboard = require('./app');
 
 process.on('SIGINT', () => {
 	console.log('\nGracefully shutting down from SIGINT (Ctrl-C)');
 	process.exit();
 });
 
-require('./app')(config, (error, app) => {
+initDashboard(config, (error, app) => {
 	if (error) {
 		console.error(error.stack);
 		process.exit(1);
 	}
 
-	console.log('');
-	console.log(kleur.underline().magenta('Pa11y Dashboard started'));
-	console.log(kleur.grey('mode: %s'), process.env.NODE_ENV);
-	console.log(kleur.grey('uri:  %s'), app.address);
+	const mode = process.env.NODE_ENV;
+	const dashboardAddress = app.server.address();
 
-	app.on('route-error', error => {
-		const stack = (error.stack ? error.stack.split('\n') : [error.message]);
+	console.log(kleur.underline().magenta('\nPa11y Dashboard started'));
+	console.log(kleur.grey('mode:               %s'), mode);
+	console.log(kleur.grey('uri (intended):     %s'), `http://localhost:${config.port}/`);
+	console.log(
+		kleur.grey(`uri (actual, ${dashboardAddress.family}): %s`),
+		`http://${dashboardAddress.address}:${dashboardAddress.port}/`
+	);
+
+	app.on('route-error', routeError => {
+		const stack = (routeError.stack ? routeError.stack.split('\n') : [routeError.message]);
 		const msg = kleur.red(stack.shift());
 		console.error('');
 		console.error(msg);
@@ -43,19 +52,18 @@ require('./app')(config, (error, app) => {
 
 	// Start the webservice if required
 	if (typeof config.webservice === 'object') {
-		require('pa11y-webservice')(config.webservice, (error, webservice) => {
-			if (error) {
-				console.error(error.stack);
+		console.log(kleur.underline().cyan('\nPa11y Webservice starting'));
+		initService(config.webservice, (webserviceError, webservice) => {
+			if (webserviceError) {
+				console.error(webserviceError.stack);
 				process.exit(1);
 			}
 
-			console.log('');
-			console.log(kleur.underline().cyan('Pa11y Webservice started'));
-			console.log(kleur.grey('mode:     %s'), process.env.NODE_ENV);
+			console.log(kleur.cyan('\nPa11y Webservice started'));
+			console.log(kleur.grey('mode:     %s'), mode);
 			console.log(kleur.grey('uri:      %s'), webservice.server.info.uri);
 			console.log(kleur.grey('database: %s'), config.webservice.database);
 			console.log(kleur.grey('cron:     %s'), config.webservice.cron);
 		});
 	}
-
 });

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": [
@@ -15,39 +15,44 @@
   ],
   "repository": {
     "type": "git",
-    "url": "https://github.com/pa11y/dashboard.git"
+    "url": "https://github.com/pa11y/pa11y-dashboard.git"
   },
-  "homepage": "https://github.com/pa11y/dashboard",
-  "bugs": "https://github.com/pa11y/dashboard/issues",
+  "homepage": "https://github.com/pa11y/pa11y-dashboard",
+  "bugs": "https://github.com/pa11y/pa11y-dashboard/issues",
   "license": "GPL-3.0",
   "engines": {
-    "node": ">=12 <16"
+    "node": ">=12"
   },
   "dependencies": {
-    "body-parser": "~1.19.0",
+    "body-parser": "~1.19.2",
     "compression": "~1.7.4",
-    "express": "~4.17.1",
+    "express": "~4.19.2",
     "express-hbs": "~2.4.0",
     "http-headers": "~3.0.2",
     "kleur": "~4.1.4",
-    "moment": "~2.29.1",
-    "pa11y-webservice": "~4.0.0",
-    "pa11y-webservice-client-node": "~3.0.0",
-    "underscore": "~1.13.1"
+    "lodash.groupby": "~4.6.0",
+    "lodash.keys": "~4.2.0",
+    "moment": "~2.29.4",
+    "morgan": "~1.10.0",
+    "nanoid": "~3.3.2",
+    "pa11y-webservice": "^4.3.1",
+    "pa11y-webservice-client-node": "~3.0.0"
   },
   "devDependencies": {
     "bower": "^1.8.13",
     "cheerio": "^1.0.0-rc.10",
     "eslint": "^7.27.0",
     "less": "^3.11.1",
-    "mocha": "^8.4.0",
-    "pa11y-lint-config": "^1.2.1",
+    "mocha": "^10.2.0",
+    "node-fetch": "^2.7.0",
+    "pa11y-lint-config": "^3.0.0",
     "proclaim": "^3.6.0",
-    "request": "^2.88.2",
     "uglify-js": "^3.11.0"
   },
   "scripts": {
     "start": "node index.js",
-    "test": "make ci"
+    "test": "npm run test:integration",
+    "test:integration": "mocha 'test/integration/**/*.js' --recursive --timeout 20000 --slow 4000",
+    "lint": "eslint ."
   }
 }

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/index.js

@@ -16,10 +16,7 @@
 
 const presentTask = require('../view/presenter/task');
 
-module.exports = route;
-
-// Route definition
-function route(app) {
+module.exports = function index(app) {
 	app.express.get('/', (request, response, next) => {
 		app.webservice.tasks.get({lastres: true}, (error, tasks) => {
 			if (error) {
@@ -32,4 +29,4 @@ function route(app) {
 			});
 		});
 	});
-}
+};

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
@@ -17,58 +18,32 @@
 const getStandards = require('../data/standards');
 const httpHeaders = require('http-headers');
 
-module.exports = route;
-
-// Route definition
-function route(app) {
-
+module.exports = function route(app) {
 	app.express.get('/new', (request, response) => {
-		const standards = getStandards().map(standard => {
+		const standards = getStandards().map(
+			standard => {
 				if (standard.title === 'WCAG2AA') {
 					standard.selected = true;
 				}
 				return standard;
 			});
 		response.render('new', {
-			standards: standards,
+			standards,
 			isNewTaskPage: true
 		});
 	});
 
 	app.express.post('/new', (request, response) => {
+		const parsedActions = parseActions(request.body.actions);
+		const parsedHeaders = request.body.headers && httpHeaders(request.body.headers, true);
 
-		let parsedActions;
-		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 = {
-			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
-		};
+		const newTask = createNewTask(request, parsedActions, parsedHeaders);
 
 		app.webservice.tasks.create(newTask, (error, task) => {
-			if (error) {
+			if (!error) {
+				return response.redirect(`/${task.id}?added`);
+			}
+
 			const standards = getStandards().map(standard => {
 				if (standard.title === newTask.standard) {
 					standard.selected = true;
@@ -83,14 +58,40 @@ function route(app) {
 			});
 			newTask.actions = request.body.actions;
 			newTask.headers = request.body.headers;
-				return response.render('new', {
-					error: error,
-					standards: standards,
+			response.render('new', {
+				error,
+				standards,
 				task: newTask
 			});
-			}
-			response.redirect(`/${task.id}?added`);
 		});
 	});
+};
 
+function parseActions(actions) {
+	if (actions) {
+		return actions.split(/[\r\n]+/)
+			.map(action => {
+				return action.trim();
+			})
+			.filter(action => {
+				return Boolean(action);
+			});
+	}
+}
+
+
+function createNewTask({body}, actions, headers) {
+	return {
+		name: body.name,
+		url: body.url,
+		standard: body.standard,
+		ignore: body.ignore || [],
+		timeout: body.timeout || undefined,
+		wait: body.wait || undefined,
+		actions,
+		username: body.username || undefined,
+		password: body.password || undefined,
+		headers,
+		hideElements: body.hideElements || undefined
+	};
 }

route/result/download.js

@@ -16,11 +16,7 @@
 
 const moment = require('moment');
 
-module.exports = route;
-
-// Route definition
-function route(app) {
-
+module.exports = function download(app) {
 	function getTaskAndResult(request, response, next) {
 		app.webservice.task(request.params.id).get({}, (error, task) => {
 			if (error) {
@@ -29,8 +25,8 @@ function route(app) {
 			app.webservice
 				.task(request.params.id)
 				.result(request.params.rid)
-				.get({full: true}, (error, result) => {
-					if (error) {
+				.get({full: true}, (webserviceError, result) => {
+					if (webserviceError) {
 						return next('route');
 					}
 					response.locals.task = task;
@@ -83,5 +79,4 @@ function route(app) {
 		result.task = task;
 		response.send(result);
 	});
-
-}
+};

route/result/index.js

@@ -17,21 +17,17 @@
 const presentTask = require('../../view/presenter/task');
 const presentResult = require('../../view/presenter/result');
 
-module.exports = route;
-
-// Route definition
-function route(app) {
-
-	app.express.get('/:id/:rid', (request, response, next) => {
-		app.webservice.task(request.params.id).get({}, (error, task) => {
+module.exports = function resultIndex(app) {
+	app.express.get('/:id/:rid', ({params}, response, next) => {
+		app.webservice.task(params.id).get({}, (error, task) => {
 			if (error) {
 				return next();
 			}
 			app.webservice
-				.task(request.params.id)
-				.result(request.params.rid)
-				.get({full: true}, (error, result) => {
-					if (error) {
+				.task(params.id)
+				.result(params.rid)
+				.get({full: true}, (webserviceError, result) => {
+					if (webserviceError) {
 						return next();
 					}
 					response.render('result', {
@@ -42,5 +38,4 @@ function route(app) {
 				});
 		});
 	});
-
-}
+};

route/task/delete.js

@@ -16,13 +16,9 @@
 
 const presentTask = require('../../view/presenter/task');
 
-module.exports = route;
-
-// Route definition
-function route(app) {
-
-	app.express.get('/:id/delete', (request, response, next) => {
-		app.webservice.task(request.params.id).get({}, (error, task) => {
+module.exports = function del(app) {
+	app.express.get('/:id/delete', ({params}, response, next) => {
+		app.webservice.task(params.id).get({}, (error, task) => {
 			if (error) {
 				return next();
 			}
@@ -33,13 +29,12 @@ function route(app) {
 		});
 	});
 
-	app.express.post('/:id/delete', (request, response, next) => {
-		app.webservice.task(request.params.id).remove(error => {
+	app.express.post('/:id/delete', ({params}, response, next) => {
+		app.webservice.task(params.id).remove(error => {
 			if (error) {
 				return next();
 			}
 			response.redirect('/?deleted');
 		});
 	});
-
-}
+};

route/task/edit.js

@@ -18,11 +18,7 @@ const presentTask = require('../../view/presenter/task');
 const getStandards = require('../../data/standards');
 const httpHeaders = require('http-headers');
 
-module.exports = route;
-
-// Route definition
-function route(app) {
-
+module.exports = function edit(app) {
 	app.express.get('/:id/edit', (request, response, next) => {
 		app.webservice.task(request.params.id).get({}, (error, task) => {
 			if (error) {
@@ -43,13 +39,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 +55,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 +69,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 +103,9 @@ function route(app) {
 						return standard;
 					});
 					return response.render('task/edit', {
-						error: error,
-						standards: standards,
-						task: task,
+						webserviceError,
+						standards,
+						task,
 						isTaskSubPage: true
 					});
 				}
@@ -110,5 +113,4 @@ function route(app) {
 			});
 		});
 	});
-
-}
+};

route/task/ignore.js

@@ -1,10 +1,6 @@
 'use strict';
 
-module.exports = route;
-
-// Route definition
-function route(app) {
-
+module.exports = function ignore(app) {
 	app.express.post('/:id/ignore', (request, response, next) => {
 		app.webservice.task(request.params.id).get({}, (error, task) => {
 			if (error) {
@@ -22,5 +18,4 @@ function route(app) {
 			});
 		});
 	});
-
-}
+};

route/task/index.js

@@ -18,19 +18,15 @@ const presentTask = require('../../view/presenter/task');
 const presentResult = require('../../view/presenter/result');
 const presentResultList = require('../../view/presenter/result-list');
 
-module.exports = route;
-
-// Route definition
-function route(app) {
-
+module.exports = function taskIndex(app) {
 	app.express.get('/:id', (request, response, next) => {
 		app.webservice.task(request.params.id).get({lastres: true}, (error, task) => {
 			if (error) {
 				return next();
 			}
-			app.webservice.task(request.params.id).results({}, (error, results) => {
-				if (error) {
-					return next(error);
+			app.webservice.task(request.params.id).results({}, (webserviceError, results) => {
+				if (webserviceError) {
+					return next(webserviceError);
 				}
 				const presentedResults = presentResultList(results.map(presentResult));
 				response.render('task', {
@@ -47,5 +43,4 @@ function route(app) {
 			});
 		});
 	});
-
-}
+};

route/task/run.js

@@ -14,11 +14,7 @@
 // along with Pa11y Dashboard.  If not, see <http://www.gnu.org/licenses/>.
 'use strict';
 
-module.exports = route;
-
-// Route definition
-function route(app) {
-
+module.exports = function run(app) {
 	app.express.get('/:id/run', (request, response, next) => {
 		app.webservice.task(request.params.id).run(error => {
 			if (error) {
@@ -27,5 +23,4 @@ function route(app) {
 			response.redirect(`/${request.params.id}?running`);
 		});
 	});
-
-}
+};

route/task/unignore.js

@@ -2,9 +2,7 @@
 
 module.exports = route;
 
-// Route definition
 function route(app) {
-
 	app.express.post('/:id/unignore', (request, response, next) => {
 		app.webservice.task(request.params.id).get({}, (error, task) => {
 			if (error) {
@@ -23,5 +21,4 @@ function route(app) {
 			});
 		});
 	});
-
 }

test/.eslintrc.js

@@ -1,15 +1,9 @@
 'use strict';
 
-// Clone the main config
-const config = module.exports = JSON.parse(JSON.stringify(require('../.eslintrc')));
+const config = require('../.eslintrc');
 
 // We use `this` all over the integration tests
 config.rules['no-invalid-this'] = 'off';
-
-// Because of our use of `this`, arrow functions
-// aren't really gonna work in the integration tests
 config.rules['prefer-arrow-callback'] = 'off';
 
-// Disable max line length/statements
-config.rules['max-len'] = 'off';
-config.rules['max-statements'] = 'off';
+module.exports = config;

test/integration/helper/navigate.js

@@ -12,19 +12,13 @@
 //
 // You should have received a copy of the GNU General Public License
 // along with Pa11y Dashboard.  If not, see <http://www.gnu.org/licenses/>.
-
-// jscs:disable requireArrowFunctions
 'use strict';
 
 const cheerio = require('cheerio');
 const request = require('request');
 
-module.exports = createNavigator;
-
-// Create a navigate function
 function createNavigator(baseUrl, store) {
 	return function(opts, callback) {
-
 		store.body = null;
 		store.dom = null;
 		store.request = null;
@@ -54,8 +48,8 @@ function createNavigator(baseUrl, store) {
 				store.dom = cheerio.load(store.body);
 			}
 			callback();
-
 		});
-
 	};
 }
+
+module.exports = createNavigator;

test/integration/helper/webservice.js

@@ -1,30 +0,0 @@
-// This file is part of Pa11y Dashboard.
-//
-// Pa11y Dashboard is free software: you can redistribute it and/or modify
-// it under the terms of the GNU General Public License as published by
-// the Free Software Foundation, either version 3 of the License, or
-// (at your option) any later version.
-//
-// Pa11y Dashboard is distributed in the hope that it will be useful,
-// but WITHOUT ANY WARRANTY; without even the implied warranty of
-// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
-// 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/>.
-
-// jscs:disable requireArrowFunctions
-'use strict';
-
-const createClient = require('pa11y-webservice-client-node');
-
-module.exports = createWebserviceClient;
-
-// Create a webservice client
-function createWebserviceClient(config) {
-	let webserviceUrl = config.webservice;
-	if (typeof webserviceUrl === 'object') {
-		webserviceUrl = `http://${webserviceUrl.host}:${webserviceUrl.port}/`;
-	}
-	return createClient(webserviceUrl);
-}

test/integration/route/index.js

@@ -12,14 +12,11 @@
 //
 // You should have received a copy of the GNU General Public License
 // along with Pa11y Dashboard.  If not, see <http://www.gnu.org/licenses/>.
-
-// jscs:disable maximumLineLength, requireArrowFunctions
 'use strict';
 
 const assert = require('proclaim');
 
-describe.only('GET /', function() {
-
+describe('GET /', function() {
 	beforeEach(function(done) {
 		const request = {
 			method: 'GET',
@@ -94,7 +91,7 @@ describe.only('GET /', function() {
 		assert.match(tasks.eq(0).text(), /3\s*notices/i);
 	});
 
-	it('should display a message indicating that there are no results if the task has not been run', function() {
+	it('should indicate there are no results if the task has not been run', function() {
 		const tasks = this.last.dom('[data-test=task]');
 		assert.match(tasks.eq(2).text(), /no results/i);
 	});
@@ -102,5 +99,4 @@ describe.only('GET /', function() {
 	it('should not display an alert message', function() {
 		assert.strictEqual(this.last.dom('[data-test=alert]').length, 0);
 	});
-
 });

test/integration/route/new.js

@@ -12,20 +12,16 @@
 //
 // You should have received a copy of the GNU General Public License
 // along with Pa11y Dashboard.  If not, see <http://www.gnu.org/licenses/>.
-
-// jscs:disable maximumLineLength, requireArrowFunctions
 'use strict';
 
 const assert = require('proclaim');
 
 describe('GET /new', function() {
-
 	beforeEach(function(done) {
-		const request = {
+		this.navigate({
 			method: 'GET',
 			endpoint: '/new'
-		};
-		this.navigate(request, done);
+		}, done);
 	});
 
 	it('should send a 200 status', function() {
@@ -44,7 +40,6 @@ describe('GET /new', function() {
 	});
 
 	describe('"Add New URL" form', function() {
-
 		beforeEach(function() {
 			this.form = this.last.dom('[data-test=new-url-form]').eq(0);
 		});
@@ -92,7 +87,7 @@ describe('GET /new', function() {
 		it('should have a "standard" field', function() {
 			const field = this.form.find('select[name=standard]').eq(0);
 			assert.isDefined(field);
-			assert.strictEqual(field.find('option').length, 4);
+			assert.greaterThanOrEqual(field.find('option').length, 1);
 		});
 
 		it('should have "ignore" fields', function() {
@@ -112,15 +107,11 @@ describe('GET /new', function() {
 			const field = this.form.find('textarea[name=headers]').eq(0);
 			assert.isDefined(field);
 		});
-
 	});
-
 });
 
 describe('POST /new', function() {
-
 	describe('with invalid query', function() {
-
 		beforeEach(function(done) {
 			const request = {
 				method: 'POST',
@@ -140,13 +131,10 @@ describe('POST /new', function() {
 		it('should display an error message', function() {
 			assert.strictEqual(this.last.dom('[data-test=error]').length, 1);
 		});
-
 	});
 
 	describe('with valid query', function() {
-
-		beforeEach(function(done) {
-			const request = {
+		const requestOptions = {
 			method: 'POST',
 			endpoint: '/new',
 			form: {
@@ -155,7 +143,9 @@ describe('POST /new', function() {
 				standard: 'WCAG2AA'
 			}
 		};
-			this.navigate(request, done);
+
+		beforeEach(function(done) {
+			this.navigate(requestOptions, done);
 		});
 
 		it('should send a 200 status', function() {
@@ -163,9 +153,18 @@ describe('POST /new', function() {
 		});
 
 		it('should create the task', function(done) {
-			this.webservice.tasks.get({}, function(error, tasks) {
-				assert.strictEqual(tasks.length, 4);
-				done(error);
+			const getTaskCount = then =>
+				this.webservice.tasks.get({}, (error, tasks) => {
+					then(tasks.length);
+				});
+
+			getTaskCount(firstTaskCount => {
+				this.navigate(requestOptions, () => {
+					getTaskCount(secondTaskCount => {
+						assert.strictEqual(secondTaskCount, firstTaskCount + 1);
+						done();
+					});
+				});
 			});
 		});
 
@@ -180,9 +179,7 @@ describe('POST /new', function() {
 		it('should display a success message', function() {
 			const alert = this.last.dom('[data-test=alert]').eq(0);
 			assert.isDefined(alert);
-			assert.match(alert.textContent, /url has been added/i);
+			assert.match(alert.text(), /url has been added/i);
 		});
-
 	});
-
 });

test/integration/route/result/download.js

@@ -12,14 +12,11 @@
 //
 // You should have received a copy of the GNU General Public License
 // along with Pa11y Dashboard.  If not, see <http://www.gnu.org/licenses/>.
-
-// jscs:disable maximumLineLength, requireArrowFunctions
 'use strict';
 
 const assert = require('proclaim');
 
 describe('GET /<task-id>/<result-id>.csv', function() {
-
 	beforeEach(function(done) {
 		const request = {
 			method: 'GET',
@@ -36,11 +33,9 @@ describe('GET /<task-id>/<result-id>.csv', function() {
 	it('should output CSV results', function() {
 		assert.match(this.last.body, /^"code","message","type"/);
 	});
-
 });
 
 describe('GET /<task-id>/<result-id>.json', function() {
-
 	beforeEach(function(done) {
 		const request = {
 			method: 'GET',
@@ -64,5 +59,4 @@ describe('GET /<task-id>/<result-id>.json', function() {
 		assert.strictEqual(json.count.notice, 3);
 		assert.isArray(json.results);
 	});
-
 });

test/integration/route/result/index.js

@@ -12,8 +12,6 @@
 //
 // You should have received a copy of the GNU General Public License
 // along with Pa11y Dashboard.  If not, see <http://www.gnu.org/licenses/>.
-
-// jscs:disable maximumLineLength, requireArrowFunctions
 'use strict';
 
 const assert = require('proclaim');
@@ -35,13 +33,19 @@ describe('GET /<task-id>/<result-id>', function() {
 	it('should display a "Download CSV" button', function() {
 		const elem = this.last.dom('[data-test=download-csv]');
 		assert.strictEqual(elem.length, 1);
-		assert.strictEqual(elem.eq(0).attr('href'), '/abc000000000000000000001/def000000000000000000001.csv');
+		assert.strictEqual(
+			elem.eq(0).attr('href'),
+			'/abc000000000000000000001/def000000000000000000001.csv'
+		);
 	});
 
 	it('should display a "Download JSON" button', function() {
 		const elem = this.last.dom('[data-test=download-json]');
 		assert.strictEqual(elem.length, 1);
-		assert.strictEqual(elem.eq(0).attr('href'), '/abc000000000000000000001/def000000000000000000001.json');
+		assert.strictEqual(
+			elem.eq(0).attr('href'),
+			'/abc000000000000000000001/def000000000000000000001.json'
+		);
 	});
 
 	it('should display a link back to the task', function() {

test/integration/route/task/delete.js

@@ -12,8 +12,6 @@
 //
 // You should have received a copy of the GNU General Public License
 // along with Pa11y Dashboard.  If not, see <http://www.gnu.org/licenses/>.
-
-// jscs:disable maximumLineLength, requireArrowFunctions
 'use strict';
 
 const assert = require('proclaim');

test/integration/route/task/edit.js

@@ -12,20 +12,16 @@
 //
 // You should have received a copy of the GNU General Public License
 // along with Pa11y Dashboard.  If not, see <http://www.gnu.org/licenses/>.
-
-// jscs:disable maximumLineLength, requireArrowFunctions
 'use strict';
 
 const assert = require('proclaim');
 
 describe('GET /<task-id>/edit', function() {
-
 	beforeEach(function(done) {
-		const request = {
+		this.navigate({
 			method: 'GET',
 			endpoint: '/abc000000000000000000001/edit'
-		};
-		this.navigate(request, done);
+		}, done);
 	});
 
 	it('should send a 200 status', function() {
@@ -113,13 +109,10 @@ describe('GET /<task-id>/edit', function() {
 			assert.isDefined(fields);
 			assert.notStrictEqual(fields.length, 0);
 		});
-
 	});
-
 });
 
 describe('POST /<task-id>/edit', function() {
-
 	beforeEach(function(done) {
 		const request = {
 			method: 'POST',
@@ -153,5 +146,4 @@ describe('POST /<task-id>/edit', function() {
 		assert.isDefined(alert);
 		assert.match(alert.text(), /been saved/i);
 	});
-
 });

test/integration/route/task/index.js

@@ -12,22 +12,17 @@
 //
 // You should have received a copy of the GNU General Public License
 // along with Pa11y Dashboard.  If not, see <http://www.gnu.org/licenses/>.
-
-// jscs:disable maximumLineLength, requireArrowFunctions
 'use strict';
 
 const assert = require('proclaim');
 
 describe('GET /<task-id>', function() {
-
 	describe('when task has results', function() {
-
 		beforeEach(function(done) {
-			const request = {
+			this.navigate({
 				method: 'GET',
 				endpoint: '/abc000000000000000000001'
-			};
-			this.navigate(request, done);
+			}, done);
 		});
 
 		it('should send a 200 status', function() {
@@ -35,11 +30,17 @@ describe('GET /<task-id>', function() {
 		});
 
 		it('should display an "Edit" button', function() {
-			assert.strictEqual(this.last.dom('[href="/abc000000000000000000001/edit"]').length, 1);
+			assert.strictEqual(
+				this.last.dom('[href="/abc000000000000000000001/edit"]').length,
+				1
+			);
 		});
 
 		it('should display a "Delete" button', function() {
-			assert.strictEqual(this.last.dom('[href="/abc000000000000000000001/delete"]').length, 1);
+			assert.strictEqual(
+				this.last.dom('[href="/abc000000000000000000001/delete"]').length,
+				1
+			);
 		});
 
 		it('should display a "Run" button', function() {
@@ -47,16 +48,30 @@ describe('GET /<task-id>', function() {
 		});
 
 		it('should display a "Download CSV" button for the latest result', function() {
-			assert.strictEqual(this.last.dom('[href="/abc000000000000000000001/def000000000000000000001.csv"]').length, 1);
+			assert.strictEqual(
+				1,
+				this.last.dom(
+					'[href="/abc000000000000000000001/def000000000000000000001.csv"]'
+				).length
+			);
 		});
 
 		it('should display a "Download JSON" button for the latest result', function() {
-			assert.strictEqual(this.last.dom('[href="/abc000000000000000000001/def000000000000000000001.json"]').length, 1);
+			assert.strictEqual(
+				1,
+				this.last.dom(
+					'[href="/abc000000000000000000001/def000000000000000000001.json"]'
+				).length
+			);
 		});
 
 		it('should display links to all results', function() {
-			assert.isDefined(this.last.dom('[href="/abc000000000000000000001/def000000000000000000001"]').eq(0));
-			assert.isDefined(this.last.dom('[href="/abc000000000000000000001/def000000000000000000003"]').eq(0));
+			assert.isDefined(
+				this.last.dom('[href="/abc000000000000000000001/def000000000000000000001"]').eq(0)
+			);
+			assert.isDefined(
+				this.last.dom('[href="/abc000000000000000000001/def000000000000000000003"]').eq(0)
+			);
 		});
 
 		it('should display errors', function() {
@@ -76,11 +91,9 @@ describe('GET /<task-id>', function() {
 			assert.isDefined(elem);
 			assert.match(elem.text(), /notices \( 3 \)/i);
 		});
-
 	});
 
 	describe('when task has no results', function() {
-
 		beforeEach(function(done) {
 			const request = {
 				method: 'GET',
@@ -104,7 +117,5 @@ describe('GET /<task-id>', function() {
 			assert.isDefined(alert);
 			assert.match(alert.text(), /there are no results to show/i);
 		});
-
 	});
-
 });

test/integration/route/task/run.js

@@ -12,8 +12,6 @@
 //
 // You should have received a copy of the GNU General Public License
 // along with Pa11y Dashboard.  If not, see <http://www.gnu.org/licenses/>.
-
-// jscs:disable maximumLineLength, requireArrowFunctions
 'use strict';
 
 const assert = require('proclaim');
@@ -21,11 +19,10 @@ const assert = require('proclaim');
 describe('GET /<task-id>/run', function() {
 
 	beforeEach(function(done) {
-		const request = {
+		this.navigate({
 			method: 'GET',
 			endpoint: '/abc000000000000000000001/run'
-		};
-		this.navigate(request, done);
+		}, done);
 	});
 
 	it('should send a 200 status', function() {

test/integration/setup.js

@@ -12,39 +12,54 @@
 //
 // You should have received a copy of the GNU General Public License
 // along with Pa11y Dashboard.  If not, see <http://www.gnu.org/licenses/>.
-
-// jscs:disable requireArrowFunctions
 'use strict';
 
-const config = require('../../config/test.json');
+const {promisify} = require('util');
 const createNavigator = require('./helper/navigate');
-const createWebserviceClient = require('./helper/webservice');
-const loadFixtures = require('pa11y-webservice/data/fixture/load');
-const request = require('request');
+const createWebserviceClient = require('pa11y-webservice-client-node');
+const fetch = require('node-fetch');
+
+const loadFixtures = promisify(require('pa11y-webservice/data/fixture/load'));
+
+const config = {
+	host: process.env.HOST || '0.0.0.0',
+	port: Number(process.env.PORT) || 4000,
+	noindex: true,
+	readonly: false
+};
+
+const webserviceConfig = {
+	database: process.env.WEBSERVICE_DATABASE || 'mongodb://127.0.0.1/pa11y-dashboard-integration-test',
+	host: process.env.WEBSERVICE_HOST || '0.0.0.0',
+	port: Number(process.env.WEBSERVICE_PORT) || 3000,
+	dbOnly: true
+};
+
+async function assertDashboardIsAvailable(baseUrl) {
+	try {
+		const response = await fetch(baseUrl);
+		if (!response.ok) {
+			console.error('Service found but returned an error. HTTP status:', response.status);
+			throw Error();
+		}
+	} catch (error) {
+		console.error('Service under test not found or returned error.');
+		throw error;
+	}
+}
+
+before(async function() {
+	this.baseUrl = `http://${config.host}:${config.port}`;
+
+	await assertDashboardIsAvailable(this.baseUrl);
+	await loadFixtures('test', webserviceConfig);
+
+	this.webservice = createWebserviceClient(`http://${webserviceConfig.host}:${webserviceConfig.port}/`);
 
-// Run before all tests
-before(function(done) {
-	this.baseUrl = `http://localhost:${config.port}`;
 	this.last = {};
 	this.navigate = createNavigator(this.baseUrl, this.last);
-	this.webservice = createWebserviceClient(config);
-	assertTestAppIsRunning(this.baseUrl, () => {
-		loadFixtures('test', config.webservice, done);
-	});
 });
 
-// Run after each test
-afterEach(function(done) {
-	loadFixtures('test', config.webservice, done);
+afterEach(async function() {
+	await loadFixtures('test', webserviceConfig);
 });
-
-// Check that the test application is running, and exit if not
-function assertTestAppIsRunning(url, done) {
-	request(url, error => {
-		if (error) {
-			console.error('Error: Test app not started; run with `NODE_ENV=test node index.js`');
-			process.exit(1);
-		}
-		done();
-	});
-}

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" role="main">
+			<div class="section">
 				{{{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}}"/>
-				<em>(Note: default wait time is 0ms)</em>
+				<input class="form-control" id="new-task-wait" type="text" placeholder="E.g. 3000" name="wait" value="{{task.wait}}" aria-describedby="int3"/>
+				<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>
-				<em>(As key/value pairs, separated by newlines/colons)</em>
+				<textarea class="form-control" id="new-task-headers" name="headers" placeholder="Cookie: foo=bar" aria-describedby="int1">{{task.headers}}</textarea>
+				<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>
-						<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>
+</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">
-						<ul class="dropdown-menu pull-right">
+					<nav class="dropdown-menu pull-right" aria-label="task tools">
+						<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/presenter/result-list.js

@@ -14,17 +14,18 @@
 // along with Pa11y Dashboard.  If not, see <http://www.gnu.org/licenses/>.
 'use strict';
 
-const _ = require('underscore');
+const groupBy = require('lodash.groupby');
+const keys = require('lodash.keys');
 const moment = require('moment');
 
 module.exports = presentResultList;
 
 function presentResultList(results) {
-	const resultsByDay = _.groupBy(results, result => {
+	const resultsByDay = groupBy(results, result => {
 		return moment(result.date).format('YYYY-MM-DD');
 	});
 	const uniqueDayResults = [];
-	_.keys(resultsByDay).forEach(day => {
+	keys(resultsByDay).forEach(day => {
 		uniqueDayResults.push(resultsByDay[day][0]);
 	});
 	return uniqueDayResults;

view/presenter/result.js

@@ -14,7 +14,8 @@
 // along with Pa11y Dashboard.  If not, see <http://www.gnu.org/licenses/>.
 'use strict';
 
-const _ = require('underscore');
+const groupBy = require('lodash.groupby');
+const keys = require('lodash.keys');
 const presentIgnoreRules = require('./ignore');
 const techs = require('../../data/techniques')();
 
@@ -35,12 +36,12 @@ function presentResult(result) {
 
 	// Split out message types
 	if (result.results) {
-		const groupedByType = _.groupBy(result.results, 'type');
+		const groupedByType = groupBy(result.results, 'type');
 		['error', 'warning', 'notice'].forEach(type => {
 			const pluralType = `${type}s`;
 			const results = groupedByType[type] || [];
-			const groupedByCode = _.groupBy(results, 'code');
-			result[pluralType] = _.keys(groupedByCode).map(group => {
+			const groupedByCode = groupBy(results, 'code');
+			result[pluralType] = keys(groupedByCode).map(group => {
 				const groupMessage = groupedByCode[group][0];
 				groupMessage.count = groupedByCode[group].length;
 				groupMessage.items = groupedByCode[group].map(plural => ({

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.