Spacing change done

.github/workflows/tests.yml

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

CHANGELOG.md

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

README.md

@@ -14,9 +14,7 @@ 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.
-
-⚠️ At the moment, Pa11y Dashboard won't work with Node.js v16. Please use Node.js 12 or 14. ⚠️
+Pa11y Dashboard is a [Node.js][node] application and requires a stable or LTS version of Node, currently version 8 or greater.
 
 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.
 
@@ -41,32 +39,28 @@ 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 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.
 
 #### 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](https://brew.sh/) to install MongoDB 3.4 Community Edition. More recent versions of MongoDB are untested and unsupported.
 
 Tap the MongoDB Homebrew Tap:
-
 ```sh
 brew tap mongodb/brew
 ```
 
-Install a supported Community version of MongoDB:
-
+Install the Community version of MongoDB:
 ```sh
-brew install mongodb-community@4.4
+brew install mongodb-community@3.4
 ```
 
 Start the MongoDB server:
-
 ```sh
-brew services start mongodb/brew/mongodb-community@4.4
+brew services start mongodb/brew/mongodb-community@3.4
 ```
 
 Check that the service has started properly:
-
 ```sh
 $ brew services list
 Name              Status  User       Plist
@@ -156,7 +150,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)
@@ -169,9 +163,8 @@ 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:         | 4             | N/A                | 12+              | N/A              |
-| :hourglass:     | 3             | 3.3.0              | 8+               | 2022-05-26       |
-| :skull:         | 2             | 2.4.2              | 4+               | 2020-01-16       |
+| :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.

data/.eslintrc.js

@@ -1,7 +1,7 @@
 'use strict';
 
 // Clone the main config
-const config = module.exports = JSON.parse(JSON.stringify(require('../.eslintrc')));
+var 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": "4.0.0",
+  "version": "3.3.0",
   "private": true,
   "description": "Pa11y Dashboard is a visual web interface to the Pa11y accessibility reporter",
   "keywords": [
@@ -21,7 +21,8 @@
   "bugs": "https://github.com/pa11y/dashboard/issues",
   "license": "GPL-3.0",
   "engines": {
-    "node": ">=12 <16"
+    "node": ">=8",
+    "npm": ">=6"
   },
   "dependencies": {
     "body-parser": "~1.19.0",
@@ -29,18 +30,18 @@
     "express": "~4.17.1",
     "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"
+    "kleur": "~4.1.2",
+    "moment": "~2.29.0",
+    "pa11y-webservice": "~3.2.1",
+    "pa11y-webservice-client-node": "~2.0.0",
+    "underscore": "~1.11.0"
   },
   "devDependencies": {
-    "bower": "^1.8.13",
-    "cheerio": "^1.0.0-rc.10",
-    "eslint": "^7.27.0",
+    "bower": "^1.8.8",
+    "cheerio": "^1.0.0-rc.3",
+    "eslint": "^6.8.0",
     "less": "^3.11.1",
-    "mocha": "^8.4.0",
+    "mocha": "^7.2.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.parent('.graph-container').find('.dashedLegend');
+    var legend = graphContainer.parents('.graph-container').find('.dashedLegend');
 	var list = localStorage.getItem("listview") || "";    // get choice or nothing
 
 

public/less/site.less

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

test/.eslintrc.js

@@ -1,7 +1,7 @@
 'use strict';
 
 // Clone the main config
-const config = module.exports = JSON.parse(JSON.stringify(require('../.eslintrc')));
+var 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,58 +14,61 @@ 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 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>
+<section class="col-md-12 clearfix">
+	<h2>Results Overview</h2>
 
-			<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 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>
+			<div data-role="graph" class="graph"></div>
 		</div>
-		<div data-role="graph" class="graph"></div>
-		<div class="dashedLegend">
+		<div class="col-md-2 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="col-md-12 hidden">
-	<div class="graph-spacer ruled">
+
+	<div class="ruled col-md-12 graph-spacer">
 		<table id="graph-data" class="table graph-table" summary="Accessibility results from Pa11y for this page">
-			<caption>Pa11y results for this URL</caption>
+			<caption>Results for {{simplify-url task.url}}</caption>
 			<thead>
 				<tr>
 					<th>Date</th>
@@ -77,7 +80,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">{{date-format date format="DD MMM YYYY"}}</td>
+					<td data-value="{{date-timestamp date}}" data-role="date"><a href="{{href}}">{{date-format date format="DD MMM YYYY"}}</a></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>
@@ -86,4 +89,4 @@ along with Pa11y Dashboard.  If not, see <http://www.gnu.org/licenses/>.
 			</tbody>
 		</table>
 	</div>
-</div>
+</section>

view/partial/result.html

@@ -15,56 +15,18 @@ 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-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>
+<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>
-	<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>
 	
-<div class="col-md-9">
-	<ul class="nav nav-tabs category-list" role="tablist">
+	<ul id="top" class="nav nav-tabs category-list">
 		<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}} )
@@ -323,4 +285,8 @@ along with Pa11y Dashboard.  If not, see <http://www.gnu.org/licenses/>.
 			{{/if}}
 		</div>
 	</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>