Spacing change done

First draft of layout changes for results page on pa11y dashboard.
Fixed the a11y errors on Pa11y dashboard results and add new url page (#285 )
2021-11-01 16:22:59 +01:00 · 2021-10-28 18:01:23 +02:00 · 2021-05-26 16:38:38 +02:00 · 2021-05-18 14:32:35 +01:00 · 2021-05-18 14:32:35 +01:00 · 2021-04-27 15:03:22 +01:00
30 changed files with 1059 additions and 882 deletions
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -1,3 +1,3 @@
 'use strict';

-module.exports = require('pa11y-lint-config/eslint/es6');
+module.exports = require('pa11y-lint-config/eslint/es2017');
--- a/.github/workflows/tests.yml
+++ b/.github/workflows/tests.yml
@@ -0,0 +1,50 @@
+# 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
+  pull_request:
+    branches: # Run actions when a PR is pushed based on one of these branches
+      - master
+
+jobs:
+  checkout_and_test:
+    runs-on: ubuntu-latest
+    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
+
+    steps:
+      - name: Checkout code from ${{ github.repository }}
+        uses: actions/checkout@v2
+      - name: Setup node
+        uses: actions/setup-node@v2
+        with:
+          node-version: ${{ matrix.node-version }}
+      - name: MongoDB in GitHub Actions
+        uses: supercharge/mongodb-github-action@1.3.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
+        run: cp config/test.sample.json config/test.json
+      - name: Start test app
+        run: NODE_ENV=test node index.js &
+      - name: Wait / Sleep
+        uses: jakejarvis/wait-action@v0.1.0
+        with:
+          time: '10s'
+      - name: Run tests
+        run: make ci
--- a/.travis.yml
+++ b/.travis.yml
@@ -1,24 +0,0 @@
-
-# Language/versions
-language: node_js
-matrix:
-  include:
-    - node_js: '4'
-    - node_js: '5'
-    - node_js: '6'
-
-# Build only master (and pull-requests)
-branches:
-  only:
-    - master
-
-# Services setup
-services:
-  - mongodb
-
-# Build script
-before_script:
-  - cp config/test.sample.json config/test.json
-  - NODE_ENV=test node index.js &
-  - sleep 5 # give server time to start
-script: 'make ci'
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,63 +1,89 @@
-
 # Changelog

+## 3.3.0 (2021-04-27)
+
+* Add new list view to the dashboard (thanks @sangitamane)
+* Upgrade express-hbs to the latest version in order to address several potential vulnerabilities
+* Fixes a MongoDB "ObjectID generation failed" error.
+* Update pa11y-webservice to version 3.2.1 and pa11y to version 5.3.1
+
+## 3.2.0 (2020-10-05)
+
+* Update pa11y to version 5.3.0, which means better compatibility with sites using AMD modules
+* Update pa11y-webservice to version 3.2.0, which adds the ability to configure the number of workers running pa11y tests
+* Update several dependencies
+* Replace chalk with kleur
+
+## 3.1.0 (2019-09-27)
+
+* Display the task ID before each line of output, so it's clear to which task a line of output belongs to when they run in parallel.
+* Bump pa11y-webservice version, which fixes an issue with some pages failing to run.
+* Fix incorrect routes passing an invalid value to Mongo's ObjectID.
+
+## 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
+* 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
+* 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
+* 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
+* Large overhaul of the results page, see #196 for more information

 ## 2.2.2 (2017-03-23)

-  * Upgrades `body-parser` and `express`. Fixes a vulnerability in `qs`: https://snyk.io/vuln/npm:qs:20170213
+* Upgrades `body-parser` and `express`. Fixes a vulnerability in `qs`: https://snyk.io/vuln/npm:qs:20170213

 ## 2.2.1 (2017-02-07)

-  * Fix task editing when no actions are specified
+* Fix task editing when no actions are specified

 ## 2.2.0 (2017-01-27)

-  * Add support for Pa11y actions
-  * Update dependencies
+* Add support for Pa11y actions
+* Update dependencies
  * pa11y-webservice: ~2.1.2 to ^2.3.0

 ## 2.1.2 (2016-12-12)

-  * Hide the "add" button in readonly mode
-  * Add a contributing guide
+* Hide the "add" button in readonly mode
+* Add a contributing guide

 ## 2.1.1 (2016-11-20)

-  * Use arrows instead of plus and minus for collapsibles/expanders
-  * Supply more detailed 500 messages
+* Use arrows instead of plus and minus for collapsibles/expanders
+* Supply more detailed 500 messages

 ## 2.1.0 (2016-11-07)

-  * Allow for configuration files to be JavaScript rather than JSON
-  * Allow setting of HTTP headers for task runs
-  * Allow hiding/ignoring elements for task runs
-  * Update dependencies and devDependencies
+* Allow for configuration files to be JavaScript rather than JSON
+* Allow setting of HTTP headers for task runs
+* Allow hiding/ignoring elements for task runs
+* Update dependencies and devDependencies
  * pa11y-webservice: ~2.0.1 to ^2.1.2
  * mocha: ^3 to ^2 (temporary – tests weren't running)

 ## 2.0.1 (2016-09-12)

-  * Update dependencies and devDependencies
+* Update dependencies and devDependencies
  * express: ~4.13 to ~4.14
  * pa11y-webservice: ~2.0 to ^2.0.1
  * request: ^2 to ^2.74
@@ -73,19 +99,19 @@

 ## 2.0.0 (2016-06-05)

-  * Drop Node.js 0.10–0.12 support
-  * Update dependencies
+* Drop Node.js 0.10–0.12 support
+* Update dependencies
  * pa11y-webservice: ~1.11 to ~2.0
-  * See the [migration guide](https://github.com/pa11y/dashboard/blob/master/MIGRATION.md#migrating-from-10-to-20) for details
+* See the [migration guide](https://github.com/pa11y/dashboard/blob/master/MIGRATION.md#migrating-from-10-to-20) for details

 ## 1.12.1 (2016-06-05)

-  * Update references/links after a repo rename
+* Update references/links after a repo rename

 ## 1.12.0 (2016-05-26)

-  * Update Node.js version support to 0.10–6.0
-  * Update dependencies
+* Update Node.js version support to 0.10–6.0
+* Update dependencies
  * body-parser: added at ~1.15
  * chalk: ~0.2 to ~1.1
  * compression: added at ~1.6
@@ -102,165 +128,165 @@

 ## 1.11.0 (2016-05-23)

-  * Add the ability to configure task wait times
-  * Allow configuration by environment variables
-  * Update repository references to the new Pa11y organisation
-  * Add a changelog
+* Add the ability to configure task wait times
+* Allow configuration by environment variables
+* Update repository references to the new Pa11y organisation
+* Add a changelog

 ## 1.10.0 (2016-05-18)

-  * Automatically focus on the filter input box when you select the filter
-  * Make a task URL clickable
-  * Tweak the documentation to make it more usable
-  * Add a resources section to the README
+* Automatically focus on the filter input box when you select the filter
+* Make a task URL clickable
+* Tweak the documentation to make it more usable
+* Add a resources section to the README

 ## 1.9.0 (2016-04-25)

-  * Show errors' context and selector on the results page
-  * Add context and selector to CSV output
-  * Fix lint errors
-  * Switch from Grunt to Make
-  * Add a `SIGINT` handler
-  * Update dependencies
+* Show errors' context and selector on the results page
+* Add context and selector to CSV output
+* Fix lint errors
+* Switch from Grunt to Make
+* Add a `SIGINT` handler
+* Update dependencies
  * pa11y-webservice: ~1.6 to ~1.8

 ## 1.8.2 (2016-02-10)

-  * Update the license in the footer
+* Update the license in the footer

 ## 1.8.1 (2016-02-10)

-  * Update repository references to springernature
+* Update repository references to springernature

 ## 1.8.0 (2016-02-04)

-  * Make the graph more accessible to color-blind users
-  * Fix lint errors
+* Make the graph more accessible to color-blind users
+* Fix lint errors

 ## 1.7.0 (2016-01-29)

-  * Hide the date list from individual result pages
-  * Make the date selector properly keyboard accessible
-  * Change the options button into a more accessible list
-  * Make the errors/warnings/notices lists keyboard accessible
+* Hide the date list from individual result pages
+* Make the date selector properly keyboard accessible
+* Change the options button into a more accessible list
+* Make the errors/warnings/notices lists keyboard accessible

 ## 1.6.1 (2016-01-26)

-  * Add keyboard access for filters
-  * Fix lint errors
+* Add keyboard access for filters
+* Fix lint errors

 ## 1.6.0 (2015-08-20)

-  * Hide all graph data except for errors by default
+* Hide all graph data except for errors by default

 ## 1.5.0 (2015-07-06)

-  * Add the ability to use HTTP basic auth with task URLs
-  * Update dependencies
+* Add the ability to use HTTP basic auth with task URLs
+* Update dependencies
  * pa11y-webservice: ~1.5 to ~1.6

 ## 1.4.0 (2015-07-02)

-  * Add the ability to set a per-task timeout
+* Add the ability to set a per-task timeout

 ## 1.3.2 (2015-01-17)

-  * Update dependencies
+* Update dependencies
  * pa11y-webservice: ~1.3 to ~1.4

 ## 1.3.1 (2014-03-05)

-  * Fix the URL filter position when in demo mode
+* Fix the URL filter position when in demo mode

 ## 1.3.0 (2014-03-04)

-  * Add filtering of tasks on the home page
-  * Add the ability to ignore certain rules
-  * Add the ability to ignore a rule from the result page
-  * Tweak the display of task cards
+* Add filtering of tasks on the home page
+* Add the ability to ignore certain rules
+* Add the ability to ignore a rule from the result page
+* Tweak the display of task cards

 ## 1.2.3 (2014-01-13)

-  * Fix CSV export for the OS X version of Excel
+* Fix CSV export for the OS X version of Excel

 ## 1.2.2 (2014-01-09)

-  * Fix spacing issues when the graph is not visible
-  * Add notes on publishing a release
+* Fix spacing issues when the graph is not visible
+* Add notes on publishing a release

 ## 1.2.1 (2014-01-08)

-  * Fix dropdown positioning in Internet Explorer 7 and 8
+* Fix dropdown positioning in Internet Explorer 7 and 8

 ## 1.2.0 (2013-12-12)

-  * Add HTML Codesniffer links on the results page
-  * Display the ignore rules for results on the results page
-  * Link the breadcrumbs on task sub-pages
-  * Fix an issue with saving empty ignore rules
-  * Cache-bust the CSS and JavaScript
-  * Add the ability to edit tasks
-  * Fix lint errors
-  * Tweaks to the display of the graphs
-  * Update dependencies
+* Add HTML Codesniffer links on the results page
+* Display the ignore rules for results on the results page
+* Link the breadcrumbs on task sub-pages
+* Fix an issue with saving empty ignore rules
+* Cache-bust the CSS and JavaScript
+* Add the ability to edit tasks
+* Fix lint errors
+* Tweaks to the display of the graphs
+* Update dependencies
  * pa11y-webservice: ~1.1 to ~1.2
  * pa11y-webservice-client-node: ~1.0 to ~1.1

 ## 1.1.0 (2013-11-22)

-  * Add a functional test suite
-  * Allow the webservice to run automatically
-  * Documentation improvements
-  * Add a Travis config
-  * Fix lint errors
+* Add a functional test suite
+* Allow the webservice to run automatically
+* Documentation improvements
+* Add a Travis config
+* Fix lint errors

 ## 1.0.0 (2013-11-19)

-  * Initial stable release
-  * Add the ability to set a site-wide message
-  * Add a demo mode for demo/public-facing sites
-  * Disable search engine indexing by default
-  * Tweak the task header at smaller screen sizes
-  * Make checkboxes on the graph WCAG2AA compliant
-  * Make checkbox inputs and labels WCAG2AA compliant on new URL page
-  * Colour changes to ensure there are no contrast issues
-  * Make the copy more consistent
-  * Update screenshots
-  * Update dependencies
+* Initial stable release
+* Add the ability to set a site-wide message
+* Add a demo mode for demo/public-facing sites
+* Disable search engine indexing by default
+* Tweak the task header at smaller screen sizes
+* Make checkboxes on the graph WCAG2AA compliant
+* Make checkbox inputs and labels WCAG2AA compliant on new URL page
+* Colour changes to ensure there are no contrast issues
+* Make the copy more consistent
+* Update screenshots
+* Update dependencies
  * pa11y-webservice-client-node: 1.0.0-beta.7 to ~1.0

 ## 1.0.0-beta.3 pre-release (2013-11-12)

-  * Fix lint errors
-  * Add descriptive labels to tasks
-  * Add a name field to "New URL" form
-  * Add a WCAG 2.0 link to the footer
-  * Tweak the layout at smaller screen sizes
-  * Notify users when there are no ignored rules
-  * Fix the expires headers for front end assets
-  * Move from Make to Grunt
-  * Compress static files
-  * Minify the site JavaScript
-  * Compile LESS files with grunt
-  * Add a watch task to recompile assets on change
-  * Commit compiled front-end code to the repo
-  * Add development instructions
-  * Update screenshots
-  * Update dependencies
+* Fix lint errors
+* Add descriptive labels to tasks
+* Add a name field to "New URL" form
+* Add a WCAG 2.0 link to the footer
+* Tweak the layout at smaller screen sizes
+* Notify users when there are no ignored rules
+* Fix the expires headers for front end assets
+* Move from Make to Grunt
+* Compress static files
+* Minify the site JavaScript
+* Compile LESS files with grunt
+* Add a watch task to recompile assets on change
+* Commit compiled front-end code to the repo
+* Add development instructions
+* Update screenshots
+* Update dependencies
  * pa11y-webservice-client-node: 1.0.0-beta.4 to 1.0.0-beta.7

 ## 1.0.0-beta.2 pre-release (2013-10-04)

-  * Add screenshots to the README
-  * Fix margins
-  * Add bower package management
-  * Stop the graph from appearing if there's only one result
-  * Add the ability to run tasks ad-hoc
-  * Add more useful information to the footer
-  * General copy edits
-  * Update dependencies
+* Add screenshots to the README
+* Fix margins
+* Add bower package management
+* Stop the graph from appearing if there's only one result
+* Add the ability to run tasks ad-hoc
+* Add more useful information to the footer
+* General copy edits
+* Update dependencies
  * pa11y-webservice-client-node: 1.0.0-beta.3 to 1.0.0-beta.4

 ## 1.0.0-beta.1 pre-release (2013-09-27)

-  * Initial release
+* Initial release
--- a/MIGRATION.md
+++ b/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

--- a/Makefile.node
+++ b/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


--- a/README.md
+++ b/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,29 +7,71 @@ 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://user-images.githubusercontent.com/6110968/61603347-0bce1000-abf2-11e9-87b2-a53f91d315bb.jpg)
+![results-page](https://user-images.githubusercontent.com/6110968/62183438-05851580-b30f-11e9-9bc4-b6a4823ae9e8.jpg)

 ---

+## Requirements

-![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)
+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.

-Setup
-----
+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.

-Pa11y Dashboard requires [Node.js][node] 4+. See the [Pa11y][pa11y] documentation for detailed instructions on how to install this on your operating system.
+## Setting up Pa11y Dashboard

-You'll also need to have [MongoDB][mongo] installed and running. See the [MongoDB install guide][mongo-install] for more information on this.
+In order to run Pa11y Dashboard, we recommend cloning this repository locally:

-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:
+```sh
+git clone https://github.com/pa11y/pa11y-dashboard.git
+```

-### Option 1: Using Environment Variables
+Then installing the dependencies:
+
+```sh
+cd pa11y-dashboard
+npm install
+```
+
+### Installing MongoDB
+
+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.
+
+#### 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.
+
+Tap the MongoDB Homebrew Tap:
+```sh
+brew tap mongodb/brew
+```
+
+Install the Community version of MongoDB:
+```sh
+brew install mongodb-community@3.4
+```
+
+Start the MongoDB server:
+```sh
+brew services start mongodb/brew/mongodb-community@3.4
+```
+
+Check that the service has started properly:
+```sh
+$ brew services list
+Name              Status  User       Plist
+mongodb-community started pa11y      /Users/pa11y/Library/LaunchAgents/homebrew.mxcl.mongodb-community.plist
+```
+
+### Configuring Pa11y Dashboard
+
+The last step before being able to run Pa11y Dashboard is to define a configuration for it. This can be done in two ways:
+
+#### Option 1: Using environment variables

 Each configuration can be set with an environment variable rather than a config file. For example to run the application on port `8080` you can use the following:

@@ -38,11 +79,17 @@ Each configuration can be set with an environment variable rather than a config
 PORT=8080 node index.js
 ```

-The [available configurations are documented here](#configurations).
+The [available configurations](#configurations) are documented in the next section.

-### Option 2: Using Config Files
+#### Option 2: Using config files

-You'll need to copy and modify different config files depending on your environment (set with `NODE_ENV`):
+You can store the configuration for Pa11y Dashboard on a JSON file. You can use a different configuration file for each environment you're planning to run Pa11y Dashboard on. You can choose a specific environment to run the application from by setting the `NODE_ENV` environment variable:
+
+```sh
+NODE_ENV=development node index.js
+```
+
+Three example files are provided in this repository, you can copy and customise them to your liking:

 ```sh
 cp config/development.sample.json config/development.json
@@ -50,42 +97,35 @@ cp config/production.sample.json config/production.json
 cp config/test.sample.json config/test.json
 ```

-Each of these files defines configurations for a different environment. If you're just running the application locally, then you should be OK with just development and test configurations. The [available configurations are documented here](#configurations).
+The [available configurations](#configurations) are documented in the next section.

-Now that you've got your application configured, make sure you have a MongoDB server running with the `mongod` command in another terminal window. You can run in each mode by changing the `NODE_ENV` environment variable:
+If you run into problems, check the [troubleshooting guide][TROUBLESHOOTING.md].

-```sh
-NODE_ENV=development node index.js
-```
-
-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.

 ### port
+
 *(number)* The port to run the application on. Set via a config file or the `PORT` environment variable.

 ### 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
+
 *(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
+
 *(string)* A message to display prominently on the site home page. Defaults to `null`.

 ### 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 +150,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,36 +163,29 @@ 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–2020, Team Pa11y and contributors

 [gpl]: http://www.gnu.org/licenses/gpl-3.0.html
 [mongo]: http://www.mongodb.org/
-[mongo-install]: https://docs.mongodb.org/manual/installation/
 [node]: http://nodejs.org/
 [pa11y]: https://github.com/pa11y/pa11y
 [pa11y-webservice-config]: https://github.com/pa11y/webservice#configurations
-[phantom]: http://phantomjs.org/
-[sidekick-proposal]: https://github.com/pa11y/sidekick/blob/master/PROPOSAL.md
 [travis]: https://travis-ci.org/pa11y/dashboard
 [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.4.2-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
--- a/app.js
+++ b/app.js
@@ -92,8 +92,6 @@ function initApp(config, callback) {

 	// Load routes
 	require('./route/index')(app);
-	require('./route/task/index')(app);
-	require('./route/result/index')(app);
 	require('./route/result/download')(app);
 	if (!config.readonly) {
 		require('./route/new')(app);
@@ -103,6 +101,10 @@ 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
 	app.express.get('*', (request, response) => {
--- a/data/standards.js
+++ b/data/standards.js
@@ -112,7 +112,7 @@ function getStandards() {
 					description: 'The heading structure is not logically nested. This [Node name, eg. h2] element appears to be the primary document heading, so should be an h1 element.'
 				},
 				{
-					name: 'Section508.D.HeadingOrder',
+					name: 'Section508.D.HeadingOrder ',
 					description: 'The heading structure is not logically nested. This [Node name, eg. h4] element should be an [Expected heading node name, eg. h2] to be properly nested.'
 				},
 				{
@@ -922,7 +922,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.G145 ',
 					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.'
 				},
 				{
@@ -1427,11 +1427,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 ',
 					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 ',
 					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.'
 				},
 				{
--- a/index.js
+++ b/index.js
@@ -14,7 +14,7 @@
 // along with Pa11y Dashboard.  If not, see <http://www.gnu.org/licenses/>.
 'use strict';

-const chalk = require('chalk');
+const kleur = require('kleur');
 const config = require('./config');

 process.on('SIGINT', () => {
@@ -29,16 +29,16 @@ require('./app')(config, (error, app) => {
 	}

 	console.log('');
-	console.log(chalk.underline.magenta('Pa11y Dashboard started'));
-	console.log(chalk.grey('mode: %s'), process.env.NODE_ENV);
-	console.log(chalk.grey('uri:  %s'), app.address);
+	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);

 	app.on('route-error', error => {
 		const stack = (error.stack ? error.stack.split('\n') : [error.message]);
-		const msg = chalk.red(stack.shift());
+		const msg = kleur.red(stack.shift());
 		console.error('');
 		console.error(msg);
-		console.error(chalk.grey(stack.join('\n')));
+		console.error(kleur.grey(stack.join('\n')));
 	});

 	// Start the webservice if required
@@ -50,9 +50,11 @@ 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(kleur.underline().cyan('Pa11y Webservice started'));
+			console.log(kleur.grey('mode:     %s'), process.env.NODE_ENV);
+			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);
 		});
 	}

--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
  "name": "pa11y-dashboard",
-  "version": "2.4.2",
+  "version": "3.3.0",
  "private": true,
  "description": "Pa11y Dashboard is a visual web interface to the Pa11y accessibility reporter",
  "keywords": [
@@ -21,31 +21,31 @@
  "bugs": "https://github.com/pa11y/dashboard/issues",
  "license": "GPL-3.0",
  "engines": {
-    "node": ">=4"
+    "node": ">=8",
+    "npm": ">=6"
  },
  "dependencies": {
-    "body-parser": "^1.18.3",
-    "chalk": "~1.1",
-    "compression": "^1.7.2",
-    "express": "^4.16.3",
-    "express-hbs": "~1.0",
-    "http-headers": "^3.0.1",
-    "moment": "^2.22.2",
-    "npm": "^6.1.0",
-    "pa11y-webservice": "^2.3.1",
-    "pa11y-webservice-client-node": "^1.2.1",
-    "underscore": "~1.8"
+    "body-parser": "~1.19.0",
+    "compression": "~1.7.4",
+    "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"
  },
  "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.8.0",
+    "less": "^3.11.1",
+    "mocha": "^7.2.0",
+    "pa11y-lint-config": "^1.2.1",
+    "proclaim": "^3.6.0",
+    "request": "^2.88.2",
+    "uglify-js": "^3.11.0"
  },
  "scripts": {
    "start": "node index.js",
--- a/public/css/site.min.css
+++ b/public/css/site.min.css
--- a/public/js/site.js
+++ b/public/js/site.js
@@ -26,7 +26,9 @@ $(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
+

    var graphOptions = {
        series: {
@@ -397,4 +399,38 @@ $(document).ready(function(){
 		$.fn.collapse.Constructor.prototype.keydown
 	);

+	// List View
+	$('.btn-list').click(function () {
+		var elements = $("#grid-container .task-card");
+		for (i = 0; i < elements.length; i++) {
+			$(elements[i]).removeClass('col-md-4 col-sm-6');
+			$(elements[i]).addClass('col-md-12');
+			$(elements[i]).find('.gridview:nth-child(1)').addClass('listview col-md-9 col-sm-8');
+			$(elements[i]).find('.gridview:nth-child(2)').addClass('listview col-md-3 col-sm-4 task-actions clearfix');
+			$(elements[i]).find('.gridview').removeClass('gridview');
+		};
+		$('.view-btn').removeClass('btn-default')
+		$(this).addClass('btn-default');
+		localStorage.setItem("listview", "yes") //save the choice
+	});
+
+	// Grid View
+	$('.btn-grid').click(function () {
+		var elements = $("#grid-container .task-card");
+		for (i = 0; i < elements.length; i++) {
+			$(elements[i]).removeClass('col-md-12');
+			$(elements[i]).addClass('col-md-4 col-sm-6');
+			$(elements[i]).find('.listview').addClass('gridview')
+			$(elements[i]).find('.listview:nth-child(1)').removeClass('listview col-md-9 col-sm-8');
+			$(elements[i]).find('.listview:nth-child(2)').removeClass('listview col-md-3 col-sm-4 task-actions clearfix');
+		};
+		$('.view-btn').removeClass('btn-default')
+		$(this).addClass('btn-default')
+		localStorage.setItem("listview", "") //clears the choice
+	});
+
+	//load the view as per user's choice
+	if (list === 'yes') {
+		$('.btn-list').trigger('click');
+	}
 });
--- a/public/js/site.min.js
+++ b/public/js/site.min.js
--- a/public/less/ie8and.less
+++ b/public/less/ie8and.less
@@ -3,7 +3,7 @@
 // Amend the width of container if you want to here
@container-md-ie8: @container-md;

-@grid-adjustment: percentage(@grid-gutter-width / @container-md-ie8);
+@grid-adjustment: percentage((@grid-gutter-width / @container-md-ie8));

 .ie7, .ie8 {
  * {
--- a/public/less/site.less
+++ b/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;
@@ -175,7 +183,6 @@
 	text-transform: uppercase;
 	display: block;
 	line-height: 1.4;
-  .opacity(.8);
 }

 // Stats box colours
@@ -221,12 +228,6 @@
 		text-decoration: none;
 		background-color: darken(@gray-lighter, 2%);
 	}
-  .h3 {
-	text-overflow: ellipsis;
-	overflow: hidden;
-	width: 100%;
-	white-space: nowrap;
-  }
 	.task-stats li {
 		padding: 7px 0 6px 0;
 		text-align: center;
@@ -235,6 +236,23 @@
 	.dropdown-menu {
 		top: 25px;
 	}
+	.gridview {
+		.h3 {
+			text-overflow: ellipsis;
+			overflow: hidden;
+			width: 100%;
+			white-space: nowrap;
+		}
+		.h4 {
+			display: none;
+		}
+	}
+	.listview {
+		padding-left: 0;
+	}
+	.last-run {
+		clear: both;
+	}
 }

 /* Badges */
@@ -575,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;
@@ -723,3 +741,30 @@ ul.date-links {
 .popover-content {
 	overflow-x: auto;
 }
+
+/*list and grid view buttons */
+.view-btn {
+	&.btn-default, &.btn-default:hover, &.btn-default:focus {
+		color: #ffffff;
+	}
+	&:hover {
+		color: #000000;
+	}
+	&:last-child:not(:first-child) {
+		border-bottom-left-radius: 0;
+		border-top-left-radius: 0;
+		margin-left: -3px;
+	}
+	&:first-child:not(:last-child) {
+		border-bottom-right-radius: 0;
+		border-top-right-radius: 0;
+	}
+}
+
+/*close button on success alert*/
+.alert-success {
+  .close {
+		color: #fff;
+		opacity: 1;
+	};
+}
--- a/public/less/variables-flatly.less
+++ b/public/less/variables-flatly.less
@@ -18,9 +18,9 @@
 // -------------------------

@brand-primary: #2C3E50;
-@brand-success: #00806F;
-@brand-warning: #A86700;
-@brand-danger: #D83D2D;
+@brand-success: #006053;
+@brand-warning: #b24d04;
+@brand-danger: #c92a2a;
@brand-info: #177BBE;

 // Scaffolding
@@ -233,7 +233,7 @@
@navbar-default-bg: @brand-primary;
@navbar-default-border: darken(@navbar-default-bg, 6.5%);
@navbar-border-radius: @border-radius-base;
-@navbar-padding-horizontal: floor(@grid-gutter-width / 2); // ~15px
+@navbar-padding-horizontal: floor((@grid-gutter-width / 2)); // ~15px
@navbar-padding-vertical: ((@navbar-height - @line-height-computed) / 2);

 // Navbar links
--- a/public/less/variables.less
+++ b/public/less/variables.less
@@ -247,7 +247,7 @@
@navbar-height: 50px;
@navbar-margin-bottom: @line-height-computed;
@navbar-border-radius: @border-radius-base;
-@navbar-padding-horizontal: floor(@grid-gutter-width / 2);
+@navbar-padding-horizontal: floor((@grid-gutter-width / 2));
@navbar-padding-vertical: ((@navbar-height - @line-height-computed) / 2);

@navbar-default-color: #777;
--- a/test/integration/route/index.js
+++ b/test/integration/route/index.js
@@ -40,10 +40,19 @@ 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.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.strictEqual(tasks.length, 4);
+		assert.equal(tasks.eq(0).find('.h3').text(), 'NPG Home');
+		assert.equal(tasks.eq(0).find('.h4').text(), 'nature.com');
+		assert.equal(tasks.eq(0).find('.h5').text(), '(WCAG2AA)');
+		assert.equal(tasks.eq(1).find('.h3').text(), 'NPG Home');
+		assert.equal(tasks.eq(1).find('.h4').text(), 'nature.com');
+		assert.equal(tasks.eq(1).find('.h5').text(), '(WCAG2AAA)');
+		assert.equal(tasks.eq(2).find('.h3').text(), 'Nature News');
+		assert.equal(tasks.eq(2).find('.h4').text(), 'nature.com/news');
+		assert.equal(tasks.eq(2).find('.h5').text(), '(Section508)');
+		assert.equal(tasks.eq(3).find('.h3').text(), 'Z Integration Test');
+		assert.equal(tasks.eq(3).find('.h4').text(), 'localhost:8132');
+		assert.equal(tasks.eq(3).find('.h5').text(), '(WCAG2AA)');
 	});

 	it('should have links to each task', function() {
@@ -51,6 +60,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 +68,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 +76,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 +84,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() {
--- a/view/index.html
+++ b/view/index.html
@@ -40,7 +40,7 @@ along with Pa11y Dashboard.  If not, see <http://www.gnu.org/licenses/>.
  {{#deleted}}
      <div class="col-md-12 clearfix" data-test="alert">
          <div class="alert alert-info">
-              <button aria-hidden="true" data-dismiss="alert" class="close" type="button">×</button>
+              <button data-dismiss="alert" class="close" type="button" aria-label="Close">×</button>
              <strong>Bye Bye URL</strong>
              <p>The URL you selected and its associated results have been deleted.</p>
          </div>
--- a/view/layout/default.html
+++ b/view/layout/default.html
@@ -27,7 +27,7 @@ along with Pa11y Dashboard.  If not, see <http://www.gnu.org/licenses/>.

 	{{#if noindex}}<meta name="robots" content="noindex"/>{{/if}}

-	<link rel="icon" type="image/png" href="favicon.png" />
+	<link rel="icon" type="image/png" href="/favicon.png" />

 	<!-- For mobile devices. -->
 	<meta name="viewport" content="width=device-width"/>
--- a/view/new.html
+++ b/view/new.html
@@ -19,7 +19,7 @@ along with Pa11y Dashboard.  If not, see <http://www.gnu.org/licenses/>.
 	Add a new URL
 {{/content}}

-<form role="form" class="col-md-12" action="/new" method="post" data-test="new-url-form">
+<form class="col-md-12" action="/new" method="post" data-test="new-url-form">

 	<div class="legend">
 		<h1 class="h2 crunch-top">Add a new URL</h1>
--- a/view/partial/graph.html
+++ b/view/partial/graph.html
@@ -14,11 +14,14 @@ 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">
+<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">
-				<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">Export graph</button>
 				</div>

 				<div class="col-md-5 col-sm-6 col-xs-9 pull-right">
@@ -26,7 +29,8 @@ along with Pa11y Dashboard.  If not, see <http://www.gnu.org/licenses/>.
 				</div>
 			</div>
 			<div data-role="graph" class="graph"></div>
-		<div class="dashedLegend">
+		</div>
+		<div class="col-md-2 dashedLegend">
 			<div class="dashedContainer">
 				<table>
 					<tbody>
@@ -60,12 +64,11 @@ along with Pa11y Dashboard.  If not, see <http://www.gnu.org/licenses/>.
 		</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>
--- a/view/partial/page-footer.html
+++ b/view/partial/page-footer.html
@@ -15,7 +15,7 @@ You should have received a copy of the GNU General Public License
 along with Pa11y Dashboard.  If not, see <http://www.gnu.org/licenses/>.
 }}
 <footer>
-	<div class="footer" role="contentinfo">
+	<div class="footer">
 		<div class="container">
 			<div class="col-md-5">
 				<small>&copy; 2013–{{year}} Team Pa11y.<br/>Pa11y Dashboard is licensed under the GNU General Public License 3.0.<br/>Version {{version}}</small>
--- a/view/partial/page-header.html
+++ b/view/partial/page-header.html
@@ -15,7 +15,7 @@ You should have received a copy of the GNU General Public License
 along with Pa11y Dashboard.  If not, see <http://www.gnu.org/licenses/>.
 }}
 <header>
-	<div role="banner" class="header">
+	<div class="header">
 		<div class="container">
 			{{#if isHomePage}}<h1>{{else}}<div class="h1">{{/if}}
 				<a href="/">Pa11y Dashboard</a> -
--- a/view/partial/result.html
+++ b/view/partial/result.html
@@ -15,54 +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">
+<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>
-				</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">
+		<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>
-		</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">Select a date to show stats for:</h3>
-						<ul role="navigation" class="dates-list">
-							{{#results}}
-								<li><a class="" href="{{href}}">{{date-format date format="DD MMM YYYY"}}</a></li>
-							{{/results}}
-						</ul>
-					</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" role="main">
-	<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}} )
@@ -116,10 +80,10 @@ along with Pa11y Dashboard.  If not, see <http://www.gnu.org/licenses/>.

 							<div class="task-details collapse" id="error-index-{{@index}}">
 								{{#if solutions.length}}
-									<div class="subtitle" id="error-solutions">Solutions:</div>
-									<ul class="list-unstyled solutions-list" role="list" aria-labelledby="error-solutions">
+									<div class="subtitle">Solutions:</div>
+									<ul class="list-unstyled solutions-list">
 										{{#each solutions}}
-											<li class="list-unstyled__item" role="listitem">
+											<li class="list-unstyled__item">
 												<a class="link" href="{{url}}" target="_blank">
 													<span class="glyphicon glyphicon-share" aria-hidden="true"></span>&nbsp;{{title}}
 												</a>
@@ -129,10 +93,10 @@ along with Pa11y Dashboard.  If not, see <http://www.gnu.org/licenses/>.
 								{{/if}}

 								{{#if items.length}}
-									<div class="subtitle" id="error-selectors">Selectors:</div>
-									<ul class="list-unstyled selectors-list" role="list" aria-labelledby="error-selectors">
+									<div class="subtitle">Selectors:</div>
+									<ul class="list-unstyled selectors-list">
 										{{#each items}}
-											<li class="list-unstyled__item" role="listitem">
+											<li class="list-unstyled__item">
 												<span title="Context" data-role="context-popover" data-toggle="popover" data-content="{{context}}">
 													<code class="code">{{selector}}</code>
 												</span>
@@ -182,10 +146,10 @@ along with Pa11y Dashboard.  If not, see <http://www.gnu.org/licenses/>.

 							<div class="task-details collapse" id="warning-index-{{@index}}">
 								{{#if solutions.length}}
-									<div class="subtitle" id="warning-solutions">Solutions:</div>
-									<ul class="list-unstyled solutions-list" role="list" aria-labelledby="warning-solutions">
+									<div class="subtitle">Solutions:</div>
+									<ul class="list-unstyled solutions-list">
 										{{#each solutions}}
-											<li class="list-unstyled__item" role="listitem">
+											<li class="list-unstyled__item">
 												<a class="link" href="{{url}}" target="_blank">
 													<span class="glyphicon glyphicon-share" aria-hidden="true"></span>&nbsp;{{title}}
 												</a>
@@ -195,10 +159,10 @@ along with Pa11y Dashboard.  If not, see <http://www.gnu.org/licenses/>.
 								{{/if}}

 								{{#if items.length}}
-									<div class="subtitle" id="warning-selectors">Selectors:</div>
-									<ul class="list-unstyled selectors-list" role="list" aria-labelledby="warning-selectors">
+									<div class="subtitle">Selectors:</div>
+									<ul class="list-unstyled selectors-list">
 										{{#each items}}
-											<li class="list-unstyled__item" role="listitem">
+											<li class="list-unstyled__item">
 												<span title="Context" data-role="context-popover" data-toggle="popover" data-content="{{context}}">
 													<code class="code">{{selector}}</code>
 												</span>
@@ -248,10 +212,10 @@ along with Pa11y Dashboard.  If not, see <http://www.gnu.org/licenses/>.

 							<div class="task-details collapse" id="notice-index-{{@index}}">
 								{{#if solutions.length}}
-									<div class="subtitle" id="notice-solutions">Solutions:</div>
-									<ul class="list-unstyled solutions-list" role="list" aria-labelledby="notice-solutions">
+									<div class="subtitle">Solutions:</div>
+									<ul class="list-unstyled solutions-list">
 										{{#each solutions}}
-											<li class="list-unstyled__item" role="listitem">
+											<li class="list-unstyled__item">
 												<a class="link" href="{{url}}" target="_blank">
 													<span class="glyphicon glyphicon-share" aria-hidden="true"></span>&nbsp;{{title}}
 												</a>
@@ -261,10 +225,10 @@ along with Pa11y Dashboard.  If not, see <http://www.gnu.org/licenses/>.
 								{{/if}}

 								{{#if items.length}}
-									<div class="subtitle" id="notice-selectors">Selectors:</div>
-									<ul class="list-unstyled selectors-list" role="list" aria-labelledby="notice-selectors">
+									<div class="subtitle">Selectors:</div>
+									<ul class="list-unstyled selectors-list">
 										{{#each items}}
-											<li class="list-unstyled__item" role="listitem">
+											<li class="list-unstyled__item">
 												<span title="Context" data-role="context-popover" data-toggle="popover" data-content="{{context}}">
 													<code class="code">{{selector}}</code>
 												</span>
@@ -321,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>
--- a/view/partial/task-header.html
+++ b/view/partial/task-header.html
@@ -24,11 +24,13 @@ along with Pa11y Dashboard.  If not, see <http://www.gnu.org/licenses/>.
 			<div class="run-details task-header clearfix">
 				<div class="col-md-12 clearfix">
 					{{#unless readonly}}
-				        <ul class="inline-list" role="menu">
+						<nav aria-label="task tools">
+							<ul class="inline-list">
 								<li><a href="/{{task.id}}/edit">Edit this task</a></li>
 								<li><a href="/{{task.id}}/delete">Delete this task</a></li>
 								<li><a href="{{task.hrefRun}}" data-test="run-task">Run Pa11y</a></li>
 							</ul>
+						</nav>
 					{{/unless}}
 					{{#if mainResult}}
 						<div class="date">Last run: <strong>{{date-format mainResult.date format="DD MMM YYYY"}}</strong></div>
--- a/view/partial/tasks.html
+++ b/view/partial/tasks.html
@@ -14,8 +14,12 @@ 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 task-card clearfix">
+	<button class="btn view-btn btn-grid btn-default"><i class="glyphicon glyphicon-th"></i> Grid</button>
+	<button class="btn view-btn btn-list"><i class="glyphicon glyphicon-align-justify "></i> List</button>

-<ul class="list-unstyled clearfix crunch-bottom">
+</div>
+<ul class="list-unstyled clearfix crunch-bottom" id="grid-container">

 	{{#unless readonly}}
 		<li class="col-md-4 col-sm-6 task-card add-task">
@@ -28,9 +32,14 @@ along with Pa11y Dashboard.  If not, see <http://www.gnu.org/licenses/>.
 	{{#each tasks}}
 		<li class="col-md-4 col-sm-6 task-card" data-test="task" data-role="task" data-keywords="{{lowercase name}} {{lowercase standard}} {{simplify-url url}}">
 			<a class="well task-card-link crunch-bottom" title="Details for URL {{simplify-url url}}" href="{{href}}">
+				<div class="gridview">
 					<p class="h3">{{name}}</p>
+					<p class="h4">{{simplify-url url}}</p>
 					<p class="h5">({{standard}})</p>
+				</div>
+
 				{{#if lastResult}}
+				<div class="gridview">
 					<ul class="clearfix list-unstyled floated-list task-stats">
 						{{#lastResult}}
 							<li class="danger" title="Number of errors ({{count.error}})">{{count.error}}<span class="stat-type">Errors</span></li>
@@ -38,7 +47,8 @@ along with Pa11y Dashboard.  If not, see <http://www.gnu.org/licenses/>.
 							<li class="info last" title="Number of notices ({{count.notice}})">{{count.notice}}<span class="stat-type">Notices</span></li>
 						{{/lastResult}}
 					</ul>
-				Last run {{date-format lastResult.date format="DD MMM YYYY"}}
+				</div>
+				<div class="last-run">Last run {{date-format lastResult.date format="DD MMM YYYY"}}</div>
 				{{else}}
 					<p class="no-results">No results</p>
 				{{/if}}
@@ -46,12 +56,14 @@ 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>
-					<ul class="dropdown-menu pull-right" role="menu">
+					<nav aria-label="task tools">
+						<ul class="dropdown-menu pull-right">
 							<li><a href="{{href}}/edit">Edit this task</a></li>
 							<li><a href="{{href}}/delete">Delete this task</a></li>
 							<li class="divider"></li>
 							<li><a href="{{href}}/run" data-test="run-task">Run Pa11y</a></li>
 						</ul>
+					</nav>
 				</div>
 			{{/unless}}
 		</li>
--- a/view/task/edit.html
+++ b/view/task/edit.html
@@ -29,7 +29,7 @@ along with Pa11y Dashboard.  If not, see <http://www.gnu.org/licenses/>.
 	</div>
 {{/edited}}

-<form role="form" class="col-md-12" action="/{{task.id}}/edit" method="post" data-test="edit-url-form">
+<form class="col-md-12" action="/{{task.id}}/edit" method="post" data-test="edit-url-form">

 	<div class="legend">
 		<h1 class="h2 crunch-top">Edit URL</h1>
--- a/view/task/index.html
+++ b/view/task/index.html
@@ -22,7 +22,7 @@ along with Pa11y Dashboard.  If not, see <http://www.gnu.org/licenses/>.
 {{#added}}
 	<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 data-dismiss="alert" class="close" type="button">×</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 aria-hidden="true" data-dismiss="alert" class="close" type="button">×</button>
+			<button data-dismiss="alert" class="close" type="button">×</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 aria-hidden="true" data-dismiss="alert" class="close" type="button">×</button>
+			<button data-dismiss="alert" class="close" type="button">×</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 aria-hidden="true" data-dismiss="alert" class="close" type="button">×</button>
+			<button data-dismiss="alert" class="close" type="button">×</button>
 			<strong>Rule unignored!</strong>
 			<p>
 				You've removed an ignored accessibility rule for this URL.
Author	SHA1	Message	Date
Sangita Mane	6090a126d5	Spacing change done	2021-11-01 16:22:59 +01:00
Sangita Mane	bb0491858b	First draft of layout changes for results page on pa11y dashboard.	2021-10-28 18:01:23 +02:00
Sangita Mane	4c0bd924ab	Fixed the a11y errors on Pa11y dashboard results and add new url page (#285 ) * Fixed the a11y errors on Pa11y dashboard results page and add new url page. * Removed few more unnecessary roles along with Holli's suggestions implemented. * Added close button ARIA label Co-authored-by: Hollie Kay <1948361+hollsk@users.noreply.github.com> Co-authored-by: Hollie Kay <1948361+hollsk@users.noreply.github.com>	2021-05-26 16:38:38 +02:00
Jose Bolos	6d4b8c9676	Add mongo version to brew start command	2021-05-18 14:32:35 +01:00
Jose Bolos	0654790289	Improve installation instructions * Clarify the requirements for running Pa11y Dashboard, and specifically the versions of MongoDB supported * Split the installation process in sections so it's easy to follow * Instead of trying to cover the MongoDB installation on the Readme, refer to the MongoDB docs, but still including a macOS example for easy reference * Clarify the use of the config files and how they relate to the NODE_ENV variable * Use a slightly less informal language in a few places	2021-05-18 14:32:35 +01:00
Jose Bolos	1d931671ff	Version 3.3.0	2021-04-27 15:03:22 +01:00
Jose Bolos	9d95c79625	Version 3.2.1	2021-04-27 15:53:29 +02:00
Jose Bolos	b8029c56f7	Fix security vuln by bumping express-hbs Also bumps pa11y-webservice to the latest version.	2021-04-27 15:53:29 +02:00
Sangita Mane	9a23b79d89	#165 - Added list view option for the dashboard. (#279 ) * Added list view & grid view buttons on the dashboard, on click of which switches the view and avoids truncation of title of the page. * Indentation fixed.	2021-04-20 09:58:33 +02:00
Jose Bolos	b7d45c0913	Reorder the routes to avoid MongoDB ObjectID error When trying to add a new URL, the Node.js MongoDB driver complains with the following error: ``` ObjectID generation failed. Argument passed in must be a single String of 12 bytes or a string of 24 hex characters ``` This is because the `/new` url gets captured by the `/:id` route defined in `/route/task/index.js`. It's another instance of #244 that I missed when fixing it.	2021-04-09 11:30:35 +02:00
Jose Bolos	9ae73dc446	Replace Travis with GH actions	2021-04-09 11:04:12 +02:00
Jose Bolos	ff8142b4e4	Version 3.2.0 (#270 )	2020-10-05 17:35:43 +01:00
Jose Bolos	2f7e8ae451	Update dependencies (#269 )	2020-10-05 17:04:12 +01:00
Sam Clulow	a2cc2c7942	Replace Chalk with Kleur (#264 ) - Remove Chalk - Add Kleur - Update index.js - Update copyright in README Fixes #256	2020-06-29 16:27:44 +01:00
Jose Bolos	59f657b422	Update all devdependencies to the latest versions (#258 )	2020-04-28 12:33:36 +01:00
Jose Bolos	ea3183791c	Version 3.1.0 (#246 ) * Version 3.1.0 Also minor bump to pa11y-webservice * Bump webservice so it includes data fixtures	2019-09-27 11:44:24 +01:00
Jose Bolos	102a237d2e	Bump webservice version and other deps (#245 )	2019-09-20 15:59:21 +01:00
Jose Bolos	7c77467dcf	Fix incorrect values being passed to ObjectID (#244 ) Due to the routes being defined in the wrong order, certain urls (e.g. `/tasks/:taskid:/edit`) are being captured by the results route instead (e.g. `/tasks/:taskid:/:resultid:`). This is causing the wrong method to being called with parts of the path like `edit`, `run`, etc. being passed as an argument to ObjectID(). As these are not valid MongoDB IDs, the method displays instead an error message: > Argument passed in must be a single String of 12 bytes or a string of 24 hex characters Also change the path to the favicon image to be not relative, as this is causing a `favicon.png` string to be sent as an argument to ObjectID() when visiting certain pages due to the previous issue.	2019-09-20 14:57:15 +01:00
Jose Bolos	2de7e59f44	Bump webservice to 3.0.1 (#243 ) Fixes a problem with tests not running when cron jobs are triggered.	2019-09-13 15:14:36 +01:00
Jeremy Englert	c7bd2a53b6	Adds new images to Readme (#239 )	2019-08-01 09:20:02 +01:00
Jose Bolos	350f94a0d4	Version 3.0.0 (#236 ) Includes several updates to the migration guide and the README.	2019-07-16 15:16:06 +01:00
Jose Bolos	a5ce220509	Update all dependencies and standardise versions (#235 )	2019-07-16 14:08:27 +01:00
Jose Bolos	ce07206899	Update dependencies (#234 ) * Bumps pa11y-webservice and client to the new versions requiring node 8+ * Update tests to account for the new URL. Integration tests now include a localhost URL, this updates the tests to reflect that. * Increase test timeout to avoid travis failing	2019-07-16 13:41:39 +01:00
Juga Paazmaya	1609c8d667	Updates Node.js min version to 8 and removes npm as dependency (#228 ) * Update Node.js min version to 8 and remove npm as dependency * Test against Node.js 8 and 10 at Travis * Add Node.js v12 in Travis	2019-05-15 12:32:20 +01:00
Jose Bolos	c1dcbf4436	Adds debugging info to startup log (#225 ) There are two ways of setting a configuration for this app: config files, and environment variables. This makes it easy for the app to run with a different config from the one that you intend to run it with. Currently, only the NODE_ENV variable and server url are being printed out on startup. This PR adds the database config and the cron config to the details being displayed. This may help debug configuration issues, database issues, and specially making easier to understand what config is being used when for example running in a container.	2019-05-15 10:57:08 +01:00
James Loveridge	ef769d95e1	Add MongoDB installation instructions for Mac/Linux (#218 )	2018-10-24 20:19:35 +01:00