Spacing change done

* 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>

.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

.travis.yml

@@ -1,24 +0,0 @@
-
-# Language/versions
-language: node_js
-matrix:
-  include:
-    - node_js: '8'
-    - node_js: '10'
-    - node_js: '12'
-
-# 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'

CHANGELOG.md

@@ -1,5 +1,12 @@
 # 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

README.md

@@ -16,13 +16,11 @@ Pa11y Dashboard is a web interface to the [Pa11y][pa11y] accessibility reporter;
 
 Pa11y Dashboard is a [Node.js][node] application and requires a stable or LTS version of Node, currently version 8 or greater.
 
-Pa11y Dashboard also requires a [MongoDB][mongo] database to be available so it can store the results of the tests. The database doesn't have to be in the same server or computer where Pa11y Dashboard is running from.
+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.
 
-Since version 3, Pa11y Dashboard uses Headless Chrome in order to run the tests. This means that additional dependencies maybe be required.
+Pa11y Dashboard uses [puppeteer](https://www.npmjs.com/package/puppeteer) to create a headless instance of the Chromium browser in order to run the tests. On certain environments this may require additional dependencies to be installed. For example, in Debian/Ubuntu systems you may need to install the `libnss3` and `libgconf-2-4` libraries in order to be able to run tests on Pa11y Dashboard. Please refer to the documentation from your provider for details on how to do this.
 
-In [Unix-like](https://en.wikipedia.org/wiki/Unix-like) systems you may need to install the `libnss3` and `libgconf-2-4` libraries in order to be able to run Chrome. If you're trying to run the app in a headless environment (e.g. the cloud, or a headless server), you may also need to configure Xvfb before. Please refer to the documentation from your provider for details on how to do this.
-
-## Setup
+## Setting up Pa11y Dashboard
 
 In order to run Pa11y Dashboard, we recommend cloning this repository locally:
 
@@ -37,11 +35,43 @@ cd pa11y-dashboard
 npm install
 ```
 
-You'll also need to have [MongoDB][mongo] installed and running. For quick access, you can install via a package manager such as on Mac OS `brew install mongodb` or on Linux (Debian) it would be `apt-get install mongodb`. To run MongoDB, you can run `mongod` in the command line. See the [MongoDB install guide][mongo-install] for more detailed information.
+### Installing MongoDB
 
-The last step before being able to run the application is to define a configuration for it. This can be done in two ways:
+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.
 
-### Option 1: Using Environment Variables
+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:
 
@@ -49,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
@@ -61,35 +97,32 @@ 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:
-
-```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].
+If you run into problems, check the [troubleshooting guide][TROUBLESHOOTING.md].
 
 ## 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
@@ -143,15 +176,11 @@ Copyright © 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-node]: package.json
 [info-build]: https://travis-ci.org/pa11y/pa11y-dashboard

app.js

@@ -92,7 +92,6 @@ function initApp(config, callback) {
 
 	// Load routes
 	require('./route/index')(app);
-	require('./route/task/index')(app);
 	require('./route/result/download')(app);
 	if (!config.readonly) {
 		require('./route/new')(app);
@@ -102,6 +101,8 @@ 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);
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "pa11y-dashboard",
-  "version": "3.2.0",
+  "version": "3.3.0",
   "private": true,
   "description": "Pa11y Dashboard is a visual web interface to the Pa11y accessibility reporter",
   "keywords": [
@@ -28,11 +28,11 @@
     "body-parser": "~1.19.0",
     "compression": "~1.7.4",
     "express": "~4.17.1",
-    "express-hbs": "~2.1.2",
+    "express-hbs": "~2.4.0",
     "http-headers": "~3.0.2",
     "kleur": "~4.1.2",
     "moment": "~2.29.0",
-    "pa11y-webservice": "~3.2.0",
+    "pa11y-webservice": "~3.2.1",
     "pa11y-webservice-client-node": "~2.0.0",
     "underscore": "~1.11.0"
   },

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');
+	}
 });

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 {
   * {

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;
+	};
+}

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

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;

test/integration/route/index.js

@@ -41,10 +41,18 @@ 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, 4);
-		assert.match(tasks.eq(0).text(), /npg home\s+\(wcag2aa\)/i);
-		assert.match(tasks.eq(1).text(), /npg home\s+\(wcag2aaa\)/i);
-		assert.match(tasks.eq(2).text(), /nature news\s+\(section508\)/i);
-		assert.match(tasks.eq(3).text(), /z integration test\s+\(wcag2aa\)/i);
+		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() {

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>

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>

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>

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>

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> -

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 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>

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>

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>

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>

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.