Build: add accessibility testing

Fixes jquery-archive#99
dylanb · Jul 31, 2015 · 9682bb6 · 9682bb6
1 parent 6a9565e
commit 9682bb6
Show file tree

Hide file tree

Showing 8 changed files with 108 additions and 36 deletions.
diff --git a/.gitignore b/.gitignore
@@ -10,3 +10,4 @@ external/
 icons/svg-min/
 .sass-cache/
 dist/
+tmp/
diff --git a/Gruntfile.js b/Gruntfile.js
@@ -1,10 +1,11 @@
 module.exports = function( grunt ) {
-var path = require( "path" );
-require( "load-grunt-config" )( grunt, {
-	configPath: [
-		path.join( process.cwd(), "tasks/options" ),
-		path.join( process.cwd(), "tasks" )
-	],
-	init: true
-} );
+	grunt.loadNpmTasks("axe-grunt-webdriver");
+	var path = require( "path" );
+	require( "load-grunt-config" )( grunt, {
+		configPath: [
+			path.join( process.cwd(), "tasks/options" ),
+			path.join( process.cwd(), "tasks" )
+		],
+		init: true
+	} );
 };
diff --git a/demos/typography.html b/demos/typography.html
@@ -1,5 +1,5 @@
 <!doctype html>
-<html>
+<html lang="en">
 <head>
 	<meta charset="utf-8">
 	<title>CSS Chassis - Typography</title>

diff --git a/lib/reporter.js b/lib/reporter.js
@@ -0,0 +1,48 @@
+
+
+function color(code, str) {
+	return "\u001b[" + code + "m" + str + "\u001b[0m";
+}
+
+exports = module.exports = function( grunt, results, threshold ) {
+	var pass = true;
+	results.forEach( function ( result ) {
+		grunt.log.subhead( result.url );
+		var violations = result.violations;
+		if ( violations.length ) {
+			if ( violations.length > threshold ) {
+				pass = false;
+				grunt.log.error( "Found " + result.violations.length + " accessibility violations:" );
+			} else {
+				grunt.log.ok( "Found " + result.violations.length + " accessibility violations: (under threshold of " + threshold + ")" );
+			}
+			result.violations.forEach( function( ruleResult ) {
+				grunt.log.subhead( " " + color(31, "\u00D7") + " " + ruleResult.help );
+
+				ruleResult.nodes.forEach( function( violation, index ) {
+					grunt.log.writeln( "   " + ( index + 1 ) + ". " + JSON.stringify( violation.target ) );
+
+					if ( violation.any.length ) {
+						grunt.log.writeln( "       Fix any of the following:" );
+						violation.any.forEach( function( check ) {
+							grunt.log.writeln( "        \u2022 " + check.message );
+						} );
+					}
+
+					var alls = violation.all.concat( violation.none );
+					if ( alls.length ) {
+						grunt.log.writeln( "       Fix all of the following:" );
+						alls.forEach( function( check ) {
+							grunt.log.writeln( "        \u2022 " + check.message );
+						} );
+					}
+					grunt.log.writeln();
+				});
+			});
+			return;
+		} else {
+			grunt.log.ok( "Found no accessibility violations." );
+		}
+	} );
+	return pass;
+};
diff --git a/package.json b/package.json
@@ -37,16 +37,17 @@
   },
   "dependencies": {},
   "devDependencies": {
+    "axe-grunt-webdriver": "0.0.1",
     "browser-perf": "1.2.3",
     "chromedriver": "2.13.0",
     "commitplease": "2.0.0",
     "ejs-template": "0.1.0",
     "grunt": "0.4.5",
     "grunt-autoprefixer": "2.1.0",
-    "grunt-contrib-cssmin": "0.10.0",
+    "grunt-contrib-connect": "0.9.0",
     "grunt-contrib-csslint": "0.4.0",
+    "grunt-contrib-cssmin": "0.10.0",
     "grunt-contrib-jshint": "0.10.0",
-    "grunt-contrib-connect": "0.9.0",
     "grunt-contrib-watch": "0.6.1",
     "grunt-csscomb": "3.0.0",
     "grunt-git-authors": "2.0.0",

diff --git a/tasks/alias.js b/tasks/alias.js
@@ -1,7 +1,8 @@
 module.exports = function( grunt ) {
 grunt.registerTask( "default", [ "test" ] );
-grunt.registerTask( "test", [ "build", "jshint", "jscs", "csslint" ] );
-grunt.registerTask( "build", [ "svg", "sass", "csscomb", "cssmin" ] );
+grunt.registerTask( "accessibility", [ "connect:accessibility", "axe-webdriver"])
+grunt.registerTask( "test", [ "build", "jshint", "jscs", "csslint", "accessibility" ] );
+grunt.registerTask( "build", [ "buildVariables", "svg", "sass", "csscomb", "cssmin" ] );
 grunt.registerTask( "perf", [
 	"start-selenium-server",
 	"connect:perf",

diff --git a/tasks/options/axe-webdriver.js b/tasks/options/axe-webdriver.js
@@ -0,0 +1,16 @@
+module.exports = {
+	firefox: {
+		options: {
+			threshold: 0
+		},
+		urls: ['http://localhost:4200/demos/typography.html'],
+		dest: 'tmp/gu.json'
+	},
+	chrome: {
+		options: {
+			browser: 'chrome',
+			threshold: 0
+		},
+		urls: ['http://localhost:4200/demos/typography.html']
+	}
+};
diff --git a/tasks/options/connect.js b/tasks/options/connect.js
@@ -5,32 +5,36 @@ var template = require( "ejs-template" ),
 module.exports = {
 	options: {
 		port: 4200,
-		base: ".",
-		middleware: [
-			template.middleware({ basedir: __dirname }),
-			function( req, res ) {
-				var data, i,
-					url = urlParser.parse( req.url, true ),
-					query = {},
-					parts = url.pathname.split( "/" ),
-					file = req.url.replace( /^\//, "" ).split( "?" )[ 0 ];
+		base: "."
+	},
+	perf: {
+		options: {
+			middleware: [
+				template.middleware({ basedir: __dirname }),
+				function( req, res ) {
+					var data, i,
+						url = urlParser.parse( req.url, true ),
+						query = {},
+						parts = url.pathname.split( "/" ),
+						file = req.url.replace( /^\//, "" ).split( "?" )[ 0 ];
 
-				for ( i = 1; i < parts.length; i += 2 ) {
-					query[ parts[ i ] ] = parts[ i + 1 ];
+					for ( i = 1; i < parts.length; i += 2 ) {
+						query[ parts[ i ] ] = parts[ i + 1 ];
+					}
+					if ( file.split( "." ).length <= 1 ) {
+						data = componentGenerator.generate(
+							query.framework,
+							query.component,
+							query.count
+						);
+						file = "../../performance/component.html";
+					}
+					res.endTemplate( file, data );
 				}
-				if ( file.split( "." ).length <= 1 ) {
-					data = componentGenerator.generate(
-						query.framework,
-						query.component,
-						query.count
-					);
-					file = "../../performance/component.html";
-				}
-				res.endTemplate( file, data );
-			}
-		]
+			]
+		}
 	},
-	perf: {},
+	accessibility: {},
 	dev: {
 		options: {
 			keepalive: true