feat(a11yPlugin): initial setup

package.json

@@ -24,7 +24,8 @@
     "optimist": "~0.6.0",
     "q": "1.0.0",
     "lodash": "~2.4.1",
-    "source-map-support": "~0.2.6"
+    "source-map-support": "~0.2.6",
+    "accessibility-developer-tools": "~2.6.0"
   },
   "devDependencies": {
     "expect.js": "~0.2.0",

plugins/accessibility/index.js

@@ -0,0 +1,88 @@
+var q = require('q'),
+    fs = require('fs'),
+    path = require('path'),
+    _ = require('lodash');
+
+var AUDIT_FILE = path.join(__dirname, '../../node_modules/accessibility-developer-tools/dist/js/axs_testing.js');
+
+/**
+ * You enable this plugin in your config file:
+ *
+ *    // Chrome Accessibility Developer Tools:
+ *    exports.config = {
+ *      ...
+ *      plugins: {
+ *        ...
+ *        accessibility: {
+ *          developerTools: true,
+ *        }
+ *      }
+ *    }
+ */
+
+/**
+ * Checks the information returned by the accessibility audit and
+ * displays passed/failed results as console output
+ *
+ * @param {Object} config The configuration file for the accessibility plugin
+ * @return {q.Promise} A promise which resolves to the results of any passed or
+ *    failed tests
+ * @public
+ */
+function teardown(config) {
+
+  var data = fs.readFileSync(AUDIT_FILE, 'utf-8');
+  data = data + ' return axs.Audit.run();';
+
+  var testOut = {failedCount: 0, specResults: []},
+      elementPromises = [];
+
+  return browser.executeScript_(data, 'axs rules').then(function(results) {
+
+    var audit = results.map(function (result) {
+
+      var DOMElements = result.elements;
+      if (DOMElements !== undefined) {
+        DOMElements.forEach(function(elem) {
+          // get elements from WebDriver
+          elementPromises.push(
+            elem.getOuterHtml().then(function(text) {
+              return '\n\t\t' + text;
+            })
+          );
+        });
+      }
+
+      if(result.result === 'FAIL') {
+        result.passed = false;
+        testOut.failedCount++;
+      }
+      else {
+        result.passed = true;
+      }
+
+      return result;
+    });
+
+    // Wait for element names to be fetched
+    return q.all(elementPromises).then(function(message) {
+      audit.forEach(function(result) {
+        result.message = message;
+        result.message += '\n\n\t\t' + result.rule.url;
+
+        testOut.specResults.push({
+          description: result.rule.heading,
+          assertions: [{passed: result.passed, errorMsg: result.message}],
+          duration: 1
+        });
+      });
+
+      if ((testOut.failedCount > 0) || (testOut.specResults.length > 0)) {
+        return testOut;
+      }
+    });
+  });
+}
+
+// Export
+exports.teardown = teardown;

plugins/accessibility/spec/fail_spec.js

@@ -0,0 +1,6 @@
+describe('check if accessibility plugin works on bad apps', function() {
+  it('should have accessibility problems on bad apps', function() {
+    browser.get('accessibility/noContent.html');
+    browser.get('accessibility/unused.html');
+  });
+});

plugins/accessibility/spec/failureConfig.js

@@ -0,0 +1,11 @@
+var env = require('../../../spec/environment.js');
+
+exports.config = {
+  seleniumAddress: env.seleniumAddress,
+  framework: 'jasmine2',
+  specs: ['fail_spec.js'],
+  baseUrl: env.baseUrl,
+  plugins: [{
+    path: '../index.js'
+  }]
+};

plugins/accessibility/spec/successConfig.js

@@ -0,0 +1,11 @@
+var env = require('../../../spec/environment.js');
+
+exports.config = {
+  seleniumAddress: env.seleniumAddress,
+  framework: 'jasmine2',
+  specs: ['success_spec.js'],
+  baseUrl: env.baseUrl,
+  plugins: [{
+    path: "../index.js"
+  }]
+};

plugins/accessibility/spec/success_spec.js

@@ -0,0 +1,9 @@
+describe('accessibility', function() {
+  it('should get a file to test', function() {
+    browser.get('accessibility/index.html');
+
+    element.all(by.css('input')).then(function(inputs) {
+      expect(inputs.length).toEqual(2);
+    });
+  });
+});

scripts/test.js

@@ -35,7 +35,8 @@ passingTests.push('node node_modules/minijasminenode/bin/minijn ' +
     'plugins/timeline/spec/unit.js');
 passingTests.push(
     'node lib/cli.js plugins/timeline/spec/conf.js',
-    'node lib/cli.js plugins/ngHint/spec/successConfig.js');
+    'node lib/cli.js plugins/ngHint/spec/successConfig.js',
+    'node lib/cli.js plugins/accessibility/spec/successConfig.js');
 
 var executor = new Executor();
 
@@ -112,4 +113,16 @@ executor.addCommandlineTest(
       message: 'warning -- Module "xApp" was created but never loaded.'
     }]);
 
+// Check accessibility plugin
+
+executor.addCommandlineTest(
+    'node lib/cli.js plugins/accessibility/spec/failureConfig.js')
+    .expectExitCode(1)
+    .expectErrors([{
+      message: 'warning -- accessibility plugin cannot be run as there is ' +
+          'no content on the page'
+    }, {
+      message: 'warning -- Module "xApp" was created but never loaded.'
+    }]);
+
 executor.execute();

testapp/accessibility/index.html

@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+
+<html ng-app="xApp">
+  <head>
+    <meta charset="utf-8">
+    <title>Angular.js Example</title>
+    <script src="../../lib/angular_v1.3.5/angular.min.js"></script>
+    <script src="../../lib/angular_v1.3.5/angular-aria.min.js"></script>
+    <script>
+      angular.module('xApp', []);
+    </script>
+  </head>
+  <body class="a11y">
+    First name:<input ng-model="firstName" type="text"/>
+    <br>
+    Last name:<input ng-model="lastName" type="text"/>
+    <br>
+    Hello {{firstName}} {{lastName}}
+  </body>
+</html>

testapp/accessibility/noContent.html

@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+
+<html ng-app ng-hint>
+  <head>
+    <meta charset="utf-8">
+    <title>Angular.js Example</title>
+    <script src="../lib/angular_v1.3.5/angular.min.js"></script>
+    <script src="../lib/angular_v1.3.5/angular-aria.min.js"></script>
+    <script>
+      angular.module('xApp', []);
+    </script>
+  </head>
+  <body>
+  </body>
+</html>

testapp/accessibility/unused.html

@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+
+<html ng-app ng-hint>
+  <head>
+    <meta charset="utf-8">
+    <title>Angular.js Example</title>
+    <script src="../lib/angular_v1.3.5/angular.min.js"></script>
+    <script src="../lib/angular_v1.3.5/angular-aria.min.js"></script>
+    <script>
+      angular.module('xApp', []);
+    </script>
+  </head>
+  <body>
+    First name:<input ng-model="firstName" type="text"/>
+    <br>
+    Last name:<input ng-model="lastName" type="text"/>
+    <br>
+    Hello {{firstName}} {{lastName}}
+  </body>
+</html>