Version 4.0.0

.github/workflows/tests.yml

@@ -17,10 +17,9 @@ jobs:
     strategy:
       matrix:
         include:
-          - node-version: 8.x
-            lint: true # Linter is run only once to shorten the total build time
-          - node-version: 10.x
           - node-version: 12.x
+            lint: true # Linter is run only once to shorten the total build time
+          - node-version: 14.x
 
     steps:
       - name: Checkout code from ${{ github.repository }}

CHANGELOG.md

@@ -1,5 +1,11 @@
 # Changelog
 
+## 4.0.0 (2021-11-26)
+
+* Update pa11y to version 6.
+* Drop support for versions of Node.js older than 12.
+* Update MongoDB Node driver from v2 to v3, which adds support for MongoDB v4 databases.
+
 ## 3.3.0 (2021-04-27)
 
 * Add new list view to the dashboard (thanks @sangitamane)

MIGRATION.md

@@ -2,12 +2,22 @@
 
 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)
+* [Table of contents](#table-of-contents)
+* [Migrating from 3.0 to 4.0](#migrating-from-30-to-40)
+* [Migrating from 2.0 to 3.0](#migrating-from-20-to-30)
+	* [PhantomJS to Headless Chrome](#phantomjs-to-headless-chrome)
+	* [Node.js Support](#nodejs-support)
+	* [Miscellaneous](#miscellaneous)
+* [Migrating from 1.0 to 2.0](#migrating-from-10-to-20)
+	* [Node.js Support](#nodejs-support-1)
 
-## Migrating from 2.0 to 3.0
+## Migrating from 3.0 to 4.0
+
+Pa11y Dashboard requires Node.js version 12 or greater. Versions 8 and 10 are not supported any more.
+
+## Migrating from 2.0 to 3.0
 
 ### PhantomJS to Headless Chrome
 
@@ -17,13 +27,13 @@ As a result of this change, [Pa11y Dashboard's requirements](../README.md#requir
 
 ### Node.js Support
 
-Pa11y Webservice 3 requires Node.js version 8 or greater. Versions 4 and 6 are not supported any more.
+Pa11y Dashboard 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
+## Migrating from 1.0 to 2.0
 
 ### Node.js Support
 

README.md

@@ -14,7 +14,9 @@ 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 8 or greater.
+Pa11y Dashboard is a [Node.js][node] application and requires a stable or LTS version of Node, currently version 12 or 14.
+
+⚠️ At the moment, Pa11y Dashboard won't work with Node.js v16. Please use Node.js 12 or 14. ⚠️
 
 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.
 
@@ -39,28 +41,32 @@ 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 `2.2` of the Node.js MongoDB driver, which means that [only MongoDB servers of versions 3.4 or older are supported](https://docs.mongodb.com/drivers/node/compatibility/). Please ensure that your MongoDB server fills the requirements before trying to run Pa11y Dashboard.
+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.
 
 #### Example MongoDB installation for macOS
 
-On recent versions of macOS (10.13 or later), you can use [Homebrew](https://brew.sh/) to install MongoDB 3.4 Community Edition. More recent versions of MongoDB are untested and unsupported.
+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.
 
 Tap the MongoDB Homebrew Tap:
+
 ```sh
 brew tap mongodb/brew
 ```
 
-Install the Community version of MongoDB:
+Install a supported Community version of MongoDB:
+
 ```sh
-brew install mongodb-community@3.4
+brew install mongodb-community@4.4
 ```
 
 Start the MongoDB server:
+
 ```sh
-brew services start mongodb/brew/mongodb-community@3.4
+brew services start mongodb/brew/mongodb-community@4.4
 ```
 
 Check that the service has started properly:
+
 ```sh
 $ brew services list
 Name              Status  User       Plist
@@ -150,7 +156,7 @@ 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)
@@ -163,8 +169,9 @@ 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:         | 3             | N/A                | 8+               | N/A              |
-| :hourglass:     | 2             | 2.4.2              | 4+               | 2020-01-16       |
+| :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       |
 
 If you're opening issues related to these, please mention the version that the issue relates to.

data/.eslintrc.js

@@ -1,7 +1,7 @@
 'use strict';
 
 // Clone the main config
-var config = module.exports = JSON.parse(JSON.stringify(require('../.eslintrc')));
+const config = module.exports = JSON.parse(JSON.stringify(require('../.eslintrc')));
 
 // Disable max line length/statements
 config.rules['max-len'] = 'off';

package.json

@@ -1,6 +1,6 @@
 {
   "name": "pa11y-dashboard",
-  "version": "3.3.0",
+  "version": "4.0.0",
   "private": true,
   "description": "Pa11y Dashboard is a visual web interface to the Pa11y accessibility reporter",
   "keywords": [
@@ -21,8 +21,7 @@
   "bugs": "https://github.com/pa11y/dashboard/issues",
   "license": "GPL-3.0",
   "engines": {
-    "node": ">=8",
-    "npm": ">=6"
+    "node": ">=12 <16"
   },
   "dependencies": {
     "body-parser": "~1.19.0",
@@ -30,18 +29,18 @@
     "express": "~4.17.1",
     "express-hbs": "~2.4.0",
     "http-headers": "~3.0.2",
-    "kleur": "~4.1.2",
-    "moment": "~2.29.0",
-    "pa11y-webservice": "~3.2.1",
-    "pa11y-webservice-client-node": "~2.0.0",
-    "underscore": "~1.11.0"
+    "kleur": "~4.1.4",
+    "moment": "~2.29.1",
+    "pa11y-webservice": "~4.0.0",
+    "pa11y-webservice-client-node": "~3.0.0",
+    "underscore": "~1.13.1"
   },
   "devDependencies": {
-    "bower": "^1.8.8",
-    "cheerio": "^1.0.0-rc.3",
-    "eslint": "^6.8.0",
+    "bower": "^1.8.13",
+    "cheerio": "^1.0.0-rc.10",
+    "eslint": "^7.27.0",
     "less": "^3.11.1",
-    "mocha": "^7.2.0",
+    "mocha": "^8.4.0",
     "pa11y-lint-config": "^1.2.1",
     "proclaim": "^3.6.0",
     "request": "^2.88.2",

public/js/site.js

@@ -26,7 +26,7 @@ $(document).ready(function(){
     var zoomResetButton = $('[data-role="zoom-reset"]');
     var graphContainer = $('[data-role="graph"]');
     var dateSelectDropdownMenu = $('[data-role="date-select-dropdown-menu"]');
-    var legend = graphContainer.parents('.graph-container').find('.dashedLegend');
+    var legend = graphContainer.parent('.graph-container').find('.dashedLegend');
 	var list = localStorage.getItem("listview") || "";    // get choice or nothing
 
 

public/less/site.less

@@ -71,14 +71,6 @@
 	}
 }
 
-main section {
-	margin: 5em 0;
-}
-
-.results-download {
-	margin: 1.5em 0;
-}
-
 .supersize-me {
 	text-align: center;
 	font-size: 112px;
@@ -593,9 +585,9 @@ ul.date-links {
 }
 
 .dashedLegend {
-	position: relative;
-	top: 55px;
-	right: 20px;
+	position: absolute;
+	top: 70px;
+	right: 40px;
 	font-size: smaller;
 	color: #545454;
 	background-color: #fff;

test/.eslintrc.js

@@ -1,7 +1,7 @@
 'use strict';
 
 // Clone the main config
-var config = module.exports = JSON.parse(JSON.stringify(require('../.eslintrc')));
+const config = module.exports = JSON.parse(JSON.stringify(require('../.eslintrc')));
 
 // We use `this` all over the integration tests
 config.rules['no-invalid-this'] = 'off';

view/partial/graph.html

@@ -14,61 +14,58 @@ 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/>.
 }}
-<section class="col-md-12 clearfix">
-	<h2>Results Overview</h2>
-
-	<div class="col-md-12 graph-container graph-spacer ruled clearfix">
-		<div class="col-md-10">
-			<div class="row">
-				<div class="col-md-3 col-sm-4 col-xs-3">
-					<button class="btn btn-sm btn-default btn-full-width btn_action_export">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>
+<div class="col-md-12 clearfix">
+	<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>
+			</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 data-role="graph" class="graph"></div>
 		</div>
-		<div class="col-md-2 dashedLegend">
+		<div data-role="graph" class="graph"></div>
+		<div class="dashedLegend">
 			<div class="dashedContainer">
-				<table>
-					<tbody>
-						<tr>
-							<td class="legendColorBox">
-								<div class="clearfix legendIcon legendErrors">
-									<div></div>
-								</div>
-							</td>
-							<td class="legendLabel">Errors</td>
-						</tr>
-						<tr>
-							<td class="legendColorBox">
-								<div class="clearfix legendIcon legendWarnings">
-									<div></div><div></div>
-								</div>
-							</td>
-							<td class="legendLabel">Warnings</td>
-						</tr>
-						<tr>
-							<td class="legendColorBox">
-								<div class="clearfix legendIcon legendNotices">
-									<div></div><div></div><div></div>
-								</div>
-							</td>
-							<td class="legendLabel">Notices</td>
-						</tr>
-					</tbody>
-				</table>
+			    <table>
+			        <tbody>
+			            <tr>
+			                <td class="legendColorBox">
+			                    <div class="clearfix legendIcon legendErrors">
+			                        <div></div>
+			                    </div>
+			                </td>
+			                <td class="legendLabel">Errors</td>
+			            </tr>
+			            <tr>
+			                <td class="legendColorBox">
+			                    <div class="clearfix legendIcon legendWarnings">
+			                        <div></div><div></div>
+			                    </div>
+			                </td>
+			                <td class="legendLabel">Warnings</td>
+			            </tr>
+			            <tr>
+			                <td class="legendColorBox">
+			                    <div class="clearfix legendIcon legendNotices">
+			                        <div></div><div></div><div></div>
+			                    </div>
+			                </td>
+			                <td class="legendLabel">Notices</td>
+			            </tr>
+			        </tbody>
+			    </table>
 			</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="ruled col-md-12 graph-spacer">
+<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>Results for {{simplify-url task.url}}</caption>
+			<caption>Pa11y results for this URL</caption>
 			<thead>
 				<tr>
 					<th>Date</th>
@@ -80,7 +77,7 @@ along with Pa11y Dashboard.  If not, see <http://www.gnu.org/licenses/>.
 			<tbody>
 			{{#results}}
 				<tr data-role="url-stats">
-					<td data-value="{{date-timestamp date}}" data-role="date"><a href="{{href}}">{{date-format date format="DD MMM YYYY"}}</a></td>
+					<td data-value="{{date-timestamp date}}" data-role="date">{{date-format date format="DD MMM YYYY"}}</td>
 					<td class="text-center" data-label="error">{{count.error}}</td>
 					<td class="text-center" data-label="warning">{{count.warning}}</td>
 					<td class="text-center" data-label="notice">{{count.notice}}</td>
@@ -89,4 +86,4 @@ along with Pa11y Dashboard.  If not, see <http://www.gnu.org/licenses/>.
 			</tbody>
 		</table>
 	</div>
-</section>
+</div>

view/partial/result.html

@@ -15,18 +15,56 @@ You should have received a copy of the GNU General Public License
 along with Pa11y Dashboard.  If not, see <http://www.gnu.org/licenses/>.
 }}
 
-<section class="col-md-12">
-	<h2 id="tabSectionHeading">Results for {{date-format task.lastResult.date format="DD MMM YYYY"}}</h2>
-	<div class="results-download">
-		<a href="{{mainResult.hrefCsv}}" class="btn btn-default" data-test="download-csv">
-			Download CSV <span class="glyphicon glyphicon-download" aria-hidden="true"></span>
-		</a>
-		<a href="{{mainResult.hrefJson}}" class="btn btn-default" data-test="download-json">
-			Download JSON <span class="glyphicon glyphicon-download" aria-hidden="true"></span>
-		</a>
+<div class="col-md-3 aside">
+	<div class="row">
+		<div class="action-buttons col-md-12 col-sm-6">
+			<div class="row">
+				<div class="col-md-12 col-sm-6 col-xs-12">
+			        <a href="{{mainResult.hrefCsv}}" class="btn-full-width btn btn-default" data-test="download-csv">
+			        	Download CSV <span class="glyphicon glyphicon-download" aria-hidden="true"></span>
+			        </a>
+				</div>
+				<div class="col-md-12 col-sm-6 col-xs-12">
+			        <a href="{{mainResult.hrefJson}}" class="btn-full-width btn btn-default" data-test="download-json">
+			        	Download JSON <span class="glyphicon glyphicon-download" aria-hidden="true"></span>
+			        </a>
+				</div>
+			</div>
+		</div>
 	</div>
+	<div class="row date-selector-row">
+		<div id="top" 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>
+						<nav aria-labelledby="dates-navigation">
+							<ul class="dates-list">
+								{{#results}}
+									<li><a class="" href="{{href}}">{{date-format date format="DD MMM YYYY"}}</a></li>
+								{{/results}}
+							</ul>
+						</nav>
+					</div>
+				</div>
+			</div>
+		</div>
+	</div>
+	<div class="row">
+		<div class="col-md-12 col-sm-12 clearfix">
+			<div class="well">
+				<h4 class="crunch-top">View results in browser</h4>
+				<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>
 
-	<ul id="top" class="nav nav-tabs category-list">
+<div class="col-md-9">
+	<ul class="nav nav-tabs category-list" role="tablist">
 		<li class="category-list__item category-list__item_type_error active" role="presentation">
 			<a class="category-list__link" id="errors" href="#errors-list" aria-controls="errors-list" role="tab" data-toggle="tab" data-test="task-errors">
 				Errors ( {{mainResult.count.error}} )
@@ -285,8 +323,4 @@ along with Pa11y Dashboard.  If not, see <http://www.gnu.org/licenses/>.
 			{{/if}}
 		</div>
 	</div>
-	<div class="well">
-		<h3 class="crunch-top h3">View results in browser</h3>
-		<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>
-</section>
+</div>