Version 2.1.2

I broke this with my incorrect advice :D

CHANGELOG.md

@@ -1,6 +1,25 @@
 
 # Changelog
 
+## 2.1.2 (2016-12-12)
+
+  * 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
+
+## 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
+    * 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

CONTRIBUTING.md

@@ -0,0 +1,21 @@
+
+Contributing Guide
+==================
+
+Thanks for getting involved :tada:
+
+The Pa11y team loves to see new contributors, and we strive to provide a welcoming and inclusive environment. We ask that all contributors read and follow [our code of conduct][code-of-conduct] before joining. If you represent an organisation, then you might find our [guide for companies][companies] helpful.
+
+Our website outlines the many ways that you can contribute to Pa11y:
+
+  - [Help us to talk to our users][communications]
+  - [Help us out with design][designers]
+  - [Help us with our code][developers]
+
+
+
+[code-of-conduct]: http://pa11y.org/contributing/code-of-conduct/
+[communications]: http://pa11y.org/contributing/communications/
+[companies]: http://pa11y.org/contributing/companies/
+[designers]: http://pa11y.org/contributing/designers/
+[developers]: http://pa11y.org/contributing/developers/

README.md

@@ -58,6 +58,8 @@ NODE_ENV=development node index.js
 
 See [development instructions](#development) for more information about running locally (and restarting automatically when files change).
 
+If you run into problems, check the [troubleshooting guide][troubleshooting].
+
 
 Configurations
 --------------
@@ -80,10 +82,12 @@ The boot configurations for Pa11y Dashboard are as follows. Look at the sample J
 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_`.
 
 
-Development
+Contributing
------------
+------------
 
-To develop Pa11y Dashboard, you'll need to clone the repo and get set up as outlined in the [setup guide](#setup).
+There are many ways to contribute to Pa11y Dashboard, we cover these in the [contributing guide](CONTRIBUTING.md) for this repo.
+
+If you're ready to contribute some code, you'll need to clone the repo and get set up as outlined in the [setup guide](#setup).
 
 You'll need to start the application in test mode with:
 
@@ -148,11 +152,12 @@ Copyright © 2013–2016, Springer Nature
 [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/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.0.0-blue.svg
+[shield-version]: https://img.shields.io/badge/version-2.1.2-blue.svg
 [shield-build]: https://img.shields.io/travis/pa11y/dashboard/master.svg

TROUBLESHOOTING.md

@@ -0,0 +1,27 @@
+Troubleshooting
+===============
+
+
+Common issues
+-----
+
+* `500` errors or `Could not connect to pa11y-webservice` messages are often related to MongoDB. Ensure that you have the [latest version of MongoDB][mongo-install] installed, and that it's running - it doesn't always start automatically. 
+* Error messages saying that pa11y-webservice isn't running may be due to dependency installation problems. Try deleting your `pa11y-dashboard/node_modules` directory and running `npm install` again. 
+
+
+Check to see if the issue has been reported
+-----
+
+* Check the [issue tracker][issues] for similar issues.
+
+
+Create an issue
+-----
+
+If all else fails, [create an issue][create-issue] and we'll help you. Please include your node.js, Phantom, and MongoDB version numbers, and your operating system. 
+
+
+[issues]: https://github.com/pa11y/dashboard/issues?utf8=%E2%9C%93&q=is%3Aissue
+[mongo-install]: https://docs.mongodb.org/manual/installation/
+[create-issue]: https://github.com/pa11y/dashboard/issues/new
+

config.js

@@ -18,9 +18,12 @@
 const fs = require('fs');
 const environment = (process.env.NODE_ENV || 'development');
 const jsonPath = `./config/${environment}.json`;
+const jsPath = `./config/${environment}.js`;
 
 if (fs.existsSync(jsonPath)) {
 	module.exports = require(jsonPath);
+} else if (fs.existsSync(jsPath)) {
+	module.exports = require(jsPath);
 } else {
 	module.exports = {
 		port: Number(env('PORT', '4000')),

package.json

@@ -1,51 +1,52 @@
 {
-	"name": "pa11y-dashboard",
+  "name": "pa11y-dashboard",
-	"version": "2.0.1",
+  "version": "2.1.2",
-	"private": true,
+  "private": true,
-
+  "description": "Pa11y Dashboard is a visual web interface to the Pa11y accessibility reporter",
-	"description": "Pa11y Dashboard is a visual web interface to the Pa11y accessibility reporter",
+  "keywords": [
-	"keywords": [ "accessibility", "analysis", "report" ],
+    "accessibility",
-	"contributors": [
+    "analysis",
-		"Perry Harlock (http://www.phwebs.co.uk/)",
+    "report"
-		"Rowan Manning (http://rowanmanning.com/)"
+  ],
-	],
+  "contributors": [
-
+    "Perry Harlock (http://www.phwebs.co.uk/)",
-	"repository": {
+    "Rowan Manning (http://rowanmanning.com/)"
-		"type": "git",
+  ],
-		"url": "https://github.com/pa11y/dashboard.git"
+  "repository": {
-	},
+    "type": "git",
-	"homepage": "https://github.com/pa11y/dashboard",
+    "url": "https://github.com/pa11y/dashboard.git"
-	"bugs": "https://github.com/pa11y/dashboard/issues",
+  },
-	"license": "GPL-3.0",
+  "homepage": "https://github.com/pa11y/dashboard",
-
+  "bugs": "https://github.com/pa11y/dashboard/issues",
-	"engines": {
+  "license": "GPL-3.0",
-		"node": ">=4"
+  "engines": {
-	},
+    "node": ">=4"
-	"dependencies": {
+  },
-		"body-parser": "~1.15",
+  "dependencies": {
-		"chalk": "~1.1",
+    "body-parser": "~1.15",
-		"compression": "~1.6",
+    "chalk": "~1.1",
-		"express": "~4.14",
+    "compression": "~1.6",
-		"express-hbs": "~1.0",
+    "express": "~4.14",
-		"moment": "~2.13",
+    "express-hbs": "~1.0",
-		"pa11y-webservice": "^2.0.1",
+    "http-headers": "^3.0.1",
-		"pa11y-webservice-client-node": "^1.2.1",
+    "moment": "~2.13",
-		"underscore": "~1.8"
+    "pa11y-webservice": "^2.1.2",
-	},
+    "pa11y-webservice-client-node": "^1.2.1",
-	"devDependencies": {
+    "underscore": "~1.8"
-		"bower": "~1.7",
+  },
-		"cheerio": "~0.20",
+  "devDependencies": {
-		"jscs": "^2",
+    "bower": "~1.7",
-		"jshint": "^2",
+    "cheerio": "~0.20",
-		"less": "~2.7",
+    "jscs": "^2",
-		"mocha": "^3",
+    "jshint": "^2",
-		"proclaim": "^3",
+    "less": "~2.7",
-		"request": "^2.74",
+    "mocha": "^2",
-		"uglify-js": "~2.6"
+    "proclaim": "^3",
-	},
+    "request": "^2.74",
-
+    "uglify-js": "~2.6"
-	"scripts": {
+  },
-		"start": "node index.js",
+  "scripts": {
-		"test": "make ci"
+    "start": "node index.js",
-	}
+    "test": "make ci"
+  }
 }

public/js/site.js

@@ -77,11 +77,11 @@ $(document).ready(function(){
     expandLink.click( function(){
 		$(this).next().slideToggle('slow', function(){});
         if ($(this).hasClass('showing')) {
-            $(this).find('span.expander').html('+');
+            $(this).find('span.expander').html('↓');
             $(this).attr('aria-expanded', false);
         }
         else {
-            $(this).find('span.expander').html('-');
+            $(this).find('span.expander').html('↑');
             $(this).attr('aria-expanded', true);
         }
         $(this).toggleClass('showing');

route/new.js

@@ -13,9 +13,12 @@
 // You should have received a copy of the GNU General Public License
 // along with Pa11y Dashboard.  If not, see <http://www.gnu.org/licenses/>.
 
+/*jshint maxcomplexity:10*/
+
 'use strict';
 
 const getStandards = require('../data/standards');
+const httpHeaders = require('http-headers');
 
 module.exports = route;
 
@@ -36,16 +39,26 @@ function route(app) {
 	});
 
 	app.express.post('/new', (req, res) => {
+
+		let parsedHeaders;
+		if (req.body.headers) {
+			parsedHeaders = httpHeaders(req.body.headers, true);
+		}
+		console.log(parsedHeaders);
+
 		const newTask = {
 			name: req.body.name,
 			url: req.body.url,
 			standard: req.body.standard,
 			ignore: req.body.ignore || [],
-			timeout: req.body.timeout,
+			timeout: req.body.timeout || undefined,
-			wait: req.body.wait,
+			wait: req.body.wait || undefined,
-			username: req.body.username,
+			username: req.body.username || undefined,
-			password: req.body.password
+			password: req.body.password || undefined,
+			headers: parsedHeaders,
+			hideElements: req.body.hideElements || undefined
 		};
+
 		app.webservice.tasks.create(newTask, (err, task) => {
 			if (err) {
 				const standards = getStandards().map(standard => {

route/task/edit.js

@@ -13,10 +13,13 @@
 // You should have received a copy of the GNU General Public License
 // along with Pa11y Dashboard.  If not, see <http://www.gnu.org/licenses/>.
 
+/*jshint maxcomplexity:10*/
+
 'use strict';
 
 const presentTask = require('../../view/presenter/task');
 const getStandards = require('../../data/standards');
+const httpHeaders = require('http-headers');
 
 module.exports = route;
 
@@ -54,7 +57,14 @@ function route(app) {
 			if (err) {
 				return next();
 			}
+			const originalHeaders = req.body.headers;
 			req.body.ignore = req.body.ignore || [];
+			req.body.timeout = req.body.timeout || undefined;
+			req.body.wait = req.body.wait || undefined;
+			req.body.username = req.body.username || undefined;
+			req.body.password = req.body.password || undefined;
+			req.body.hideElements = req.body.hideElements || undefined;
+			req.body.headers = httpHeaders(req.body.headers || '', true);
 			app.webservice.task(req.params.id).edit(req.body, err => {
 				if (err) {
 					task.name = req.body.name;
@@ -63,6 +73,8 @@ function route(app) {
 					task.wait = req.body.wait;
 					task.username = req.body.username;
 					task.password = req.body.password;
+					task.headers = originalHeaders;
+					task.hideElements = req.body.hideElements;
 					const standards = getStandards().map(standard => {
 						if (standard.title === task.standard) {
 							standard.selected = true;

test/integration/route/new.js

@@ -96,6 +96,18 @@ describe('GET /new', function() {
 			assert.notStrictEqual(fields.length, 0);
 		});
 
+		it('should have a "hideElements" field', function() {
+			const field = this.form.find('input[name=hideElements]').eq(0);
+			assert.isDefined(field);
+			assert.strictEqual(field.attr('type'), 'text');
+			assert.strictEqual(field.attr('value'), '');
+		});
+
+		it('should have a "headers" field', function() {
+			const field = this.form.find('textarea[name=headers]').eq(0);
+			assert.isDefined(field);
+		});
+
 	});
 
 });

test/integration/route/task/edit.js

@@ -91,6 +91,18 @@ describe('GET /<task-id>/edit', function() {
 			assert.strictEqual(field.attr('value'), 'access');
 		});
 
+		it('should have a "hideElements" field', function() {
+			const field = this.form.find('input[name=hideElements]').eq(0);
+			assert.isDefined(field);
+			assert.strictEqual(field.attr('type'), 'text');
+			assert.strictEqual(field.attr('value'), '');
+		});
+
+		it('should have a "headers" field', function() {
+			const field = this.form.find('textarea[name=headers]').eq(0);
+			assert.isDefined(field);
+		});
+
 		it('should have "ignore" fields', function() {
 			const fields = this.form.find('input[name="ignore[]"]');
 			assert.isDefined(fields);

view/500.html

@@ -15,9 +15,13 @@ 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-8">
-	<h1>Eeek! 500 error. This is serious.</h1>
+	<h1>Eeek! 500 error.</h1>
-	<p class="h2">There isn't much you can do about this.</h2>
+	<p class="h2">Let's see what we can do here:</h2>
-	<p class="h4">Give it another go or try the <a href="/">home page</a>.</h4>
+	<ul>
+		<li>Do you have <a href="https://www.mongodb.com/">MongoDB</a> installed and <code>mongod</code> running?</li>
+		<li>Check out the <a href="https://github.com/pa11y/dashboard/blob/master/TROUBLESHOOTING.md">Troubleshooting doc</a> for more information.</li>
+		<li>Search for a related <a href="https://github.com/pa11y/dashboard/issues">Github issue</a>, or open one yourself.</li>
+	</ul>
 	{{#if error}}
 		<h2>Stack-Trace</h2>
 		<pre>{{error.stack}}</pre>

view/new.html

@@ -38,7 +38,7 @@ along with Pa11y Dashboard.  If not, see <http://www.gnu.org/licenses/>.
 		<div class="row">
 			<div class="col-md-8 col-sm-8 col-xs-10">
 				<label class="control-label" for="new-task-name">Name</label>
-				<input class="form-control" id="new-task-name" type="text" placeholder="E.g. My Home Page" name="name" value="{{task.name}}"/>
+				<input class="form-control" id="new-task-name" type="text" required placeholder="E.g. My Home Page" name="name" value="{{task.name}}"/>
 			</div>
 		</div>
 	</div>
@@ -47,7 +47,7 @@ along with Pa11y Dashboard.  If not, see <http://www.gnu.org/licenses/>.
 		<div class="row">
 			<div class="col-md-8 col-sm-8 col-xs-10">
 				<label class="control-label" for="new-task-url">URL</label>
-				<input class="form-control" id="new-task-url" type="url" placeholder="E.g. http://mysite.com/" name="url" value="{{task.url}}"/>
+				<input class="form-control" id="new-task-url" type="url" required pattern="https?:\/\/.+" placeholder="E.g. http://mysite.com/" name="url" value="{{task.url}}"/>
 			</div>
 		</div>
 	</div>
@@ -102,6 +102,25 @@ 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-headers">HTTP Headers</label>
+				<textarea class="form-control" id="new-task-headers" name="headers" placeholder="Cookie: foo=bar">{{task.headers}}</textarea>
+				<em>(As key/value pairs, separated by newlines/colons)</em>
+			</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-hide-elements">Hide Elements</label>
+				<input class="form-control" id="new-task-hide-elements" type="text" name="hideElements" value="{{task.hideElements}}" placeholder=".advert, #modal, div[aria-role=presentation]"/> <em>(CSS selector)</em>
+			</div>
+		</div>
+	</div>
+
 	<p class="control-label"><b>Ignore these rules</b> <a target="_blank" href="https://github.com/pa11y/pa11y/wiki/HTML-CodeSniffer-Rules">(full list of rules here)</a></p>
 
 	<div class="standards-lists">

view/partial/result.html

@@ -73,7 +73,7 @@ along with Pa11y Dashboard.  If not, see <http://www.gnu.org/licenses/>.
 <div class="col-md-9" data-role="expandable-results" role="main">
 	{{#if mainResult.count.error}}
 		<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>
+			<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" id="errors-list">
@@ -109,7 +109,7 @@ along with Pa11y Dashboard.  If not, see <http://www.gnu.org/licenses/>.
 
 	{{#if mainResult.count.warning}}
 		<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>
+			<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" id="warnings-list">
@@ -145,7 +145,7 @@ along with Pa11y Dashboard.  If not, see <http://www.gnu.org/licenses/>.
 
 	{{#if mainResult.count.notice}}
 		<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>
+			<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" id="notices-list">
@@ -180,7 +180,7 @@ along with Pa11y Dashboard.  If not, see <http://www.gnu.org/licenses/>.
 
 	{{#if mainResult.ignore.length}}
 		<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>
+			<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" id="ignore-list">

view/partial/tasks.html

@@ -16,19 +16,15 @@ along with Pa11y Dashboard.  If not, see <http://www.gnu.org/licenses/>.
 }}
 
 <ul class="list-unstyled clearfix crunch-bottom">
-	<li class="col-md-4 col-sm-6 task-card add-task">
+
-		{{#if readonly}}
+	{{#unless readonly}}
-			<span class="well task-card-link crunch-bottom">
+	        <li class="col-md-4 col-sm-6 task-card add-task">
-				<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>
-	</li>
+	{{/unless}}
 	{{#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}}">
@@ -49,14 +45,14 @@ along with Pa11y Dashboard.  If not, see <http://www.gnu.org/licenses/>.
 			</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>
+					<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">
+					<ul class="dropdown-menu pull-right" role="menu">
-							<li><a href="{{href}}/edit">Edit this task</a></li>
+						<li><a href="{{href}}/edit">Edit this task</a></li>
-							<li><a href="{{href}}/delete">Delete this task</a></li>
+						<li><a href="{{href}}/delete">Delete this task</a></li>
-							<li class="divider"></li>
+						<li class="divider"></li>
-							<li><a href="{{href}}/run" data-test="run-task">Run Pa11y</a></li>
+						<li><a href="{{href}}/run" data-test="run-task">Run Pa11y</a></li>
-						</ul>
+					</ul>
-					</div>
+				</div>
 			{{/unless}}
 		</li>
 	{{/each}}

view/presenter/task.js

@@ -35,6 +35,13 @@ function presentTask(task) {
 	// Enhance the ignored rules
 	task.ignore = presentIgnoreRules(task.ignore);
 
+	// Change headers to a string format
+	if (task.headers && typeof task.headers === 'object') {
+		task.headers = Object.keys(task.headers).map(header => {
+			return `${header}: ${task.headers[header]}`;
+		}).join('\n');
+	}
+
 	// Present the last result if present
 	if (task.last_result) {
 		task.lastResult = presentResult(task.last_result);

view/task/edit.html

@@ -50,7 +50,7 @@ along with Pa11y Dashboard.  If not, see <http://www.gnu.org/licenses/>.
 		<div class="row">
 			<div class="col-md-8 col-sm-8 col-xs-10">
 				<label class="control-label" for="new-task-name">Name</label>
-				<input class="form-control" id="new-task-name" type="text" placeholder="E.g. My Home Page" name="name" value="{{task.name}}"/>
+				<input class="form-control" id="new-task-name" type="text" required placeholder="E.g. My Home Page" name="name" value="{{task.name}}"/>
 			</div>
 		</div>
 	</div>
@@ -59,7 +59,7 @@ along with Pa11y Dashboard.  If not, see <http://www.gnu.org/licenses/>.
 		<div class="row">
 			<div class="col-md-8 col-sm-8 col-xs-10">
 				<label class="control-label" for="new-task-url">URL</label>
-				<input class="form-control" id="new-task-url" type="url" placeholder="E.g. http://mysite.com/" name="url" value="{{task.url}}" disabled/>
+				<input class="form-control" id="new-task-url" type="url" required pattern="https?:\/\/.+" placeholder="E.g. http://mysite.com/" name="url" value="{{task.url}}" disabled/>
 			</div>
 		</div>
 	</div>
@@ -114,6 +114,25 @@ 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-headers">HTTP Headers</label>
+				<textarea class="form-control" id="new-task-headers" name="headers" placeholder="Cookie: foo=bar">{{task.headers}}</textarea>
+				<em>(As key/value pairs, separated by newlines/colons)</em>
+			</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-hide-elements">Hide Elements</label>
+				<input class="form-control" id="new-task-hide-elements" type="text" name="hideElements" value="{{task.hideElements}}" placeholder=".advert, #modal, div[aria-role=presentation]"/> <em>(CSS selector)</em>
+			</div>
+		</div>
+	</div>
+
 	<p class="control-label"><b>Ignore these rules</b> <a target="_blank" href="https://github.com/pa11y/pa11y/wiki/HTML-CodeSniffer-Rules">(full list of rules here)</a></p>
 
 	<div class="standards-lists">