Version 3.0.0 (#236)

Includes several updates to the migration guide and the README.

.eslintrc.js

@@ -1,3 +1,3 @@
 'use strict';
 
-module.exports = require('pa11y-lint-config/eslint/es6');
+module.exports = require('pa11y-lint-config/eslint/es2017');

.travis.yml

@@ -3,9 +3,9 @@
 language: node_js
 matrix:
   include:
-    - node_js: '4'
-    - node_js: '5'
-    - node_js: '6'
+    - node_js: '8'
+    - node_js: '10'
+    - node_js: '12'
 
 # Build only master (and pull-requests)
 branches:

CHANGELOG.md

@@ -1,6 +1,30 @@
 
 # Changelog
 
+## 3.0.0 (2019-07-16)
+
+  * Update pa11y to v5, which replaces Phantomjs with Headless Chrome
+  * Update dependencies
+  * Several bug fixes and documentation updates
+  * See the [migration guide](https://github.com/pa11y/pa11y-dashboard/blob/master/MIGRATION.md#migrating-from-20-to-30) for details of the breaking changes in this release
+
+## 2.4.2 (2018-06-21)
+
+  * Update dependencies
+    * body-parser: ~1.17.1 to ^1.18.3
+    * compression: ~1.6 to ^1.7.2
+    * express: ~4.15.2 to ^4.16.3
+    * moment: ~2.15.2 to ^2.22.2
+
+## 2.4.1 (2017-11-28)
+
+  * Update dependencies
+    * pa11y-webservice: ^2.3.0 to ^2.3.1
+
+## 2.4.0 (2017-11-23)
+
+  * Add the ability to export the results graph as a PNG, see #197 for more information
+
 ## 2.3.0 (2017-10-31)
 
   * Large overhaul of the results page, see #196 for more information

MIGRATION.md

@@ -1,18 +1,29 @@
-
-Migration Guide
-===============
+# Migration Guide
 
 Pa11y Dashboard's API changes between major versions. This is a guide to help you make the switch when this happens.
 
+## Table of Contents
 
-Table Of Contents
------------------
-
+- [Migrating from 2.0 to 3.0](#migrating-from-20-to-30)
 - [Migrating from 1.0 to 2.0](#migrating-from-10-to-20)
 
+## Migrating from 2.0 to 3.0
 
-Migrating from 1.0 to 2.0
--------------------------
+### PhantomJS to Headless Chrome
+
+Pa11y Dashboard 3 uses version 5 of Pa11y, which replaces PhantomJS with [Headless Chrome](https://developers.google.com/web/updates/2017/04/headless-chrome). This allows us to use more modern JavaScript APIs and make Pa11y testing more stable.
+
+As a result of this change, [Pa11y Dashboard's requirements](../README.md#requirements) have changed, and you may need to install additional dependencies required by Chrome before being able to use this version.
+
+### Node.js Support
+
+Pa11y Webservice 3 requires Node.js version 8 or greater. Versions 4 and 6 are not supported any more.
+
+### Miscellaneous
+
+The default viewport dimensions for Pa11y have been changed from `1024x768` to `1280x1024`. This could make pa11y report a different number of errors if different content appears on the page based on its width, so results obtained with v2 and v3 may not be comparable.
+
+## Migrating from 1.0 to 2.0
 
 ### Node.js Support
 

Makefile

@@ -35,6 +35,7 @@ uglify:
 		public/js/vendor/flot/jquery.flot.time.js \
 		public/js/vendor/flot/jquery.flot.selection.js \
 		public/js/vendor/flot/jquery.flot.resize.js \
+		public/js/vendor/helpers/html2canvas.min.js \
 		public/js/site.js \
 		-o ./public/js/site.min.js
 	@$(TASK_DONE)

Makefile.node

@@ -21,7 +21,7 @@
 NPM_BIN = ./node_modules/.bin
 export PATH := $(NPM_BIN):$(PATH)
 export EXPECTED_COVERAGE := 90
-export INTEGRATION_TIMEOUT := 5000
+export INTEGRATION_TIMEOUT := 10000
 export INTEGRATION_SLOW := 4000
 
 

README.md

@@ -1,5 +1,4 @@
-Pa11y Dashboard
-===============
+# Pa11y Dashboard
 
 Pa11y Dashboard is a web interface to the [Pa11y][pa11y] accessibility reporter; allowing you to focus on *fixing* issues rather than hunting them down.
 
@@ -8,27 +7,39 @@ Pa11y Dashboard is a web interface to the [Pa11y][pa11y] accessibility reporter;
 [![Build status][shield-build]][info-build]
 [![GPL-3.0 licensed][shield-license]][info-license]
 
----
-
-## Latest news from Pa11y
-
-✨ 🔜 ✨ The Pa11y team is very excited to announce plans for the successor to Pa11y Dashboard and Pa11y Webservice, codename "Sidekick". Help us define the features that you want to see by visiting the [proposal][sidekick-proposal]. ✨  
-
----
-
-
 ![dashboard](https://f.cloud.github.com/assets/1225142/1549567/f0361e72-4de8-11e3-8d14-3fe6900cc15d.jpg)
 ![results-page](https://f.cloud.github.com/assets/1225142/1549568/f225aa54-4de8-11e3-8b25-ef2f405997a3.jpg)
 
+---
 
-Setup
------
+## Requirements
 
-Pa11y Dashboard requires [Node.js][node] 4+. See the [Pa11y][pa11y] documentation for detailed instructions on how to install this on your operating system.
+Pa11y Dashboard is a [Node.js][node] application and requires a stable or LTS version of Node, currently version 8 or greater.
 
-You'll also need to have [MongoDB][mongo] installed and running. See the [MongoDB install guide][mongo-install] for more information on this.
+Pa11y Dashboard also requires a [MongoDB][mongo] database to be available so it can 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.
 
-You'll then need to clone this repo locally and install dependencies with `npm install`. Now you need to add some configuration before you can run the application. We can do this in two ways:
+Since version 3, Pa11y Dashboard uses Headless Chrome in order to run the tests. This means that additional dependencies maybe be required.
+
+In [Unix-like](https://en.wikipedia.org/wiki/Unix-like) systems you may need to install the `libnss3` and `libgconf-2-4` libraries in order to be able to run Chrome. If you're trying to run the app in a headless environment (e.g. the cloud, or a headless server), you may also need to configure Xvfb before. Please refer to the documentation from your provider for details on how to do this.
+
+## Setup
+
+In order to run Pa11y Dashboard, we recommend cloning this repository locally:
+
+```sh
+git clone https://github.com/pa11y/pa11y-dashboard.git
+```
+
+Then installing the dependencies:
+
+```sh
+cd pa11y-dashboard
+npm install
+```
+
+You'll also need to have [MongoDB][mongo] installed and running. For quick access, you can install via a package manager such as on Mac OS `brew install mongodb` or on Linux (Debian) it would be `apt-get install mongodb`. To run MongoDB, you can run `mongod` in the command line. See the [MongoDB install guide][mongo-install] for more detailed information.
+
+The last step before being able to run the application is to define a configuration for it. This can be done in two ways:
 
 ### Option 1: Using Environment Variables
 
@@ -58,13 +69,11 @@ Now that you've got your application configured, make sure you have a MongoDB se
 NODE_ENV=development node index.js
 ```
 
-See [development instructions](#development) for more information about running locally (and restarting automatically when files change).
+See [Contributing](#contributing) for more information about running locally (and restarting automatically when files change).
 
 If you run into problems, check the [troubleshooting guide][troubleshooting].
 
-
-Configurations
---------------
+## Configurations
 
 The boot configurations for Pa11y Dashboard are as follows. Look at the sample JSON files in the repo for example usage.
 
@@ -83,9 +92,7 @@ The boot configurations for Pa11y Dashboard are as follows. Look at the sample J
 ### 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_`.
 
-
-Contributing
-------------
+## Contributing
 
 There are many ways to contribute to Pa11y Dashboard, we cover these in the [contributing guide](CONTRIBUTING.md) for this repo.
 
@@ -110,14 +117,12 @@ make less    # Compile the site CSS from LESS files
 make uglify  # Compile and uglify the client-side JavaScript
 ```
 
+## Useful Resources
 
-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)
 
-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.
 
@@ -125,19 +130,16 @@ We also maintain a [migration guide](MIGRATION.md) to help you migrate.
 
 | :grey_question: | Major Version | Last Minor Release | Node.js Versions | Support End Date |
 | :-------------- | :------------ | :----------------- | :--------------- | :--------------- |
-| :heart:         | 2             | N/A                | 4+               | N/A              |
+| :heart:         | 3             | N/A                | 8+               | N/A              |
+| :hourglass:     | 2             | 2.4.2              | 4+               | 2020-01-16       |
 | :skull:         | 1             | 1.12               | 0.10–6           | 2016-12-05       |
 
 If you're opening issues related to these, please mention the version that the issue relates to.
 
-
-License
--------
+## License
 
 Pa11y Dashboard is licensed under the [GNU General Public License 3.0][info-license].<br/>
-Copyright &copy; 2013–2017, Team Pa11y
-
-
+Copyright &copy; 2013–2019, Team Pa11y and contributors
 
 [gpl]: http://www.gnu.org/licenses/gpl-3.0.html
 [mongo]: http://www.mongodb.org/
@@ -151,10 +153,10 @@ Copyright &copy; 2013–2017, Team Pa11y
 [travis-img]: https://travis-ci.org/pa11y/dashboard.png?branch=master
 [troubleshooting]: https://github.com/pa11y/dashboard/blob/master/TROUBLESHOOTING.md
 
-[info-license]: LICENSE
 [info-node]: package.json
 [info-build]: https://travis-ci.org/pa11y/pa11y-dashboard
-[shield-license]: https://img.shields.io/badge/license-GPL%203.0-blue.svg
-[shield-node]: https://img.shields.io/badge/node.js%20support-4–6-brightgreen.svg
-[shield-version]: https://img.shields.io/badge/version-2.3.0-blue.svg
+[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-license]: https://img.shields.io/badge/license-GPL%203.0-blue.svg

data/standards.js

@@ -910,7 +910,7 @@ function getStandards() {
 					description: 'If any audio plays automatically for longer than 3 seconds, check that there is the ability to pause, stop or mute the audio.'
 				},
 				{
-					name: 'WCAG2AA.Principle1.Guideline1_4.1_4_3.G18',
+					name: 'WCAG2AA.Principle1.Guideline1_4.1_4_3.G18.Fail',
 					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/}.'
 				},
 				{

index.js

@@ -51,8 +51,10 @@ require('./app')(config, (error, app) => {
 
 			console.log('');
 			console.log(chalk.underline.cyan('Pa11y Webservice started'));
-			console.log(chalk.grey('mode: %s'), process.env.NODE_ENV);
-			console.log(chalk.grey('uri:  %s'), webservice.server.info.uri);
+			console.log(chalk.grey('mode:     %s'), process.env.NODE_ENV);
+			console.log(chalk.grey('uri:      %s'), webservice.server.info.uri);
+			console.log(chalk.grey('database: %s'), config.webservice.database);
+			console.log(chalk.grey('cron:     %s'), config.webservice.cron);
 		});
 	}
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "pa11y-dashboard",
-  "version": "2.3.0",
+  "version": "3.0.0",
   "private": true,
   "description": "Pa11y Dashboard is a visual web interface to the Pa11y accessibility reporter",
   "keywords": [
@@ -21,30 +21,31 @@
   "bugs": "https://github.com/pa11y/dashboard/issues",
   "license": "GPL-3.0",
   "engines": {
-    "node": ">=4"
+    "node": ">=8",
+    "npm": ">=6"
   },
   "dependencies": {
-    "body-parser": "~1.17.1",
-    "chalk": "~1.1",
-    "compression": "~1.6",
-    "express": "~4.15.2",
-    "express-hbs": "~1.0",
-    "http-headers": "^3.0.1",
-    "moment": "~2.15.2",
-    "pa11y-webservice": "^2.3.0",
-    "pa11y-webservice-client-node": "^1.2.1",
-    "underscore": "~1.8"
+    "body-parser": "~1.19.0",
+    "chalk": "~2.4.2",
+    "compression": "~1.7.4",
+    "express-hbs": "~2.1.2",
+    "express": "~4.17.1",
+    "http-headers": "~3.0.2",
+    "moment": "~2.24.0",
+    "pa11y-webservice-client-node": "~2.0.0",
+    "pa11y-webservice": "~3.0.0",
+    "underscore": "~1.9.1"
   },
   "devDependencies": {
-    "bower": "~1.7",
-    "cheerio": "~0.20",
-    "eslint": "^3.18.0",
-    "less": "~2.7",
-    "mocha": "^2",
-    "pa11y-lint-config": "^1.0.0",
-    "proclaim": "^3",
-    "request": "^2.74",
-    "uglify-js": "~2.6"
+    "bower": "^1.8.8",
+    "cheerio": "^1.0.0-rc.3",
+    "eslint": "^6.0.1",
+    "less": "^3.9.0",
+    "mocha": "^6.1.4",
+    "pa11y-lint-config": "^1.2.1",
+    "proclaim": "^3.6.0",
+    "request": "^2.88.0",
+    "uglify-js": "^3.6.0"
   },
   "scripts": {
     "start": "node index.js",

public/js/site.js

@@ -132,7 +132,7 @@ $(document).ready(function(){
         plotGraphData();
     });
 
-    $(ruleTooltip).tooltip();
+    ruleTooltip.tooltip();
 
     // Function to animate sections
     function animateSection (sectionName, offset){
@@ -172,6 +172,7 @@ $(document).ready(function(){
 
     function plotGraphData () {
         $.plot(graphContainer, getData(), graphOptions);
+        exportGraph();
     }
 
     function getData() {
@@ -202,6 +203,37 @@ $(document).ready(function(){
         zoomResetButton.toggleClass('hidden');
     }
 
+	function exportGraph() {
+		var exportBtn = $('.btn_action_export');
+
+		exportBtn.click(function(e) {
+			e.preventDefault();
+
+			var fileName = $('h1').text().toLowerCase().split(' ').join('_');
+			var date = new Date();
+
+			fileName += '_' + date.getDate() + '-' + (date.getMonth() + 1) + '-' + date.getFullYear();
+
+			html2canvas($('.graph').get(0), {
+				onrendered: function (canvas) {
+					downloadFile(canvas.toDataURL('image/png'), fileName + '.png');
+				}
+			});
+		});
+	}
+
+	function downloadFile(dataurl, filename) {
+		var link = document.createElement('a');
+		link.href = dataurl;
+		link.setAttribute('download', filename);
+
+		var clickEvent = document.createEvent('MouseEvents');
+		clickEvent.initEvent('click', false, true);
+		link.dispatchEvent(clickEvent);
+
+		return false;
+	}
+
     graphContainer.bind('plotselected', function (event, ranges) {
         // clamp the zooming to prevent eternal zoom
         if (ranges.xaxis.to - ranges.xaxis.from < 0.00001) {

public/less/site.less

@@ -523,8 +523,8 @@ ul.date-links {
 }
 
 .series-checkboxes {
-  padding: 0 30px;
-  margin-bottom: 15px;
+  padding: 0 15px;
+  margin-bottom: 16px;
 
   li {
 	width: 32%;
@@ -532,7 +532,7 @@ ul.date-links {
 	border-radius: @border-radius-base;
 
 	.series-checkbox-container {
-	  padding: 2px 4px 3px 4px;
+	  padding: 4px 4px 5px 4px;
 	}
 
 	label {

test/integration/route/index.js

@@ -40,10 +40,11 @@ describe.only('GET /', function() {
 
 	it('should display all of the expected tasks', function() {
 		const tasks = this.last.dom('[data-test=task]');
-		assert.strictEqual(tasks.length, 3);
+		assert.strictEqual(tasks.length, 4);
 		assert.match(tasks.eq(0).text(), /npg home\s+\(wcag2aa\)/i);
 		assert.match(tasks.eq(1).text(), /npg home\s+\(wcag2aaa\)/i);
 		assert.match(tasks.eq(2).text(), /nature news\s+\(section508\)/i);
+		assert.match(tasks.eq(3).text(), /z integration test\s+\(wcag2aa\)/i);
 	});
 
 	it('should have links to each task', function() {
@@ -51,6 +52,7 @@ describe.only('GET /', function() {
 		assert.strictEqual(tasks.eq(0).find('[href="/abc000000000000000000001"]').length, 1);
 		assert.strictEqual(tasks.eq(1).find('[href="/abc000000000000000000002"]').length, 1);
 		assert.strictEqual(tasks.eq(2).find('[href="/abc000000000000000000003"]').length, 1);
+		assert.strictEqual(tasks.eq(3).find('[href="/abc000000000000000000004"]').length, 1);
 	});
 
 	it('should display an "Edit" button for each task', function() {
@@ -58,6 +60,7 @@ describe.only('GET /', function() {
 		assert.strictEqual(tasks.eq(0).find('[href="/abc000000000000000000001/edit"]').length, 1);
 		assert.strictEqual(tasks.eq(1).find('[href="/abc000000000000000000002/edit"]').length, 1);
 		assert.strictEqual(tasks.eq(2).find('[href="/abc000000000000000000003/edit"]').length, 1);
+		assert.strictEqual(tasks.eq(3).find('[href="/abc000000000000000000004/edit"]').length, 1);
 	});
 
 	it('should display a "Delete" button for each task', function() {
@@ -65,6 +68,7 @@ describe.only('GET /', function() {
 		assert.strictEqual(tasks.eq(0).find('[href="/abc000000000000000000001/delete"]').length, 1);
 		assert.strictEqual(tasks.eq(1).find('[href="/abc000000000000000000002/delete"]').length, 1);
 		assert.strictEqual(tasks.eq(2).find('[href="/abc000000000000000000003/delete"]').length, 1);
+		assert.strictEqual(tasks.eq(3).find('[href="/abc000000000000000000004/delete"]').length, 1);
 	});
 
 	it('should display a "Run" button for each task', function() {
@@ -72,6 +76,7 @@ describe.only('GET /', function() {
 		assert.strictEqual(tasks.eq(0).find('[href="/abc000000000000000000001/run"]').length, 1);
 		assert.strictEqual(tasks.eq(1).find('[href="/abc000000000000000000002/run"]').length, 1);
 		assert.strictEqual(tasks.eq(2).find('[href="/abc000000000000000000003/run"]').length, 1);
+		assert.strictEqual(tasks.eq(3).find('[href="/abc000000000000000000004/run"]').length, 1);
 	});
 
 	it('should display the task result counts if the task has been run', function() {

view/partial/graph.html

@@ -17,7 +17,13 @@ along with Pa11y Dashboard.  If not, see <http://www.gnu.org/licenses/>.
 <div class="col-md-12 clearfix">
 	<div class="graph-container graph-spacer ruled clearfix">
 		<div class="row">
-			<ul class="list-unstyled floated-list series-checkboxes clearfix col-md-5 col-sm-6 col-xs-12 pull-right" data-role="series-checkboxes"></ul>
+			<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>
+			</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>
 		</div>
 		<div data-role="graph" class="graph"></div>
 		<div class="dashedLegend">