Version 1.7.0

Make the Results page more accessible

.travis.yml

@@ -4,6 +4,11 @@ language: node_js
 node_js:
   - "0.10"
 
+# Build only master (and pull-requests)
+branches:
+  only:
+    - master
+
 # Services setup
 services:
   - mongodb

Gruntfile.js

@@ -1,15 +1,15 @@
 // This file is part of pa11y-dashboard.
-// 
+//
 // pa11y-dashboard is free software: you can redistribute it and/or modify
 // it under the terms of the GNU General Public License as published by
 // the Free Software Foundation, either version 3 of the License, or
 // (at your option) any later version.
-// 
+//
 // pa11y-dashboard is distributed in the hope that it will be useful,
 // but WITHOUT ANY WARRANTY; without even the implied warranty of
 // MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
 // 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/>.
 
@@ -28,7 +28,7 @@ module.exports = function (grunt) {
 				es3: false,
 				indent: 4,
 				latedef: false,
-				maxcomplexity: 4,
+				maxcomplexity: 6,
 				maxdepth: 2,
 				maxlen: 100,
 				maxparams: 4,

README.md

@@ -3,7 +3,7 @@ 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.
 
-**Current Version:** *1.3.0*  
+**Current Version:** *1.7.0*  
 **Build Status:** [![Build Status][travis-img]][travis]  
 **Node Version Support:** *0.10*
 

package.json

@@ -1,6 +1,6 @@
 {
 	"name": "pa11y-dashboard",
-	"version": "1.3.0",
+	"version": "1.7.0",
 	"private": true,
 
 	"description": "pa11y-dashboard is a visual web interface to the pa11y accessibility reporter",
@@ -25,7 +25,7 @@
 		"express": "~3.4",
 		"express-hbs": "~0.2",
 		"moment": "~2.2",
-		"pa11y-webservice": "~1.3",
+		"pa11y-webservice": "~1.6",
 		"pa11y-webservice-client-node": "~1.1",
 		"underscore": "~1.5"
 	},

public/js/site.js

@@ -1,15 +1,15 @@
 // This file is part of pa11y-dashboard.
-// 
+//
 // pa11y-dashboard is free software: you can redistribute it and/or modify
 // it under the terms of the GNU General Public License as published by
 // the Free Software Foundation, either version 3 of the License, or
 // (at your option) any later version.
-// 
+//
 // pa11y-dashboard is distributed in the hope that it will be useful,
 // but WITHOUT ANY WARRANTY; without even the implied warranty of
 // MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
 // 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/>.
 
@@ -61,16 +61,32 @@ $(document).ready(function(){
     };
 
     // Toggle appearance of lists of error/warnings/notices
-	expandLink.click( function(){
-		$(this).parent().next().slideToggle('slow', function(){});
-        if ($(this).parent().hasClass('showing')) {
-            $(this).html('+');
+    expandLink.click( function(){
+		$(this).next().slideToggle('slow', function(){});
+        if ($(this).hasClass('showing')) {
+            $(this).find('span.expander').html('+');
+            $(this).attr('aria-expanded', false);
         }
         else {
-            $(this).html('-');
+            $(this).find('span.expander').html('-');
+            $(this).attr('aria-expanded', true);
         }
-        $(this).parent().toggleClass('showing');
+        $(this).toggleClass('showing');
 	});
+    $(document).on('keydown.lists', '[data-role="expander"]', function (e) {
+        var $this = $(this);
+        var k = e.which || e.keyCode;
+
+        if (!/(13|32)/.test(k)) {
+            return;
+        }
+        if (k === 13 || k === 32) {
+            $this.click();
+        }
+
+        e.preventDefault();
+        e.stopPropagation();
+    });
 
      // Back to top links
     toTopLinks.click( function(e){
@@ -94,7 +110,7 @@ $(document).ready(function(){
         target = $(this).attr('href');
         animateSection($(target), -25);
         if (!$(target).hasClass('showing')) {
-            $(target).children('[data-role="expander"]').click();
+            $(target).click();
         }
     });
 
@@ -192,8 +208,8 @@ $(document).ready(function(){
                 '<div class="series-checkbox-container">' +
                     '<input type="checkbox"' +
                         'name="' + key + '" ' +
-                        'checked="checked" ' +
-                        'id="id' + key + '"' +
+                        'id="id' + key + '" ' +
+                        'data-stat-type="' + val.label.toLowerCase() + '"' +
                         '/>' +
                     '<label for="id' + key + '">' +
                         '<span class="stat-type">' + val.label + '</span>' +
@@ -201,9 +217,11 @@ $(document).ready(function(){
                 '</div>' +
             '</li>'
         );
+
     });
 
     choiceContainer.find('input').click(plotAccordingToChoices);
+    choiceContainer.find('[data-stat-type=errors]').click();
 
     function plotAccordingToChoices() {
         var data = [];
@@ -286,4 +304,29 @@ $(document).ready(function(){
 		});
 	}
 
+	// Extend public/js/vendor/bootstrap/js/collapse.js
+	// Add keyboard control for filters
+
+	$.fn.collapse.Constructor.prototype.keydown = function (e) {
+		var $this = $(this);
+		var k = e.which || e.keyCode;
+
+		if (!/(13|32)/.test(k)) {
+			return;
+		}
+		if (k === 13 || k === 32) {
+			$this.click();
+		}
+
+		e.preventDefault();
+		e.stopPropagation();
+	};
+
+	$('[data-toggle="collapse"]').attr('role', 'button').attr('tabindex', 0);
+	$(document).on(
+		'keydown.collapse.data-api',
+		'[data-toggle="collapse"]',
+		$.fn.collapse.Constructor.prototype.keydown
+	);
+
 });

public/less/site-nojavascript.less

@@ -1,15 +1,15 @@
 // This file is part of pa11y-dashboard.
-// 
+//
 // pa11y-dashboard is free software: you can redistribute it and/or modify
 // it under the terms of the GNU General Public License as published by
 // the Free Software Foundation, either version 3 of the License, or
 // (at your option) any later version.
-// 
+//
 // pa11y-dashboard is distributed in the hope that it will be useful,
 // but WITHOUT ANY WARRANTY; without even the implied warranty of
 // MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
 // 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/>.
 

public/less/site.less

@@ -1,15 +1,15 @@
 // This file is part of pa11y-dashboard.
-// 
+//
 // pa11y-dashboard is free software: you can redistribute it and/or modify
 // it under the terms of the GNU General Public License as published by
 // the Free Software Foundation, either version 3 of the License, or
 // (at your option) any later version.
-// 
+//
 // pa11y-dashboard is distributed in the hope that it will be useful,
 // but WITHOUT ANY WARRANTY; without even the implied warranty of
 // MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
 // 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/>.
 
@@ -252,7 +252,7 @@
 		word-wrap:break-word;
 	}
 	.h4 {
-		margin-bottom:22px;
+		margin-bottom:6px;
 	}
 }
 .date {
@@ -347,19 +347,35 @@ ul.date-links {
 	z-index:10;
 }
 .date-selector {
-	margin-top:-125px;
+	margin-bottom:5px;
 
-	.btn-group > .btn {
-		float:none;
+	.show-stats {
+		margin-top: 0;
 	}
 
-	&.single-result {
-		margin-top:-52px;
-
-		.show-stats {
-			display:none;
-		}
+	h2 {
+		margin-top: 0;
 	}
+
+	.dates-list {
+		margin: 0;
+		padding: 0;
+		list-style-type: none;
+	}
+
+	.dates-list > li {
+		list-style-type: none;
+		padding: 0;
+		margin: 0;
+	}
+
+	.dates-list a {
+		color: #fff;
+		text-decoration: underline;
+	}
+}
+.single-result .date-selector-row {
+	display: none;
 }
 
 /* Graph */
@@ -368,11 +384,11 @@ ul.date-links {
 	width:100%;
 }
 .graph-spacer {
-	margin-bottom:60px;
-	padding-bottom:60px;
+	margin-bottom:30px;
+	padding-bottom:30px;
 }
 .graph-table {
-	margin-bottom:50px;
+	margin-bottom:0;
 
 	td {
 		width:25%;
@@ -478,3 +494,21 @@ ul.date-links {
 		z-index:-1;
 	}
 }
+
+/* inline link list */
+
+.inline-list {
+	display: inline-block;
+	margin: 0;
+	padding: 0;
+}
+.inline-list > li {
+	display: inline-block;
+	border-right: 1px solid @dropdown-fallback-border; // IE8 fallback
+    border-right: 1px solid @dropdown-border;
+	padding: 0 4px 0 0;
+	margin: 0 4px 0 0;
+}
+.inline-list + div.date {
+	display: inline-block;
+}

public/less/utilities.less

@@ -43,3 +43,11 @@
 .affix {
   position: fixed;
 }
+
+
+// Cursors
+// -------------------------
+
+.pointer {
+  cursor: pointer;
+}

public/less/variables.less

@@ -545,6 +545,7 @@
 // Wells
 // -------------------------
 @well-bg:                     #f5f5f5;
+@well-bg-drk:                 #2c3e50;
 
 
 // Badges

public/less/wells.less

@@ -27,3 +27,11 @@
   padding: 9px;
   border-radius: @border-radius-small;
 }
+
+// Dark well
+
+.dark-well {
+    background-color: @well-bg-drk;
+    border-color: darken(@well-bg-drk, 7%);
+    color: #fff;
+}

route/new.js

@@ -1,15 +1,15 @@
 // This file is part of pa11y-dashboard.
-// 
+//
 // pa11y-dashboard is free software: you can redistribute it and/or modify
 // it under the terms of the GNU General Public License as published by
 // the Free Software Foundation, either version 3 of the License, or
 // (at your option) any later version.
-// 
+//
 // pa11y-dashboard is distributed in the hope that it will be useful,
 // but WITHOUT ANY WARRANTY; without even the implied warranty of
 // MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
 // 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/>.
 
@@ -40,7 +40,10 @@ function route (app) {
 			name: req.body.name,
 			url: req.body.url,
 			standard: req.body.standard,
-			ignore: req.body.ignore || []
+			ignore: req.body.ignore || [],
+			timeout: req.body.timeout,
+			username: req.body.username,
+			password: req.body.password
 		};
 		app.webservice.tasks.create(newTask, function (err, task) {
 			if (err) {

route/task/edit.js

@@ -1,15 +1,15 @@
 // This file is part of pa11y-dashboard.
-// 
+//
 // pa11y-dashboard is free software: you can redistribute it and/or modify
 // it under the terms of the GNU General Public License as published by
 // the Free Software Foundation, either version 3 of the License, or
 // (at your option) any later version.
-// 
+//
 // pa11y-dashboard is distributed in the hope that it will be useful,
 // but WITHOUT ANY WARRANTY; without even the implied warranty of
 // MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
 // 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/>.
 
@@ -60,6 +60,9 @@ function route (app) {
 				if (err) {
 					task.name = req.body.name;
 					task.ignore = req.body.ignore;
+					task.timeout = req.body.timeout;
+					task.username = req.body.username;
+					task.password = req.body.password;
 					var standards = getStandards().map(function (standard) {
 						if (standard.title === task.standard) {
 							standard.selected = true;

test/functional/route/new.js

@@ -64,6 +64,20 @@ describe('GET /new', function () {
 			assert.strictEqual(field.getAttribute('value'), '');
 		});
 
+		it('should have a "username" field', function () {
+			var field = this.form.querySelectorAll('input[name=username]')[0];
+			assert.isDefined(field);
+			assert.strictEqual(field.getAttribute('type'), 'text');
+			assert.strictEqual(field.getAttribute('value'), '');
+		});
+
+		it('should have a "password" field', function () {
+			var field = this.form.querySelectorAll('input[name=password]')[0];
+			assert.isDefined(field);
+			assert.strictEqual(field.getAttribute('type'), 'text');
+			assert.strictEqual(field.getAttribute('value'), '');
+		});
+
 		it('should have a "standard" field', function () {
 			var field = this.form.querySelectorAll('select[name=standard]')[0];
 			assert.isDefined(field);

test/functional/route/task/edit.js

@@ -71,6 +71,20 @@ describe('GET /<task-id>/edit', function () {
 			assert.isDefined(field.getAttribute('disabled'));
 		});
 
+		it('should have a "username" field', function () {
+			var field = this.form.querySelectorAll('input[name=username]')[0];
+			assert.isDefined(field);
+			assert.strictEqual(field.getAttribute('type'), 'text');
+			assert.strictEqual(field.getAttribute('value'), 'user');
+		});
+
+		it('should have a "password" field', function () {
+			var field = this.form.querySelectorAll('input[name=password]')[0];
+			assert.isDefined(field);
+			assert.strictEqual(field.getAttribute('type'), 'text');
+			assert.strictEqual(field.getAttribute('value'), 'access');
+		});
+
 		it('should have "ignore" fields', function () {
 			var fields = this.form.querySelectorAll('input[name="ignore[]"]');
 			assert.isDefined(fields);
@@ -89,6 +103,8 @@ describe('POST /<task-id>/edit', function () {
 			endpoint: '/abc000000000000000000001/edit',
 			body: {
 				name: 'foo',
+				username: 'newuser',
+				password: 'secure',
 				ignore: ['bar', 'baz']
 			}
 		};
@@ -102,6 +118,8 @@ describe('POST /<task-id>/edit', function () {
 	it('should edit the task', function (done) {
 		this.webservice.task('abc000000000000000000001').get({}, function (err, task) {
 			assert.strictEqual(task.name, 'foo');
+			assert.strictEqual(task.username, 'newuser');
+			assert.strictEqual(task.password, 'secure');
 			assert.deepEqual(task.ignore, ['bar', 'baz']);
 			done();
 		});

view/index.html

@@ -1,4 +1,4 @@
-{{! 
+{{!
 This file is part of pa11y-dashboard.
 
 pa11y-dashboard is free software: you can redistribute it and/or modify
@@ -16,23 +16,37 @@ along with pa11y-dashboard.  If not, see <http://www.gnu.org/licenses/>.
 }}
 {{#content "title"}}pa11y-dashboard{{/content}}
 
-{{#if siteMessage}}
-    <div class="col-md-12 clearfix" data-test="alert">
-        <div class="alert alert-info site-message">
-            <h3 class="crunch-top"><span class="pull-left glyphicon glyphicon-exclamation-sign"></span> Important</h3>
-            <p class="h5">{{siteMessage}}</p>
-        </div>
-    </div>
-{{/if}}
+<div data-control="task-list">
 
-{{#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>
-            <strong>Bye Bye URL</strong>
-            <p>The URL you selected and its associated results have been deleted.</p>
-        </div>
+  <div class="clearfix">
+    <div class="col-md-6 col-md-offset-3 filter-toggle no-js-hide text-center">
+      <label for="filter-input" class="filter-trigger" data-toggle="collapse" data-target="#filter-input">Filter<span class="glyphicon glyphicon-filter"></span>
+      </label>
+      <div id="filter-input" class="collapse">
+        <input class="form-control" id="task-filter" type="text" data-role="input" placeholder="Type filter term (name or standard)"/>
+      </div>
     </div>
-{{/deleted}}
+  </div>
 
-{{> tasks}}
+  {{#if siteMessage}}
+      <div class="col-md-12 clearfix" data-test="alert">
+          <div class="alert alert-info site-message">
+              <h3 class="crunch-top"><span class="pull-left glyphicon glyphicon-exclamation-sign"></span> Important</h3>
+              <p class="h5">{{siteMessage}}</p>
+          </div>
+      </div>
+  {{/if}}
+
+  {{#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>
+              <strong>Bye Bye URL</strong>
+              <p>The URL you selected and its associated results have been deleted.</p>
+          </div>
+      </div>
+  {{/deleted}}
+
+  {{> tasks}}
+
+</div>

view/new.html

@@ -1,4 +1,4 @@
-{{! 
+{{!
 This file is part of pa11y-dashboard.
 
 pa11y-dashboard is free software: you can redistribute it and/or modify
@@ -65,6 +65,33 @@ along with pa11y-dashboard.  If not, see <http://www.gnu.org/licenses/>.
 		</div>
 	</div>
 
+	<div class="form-group clearfix">
+		<div class="row">
+			<div class="col-md-4 col-sm-4 col-xs-6">
+				<label class="control-label" for="new-task-timeout">Timeout (milliseconds)</label>
+				<input class="form-control" id="new-task-timeout" type="text" placeholder="E.g. 30000" name="timeout" value="{{task.timeout}}"/>
+			</div>
+		</div>
+	</div>
+
+	<div class="form-group clearfix">
+		<div class="row">
+			<div class="col-md-4 col-sm-4 col-xs-6">
+				<label class="control-label" for="new-task-username">Username</label>
+				<input class="form-control" id="new-task-username" type="text" name="username" value="{{task.username}}"/>
+			</div>
+		</div>
+	</div>
+
+	<div class="form-group clearfix">
+		<div class="row">
+			<div class="col-md-4 col-sm-4 col-xs-6">
+				<label class="control-label" for="new-task-password">Password</label>
+				<input class="form-control" id="new-task-password" type="text" name="password" value="{{task.password}}"/> <em>(Note: this will be stored and displayed in plain-text - only suitable for use in a secure environment)</em>
+			</div>
+		</div>
+	</div>
+
 	<p class="control-label"><b>Ignore these rules</b> <a target="_blank" href="https://github.com/nature/pa11y/wiki/HTML-CodeSniffer-Rules">(full list of rules here)</a></p>
 
 	<div class="standards-lists">

view/partial/graph.html

@@ -1,4 +1,4 @@
-{{! 
+{{!
 This file is part of pa11y-dashboard.
 
 pa11y-dashboard is free software: you can redistribute it and/or modify
@@ -18,7 +18,7 @@ along with pa11y-dashboard.  If not, see <http://www.gnu.org/licenses/>.
 	<div class="graph-container graph-spacer ruled">
 		<div data-role="graph" class="graph"></div>
 		<div class="row">
-			<ul class="list-unstyled floated-list series-checkboxes clearfix crunch-bottom col-md-3 col-sm-6 col-xs-12" data-role="series-checkboxes"></ul>
+			<ul class="list-unstyled floated-list series-checkboxes clearfix crunch-bottom col-md-3 col-sm-6 col-xs-12 pull-right" data-role="series-checkboxes"></ul>
 		</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>

view/partial/result-header.html

@@ -1,4 +1,4 @@
-{{! 
+{{!
 This file is part of pa11y-dashboard.
 
 pa11y-dashboard is free software: you can redistribute it and/or modify
@@ -16,7 +16,7 @@ along with pa11y-dashboard.  If not, see <http://www.gnu.org/licenses/>.
 }}
 <div class="col-md-12">
 	<div class="ruled task-header">
-		<div class="row clearfix">
+		<div class="row clearfix task-header">
 			<div class="col-md-12">
 				<div class="h3 crunch well-med well pull-right"><span class="glyphicon glyphicon-calendar"></span>&nbsp;{{date-format mainResult.date format="DD MMM YYYY"}}</div>
 				<h1 class="h2 crunch-top">{{task.name}}</h1>
@@ -24,4 +24,4 @@ along with pa11y-dashboard.  If not, see <http://www.gnu.org/licenses/>.
 			</div>
 		</div>
 	</div>
-</div>
+</div>

view/partial/result-selector.html

@@ -1,35 +0,0 @@
-{{! 
-This file is part of pa11y-dashboard.
-
-pa11y-dashboard is free software: you can redistribute it and/or modify
-it under the terms of the GNU General Public License as published by
-the Free Software Foundation, either version 3 of the License, or
-(at your option) any later version.
-
-pa11y-dashboard is distributed in the hope that it will be useful,
-but WITHOUT ANY WARRANTY; without even the implied warranty of
-MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
-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 zfix">
-	<div class="row">
-		<div class="col-md-4 col-md-offset-4 col-sm-6 col-sm-offset-3">
-			<div class="date-selector{{#if hasOneResult}} single-result{{/if}}">
-				<h4 class="show-stats text-center">Select a date to show stats for</h4>
-				<ul class="list-unstyled">
-					<li class="btn-group block-level clearfix">
-						<button data-toggle="dropdown" class="btn-full-width btn btn-primary dropdown-toggle" type="button">{{date-format task.lastResult.date format="DD MMM YYYY"}} <span class="glyphicon glyphicon-calendar"></span> <span class="caret"></span></button>
-						<ul role="navigation" class="date-links list-group hidden" data-role="date-select-dropdown-menu">
-							{{#results}}
-				          		<li><a class="list-group-item text-center" href="{{href}}">{{date-format date format="DD MMM YYYY"}}</a></li>
-				          	{{/results}}
-				        </ul>
-					</li>
-				</ul>
-			</div>
-		</div>
-	</div>
-</div>

view/partial/result.html

@@ -1,4 +1,4 @@
-{{! 
+{{!
 This file is part of pa11y-dashboard.
 
 pa11y-dashboard is free software: you can redistribute it and/or modify
@@ -14,9 +14,10 @@ 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-3 aside">
 	<div class="row">
-		<div id="top" class="col-md-12 col-sm-6 col-xs-12">
+		<div class="col-md-12 col-sm-6 col-xs-12">
 			<ul data-role="task-list" class="clearfix list-unstyled floated-list task-stats">
 				{{#mainResult}}
 					<li class="danger"><a href="#errors" title="See errors">{{count.error}}<span class="stat-type">Errors</span></a></li>
@@ -40,6 +41,25 @@ along with pa11y-dashboard.  If not, see <http://www.gnu.org/licenses/>.
 			</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"></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">
@@ -50,13 +70,13 @@ along with pa11y-dashboard.  If not, see <http://www.gnu.org/licenses/>.
 	</div>
 </div>
 
-<div class="col-md-9">
+<div class="col-md-9" data-role="expandable-results" role="main">
 	{{#if mainResult.count.error}}
-		<div class="heading label-danger showing first" id="errors" data-test="task-errors">
-			<span data-role="expander" class="pull-right expander"> - </span>
+		<div class="heading label-danger pointer showing first" id="errors" data-test="task-errors" data-role="expander" role="button" tabindex="0" aria-expanded="true" aria-controls="errors-list">
+			<span class="pull-right expander"> - <span class="hide">(close panel)</span></span>
 			Errors ( {{mainResult.count.error}} )
 		</div>
-		<div class="task-danger tasks-list collapse clearfix in">
+		<div class="task-danger tasks-list collapse clearfix in" id="errors-list">
 
 			<ul class="list-unstyled">
 				{{#mainResult.errors}}
@@ -81,11 +101,11 @@ along with pa11y-dashboard.  If not, see <http://www.gnu.org/licenses/>.
 	{{/if}}
 
 	{{#if mainResult.count.warning}}
-		<div class="heading label-warning" id="warnings" data-test="task-warnings">
-			<span data-role="expander" class="pull-right expander"> + </span>
+		<div class="heading label-warning pointer" id="warnings" data-test="task-warnings" data-role="expander" role="button" tabindex="0" aria-expanded="false" aria-controls="warnings-list">
+			<span class="pull-right expander"> + <span class="hide">(open panel)</span></span>
 			Warnings ( {{mainResult.count.warning}} )
 		</div>
-		<div class="task-warning tasks-list collapse clearfix">
+		<div class="task-warning tasks-list collapse clearfix" id="warnings-list">
 			<ul class="list-unstyled">
 				{{#mainResult.warnings}}
 					<li>
@@ -110,11 +130,11 @@ along with pa11y-dashboard.  If not, see <http://www.gnu.org/licenses/>.
 	{{/if}}
 
 	{{#if mainResult.count.notice}}
-		<div class="heading label-info" id="notices" data-test="task-notices">
-			<span data-role="expander" class="pull-right expander"> + </span>
+		<div class="heading label-info pointer" id="notices" data-test="task-notices" data-role="expander" role="button" tabindex="0" aria-expanded="false" aria-controls="notices-list">
+			<span class="pull-right expander"> + <span class="hide">(open panel)</span></span>
 			Notices ( {{mainResult.count.notice}} )
 		</div>
-		<div class="task-info tasks-list collapse clearfix">
+		<div class="task-info tasks-list collapse clearfix" id="notices-list">
 			<ul class="list-unstyled">
 				{{#mainResult.notices}}
 					<li>
@@ -138,11 +158,11 @@ along with pa11y-dashboard.  If not, see <http://www.gnu.org/licenses/>.
 	{{/if}}
 
 	{{#if mainResult.ignore.length}}
-		<div class="heading label-default">
-			<span data-role="expander" class="pull-right expander"> + </span>
+		<div class="heading label-default pointer" id="ignore" data-role="expander" role="button" tabindex="0" aria-expanded="false" aria-controls="ignore-list">
+			<span class="pull-right expander"> + <span class="hide">(open panel)</span></span>
 			Ignored Rules ( {{mainResult.ignore.length}} )
 		</div>
-		<div class="task-default tasks-list collapse clearfix">
+		<div class="task-default tasks-list collapse clearfix" id="ignore-list">
 			<ul class="list-unstyled">
 			    {{#mainResult.ignore}}
 			        <li>

view/partial/task-header.html

@@ -1,4 +1,4 @@
-{{! 
+{{!
 This file is part of pa11y-dashboard.
 
 pa11y-dashboard is free software: you can redistribute it and/or modify
@@ -17,27 +17,25 @@ along with pa11y-dashboard.  If not, see <http://www.gnu.org/licenses/>.
 <div class="col-md-12 zfix">
 	<div class="ruled task-header">
 		<div class="row clearfix">
-			<div class="col-md-9 col-sm-9">
+			<div class="col-md-12">
 				<h1 class="h2 crunch-top">{{task.name}}</h1>
 				<p class="h4">{{simplify-url task.url}}<span class="h5"> ({{task.standard}})</span></p>
 			</div>
-			<div class="col-md-3 col-sm-3 text-right run-details">
-				{{#unless readonly}}
-					<div class="btn-group">
-				        <button type="button" class="btn btn-info dropdown-toggle" data-toggle="dropdown">Options <span class="caret"></span></button>
-				        <ul class="dropdown-menu pull-right" role="menu">
+			<div class="run-details task-header clearfix">
+				<div class="col-md-12 clearfix">
+					{{#unless readonly}}
+				        <ul class="inline-list" role="menu">
 				          	<li><a href="/{{task.id}}/edit">Edit this task</a></li>
 							<li><a href="/{{task.id}}/delete">Delete this task</a></li>
-							<li class="divider"></li>
 							<li><a href="{{task.hrefRun}}" data-test="run-task">Run pa11y</a></li>
 						</ul>
-				    </div>
-				{{/unless}}
-				{{#if mainResult}}
-					<div class="date">Last run : {{date-format mainResult.date format="DD MMM YYYY"}}</div>
-				{{else}}
-					<div class="date">Not yet run</div>
-				{{/if}}
+					{{/unless}}
+					{{#if mainResult}}
+						<div class="date">Last run: <strong>{{date-format mainResult.date format="DD MMM YYYY"}}</strong></div>
+					{{else}}
+						<div class="date">Not yet run</div>
+					{{/if}}
+				</div>
 			</div>
 		</div>
 	</div>

view/partial/tasks.html

@@ -1,4 +1,4 @@
-{{! 
+{{!
 This file is part of pa11y-dashboard.
 
 pa11y-dashboard is free software: you can redistribute it and/or modify
@@ -15,61 +15,49 @@ 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 data-control="task-list">
-
-	<div class="col-md-6 col-md-offset-3 filter-toggle no-js-hide text-center">
-		<label for="filter-input" class="filter-trigger" data-toggle="collapse" data-target="#filter-input">Filter<span class="glyphicon glyphicon-filter"></span>
-		</label>
-		<div id="filter-input" class="collapse">
-			<input class="form-control" id="task-filter" type="text" data-role="input" placeholder="Type filter term (name or standard)"/>
-		</div>
-	</div>
-
-	<ul class="list-unstyled clearfix crunch-bottom">
-		<li class="col-md-4 col-sm-6 task-card add-task">
-			{{#if readonly}}
-				<span class="well task-card-link crunch-bottom">
-					<p class="h3 crunch">Add new URL</p>
-					<p class="supersize-me crunch">+</p>
-				</span>
-			{{else}}
-				<a class="well task-card-link crunch-bottom" data-role="add-task" href="/new" data-test="add-task">
-					<p class="h3 crunch">Add new URL</p>
-					<p class="supersize-me crunch">+</p>
-				</a>
-			{{/if}}
+<ul class="list-unstyled clearfix crunch-bottom">
+	<li class="col-md-4 col-sm-6 task-card add-task">
+		{{#if readonly}}
+			<span class="well task-card-link crunch-bottom">
+				<p class="h3 crunch">Add new URL</p>
+				<p class="supersize-me crunch">+</p>
+			</span>
+		{{else}}
+			<a class="well task-card-link crunch-bottom" data-role="add-task" href="/new" data-test="add-task">
+				<p class="h3 crunch">Add new URL</p>
+				<p class="supersize-me crunch">+</p>
+			</a>
+		{{/if}}
+	</li>
+	{{#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}}">
+				<p class="h3">{{name}}</p>
+				<p class="h5">({{standard}})</p>
+				{{#if lastResult}}
+				<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>
+						<li class="warning" title="Number of warnings ({{count.warning}})">{{count.warning}}<span class="stat-type">Warnings</span></li>
+						<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"}}
+				{{else}}
+					<p class="no-results">No results</p>
+				{{/if}}
+			</a>
+			{{#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">
+							<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>
+					</div>
+			{{/unless}}
 		</li>
-		{{#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}}">
-					<p class="h3">{{name}}</p>
-					<p class="h5">({{standard}})</p>
-					{{#if lastResult}}
-					<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>
-							<li class="warning" title="Number of warnings ({{count.warning}})">{{count.warning}}<span class="stat-type">Warnings</span></li>
-							<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"}}
-					{{else}}
-						<p class="no-results">No results</p>
-					{{/if}}
-				</a>
-				{{#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">
-								<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>
-						</div>
-				{{/unless}}
-			</li>
-		{{/each}}
-	</ul>
-
-</div>
+	{{/each}}
+</ul>

view/result/index.html

@@ -1,4 +1,4 @@
-{{! 
+{{!
 This file is part of pa11y-dashboard.
 
 pa11y-dashboard is free software: you can redistribute it and/or modify
@@ -21,4 +21,6 @@ along with pa11y-dashboard.  If not, see <http://www.gnu.org/licenses/>.
 
 {{> result-header}}
 
-{{> result}}
+<div class="single-result">
+    {{> result}}
+</div>

view/task/edit.html

@@ -1,4 +1,4 @@
-{{! 
+{{!
 This file is part of pa11y-dashboard.
 
 pa11y-dashboard is free software: you can redistribute it and/or modify
@@ -77,6 +77,33 @@ along with pa11y-dashboard.  If not, see <http://www.gnu.org/licenses/>.
 		</div>
 	</div>
 
+	<div class="form-group clearfix">
+		<div class="row">
+			<div class="col-md-4 col-sm-4 col-xs-6">
+				<label class="control-label" for="new-task-timeout">Timeout (milliseconds)</label>
+				<input class="form-control" id="new-task-timeout" type="text" placeholder="E.g. 30000" name="timeout" value="{{task.timeout}}"/>
+			</div>
+		</div>
+	</div>
+
+	<div class="form-group clearfix">
+		<div class="row">
+			<div class="col-md-4 col-sm-4 col-xs-6">
+				<label class="control-label" for="new-task-username">Username</label>
+				<input class="form-control" id="new-task-username" type="text" name="username" value="{{task.username}}"/>
+			</div>
+		</div>
+	</div>
+
+	<div class="form-group clearfix">
+		<div class="row">
+			<div class="col-md-4 col-sm-4 col-xs-6">
+				<label class="control-label" for="new-task-password">Password</label>
+				<input class="form-control" id="new-task-password" type="text" name="password" value="{{task.password}}"/> <em>(Note: this will be stored and displayed in plain-text - only suitable for use in a secure environment)</em>
+			</div>
+		</div>
+	</div>
+
 	<p class="control-label"><b>Ignore these rules</b> <a target="_blank" href="https://github.com/nature/pa11y/wiki/HTML-CodeSniffer-Rules">(full list of rules here)</a></p>
 
 	<div class="standards-lists">

view/task/index.html

@@ -1,4 +1,4 @@
-{{! 
+{{!
 This file is part of pa11y-dashboard.
 
 pa11y-dashboard is free software: you can redistribute it and/or modify
@@ -76,8 +76,6 @@ along with pa11y-dashboard.  If not, see <http://www.gnu.org/licenses/>.
 		{{> graph}}
 	{{/unless}}
 
-	{{> result-selector}}
-
 {{/if}}
 
 {{#if mainResult}}