feat(a11yPlugin): plugin for integrating with Chrome Accessibility Developer Tools

Also includes missing Angular map files.
See plugins/accessibility/index.js for usage.

Author: Marcy Sutton

plugins/accessibility/index.js

@@ -0,0 +1,109 @@
+var q = require('q'),
+    fs = require('fs'),
+    path = require('path'),
+    _ = require('lodash');
+
+/**
+ * You can enable this plugin in your config file:
+ *
+ *    // The Chrome Accessibility Developer Tools are currently
+ *    // the only integration option.
+ *
+ *    exports.config = {
+ *      ...
+ *      plugins: [{
+ *        chromeA11YDevTools: true,
+ *        path: 'node_modules/protractor.plugins/accessiblity'
+ *      }]
+ *    }
+ *
+ */
+
+var AUDIT_FILE = path.join(__dirname, '../../node_modules/accessibility-developer-tools/dist/js/axs_testing.js');
+
+/**
+ * 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) {
+
+  if (config.chromeA11YDevTools) {
+
+    var data = fs.readFileSync(AUDIT_FILE, 'utf-8');
+    data = data + ' return axs.Audit.run();';
+
+    var testOut = {failedCount: 0, specResults: []},
+        elementPromises = [];
+
+    return browser.executeScript_(data, 'a11y developer tool 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, add to promises array
+            elementPromises.push(
+              elem.getOuterHtml().then(function(text) {
+                return {
+                  code: result.rule.code,
+                  list: text
+                };
+              })
+            );
+          });
+          result.elementCount = DOMElements.length;
+        }
+        return result;
+      });
+
+      // Wait for element names to be fetched
+      return q.all(elementPromises).then(function(elementFailures) {
+
+        audit.forEach(function(result, index) {
+          if (result.result === 'FAIL') {
+            result.passed = false;
+            testOut.failedCount++;
+
+            var label = result.elementCount === 1 ? ' element ' : ' elements ';
+            result.output = '\n\t\t' + result.elementCount + label + 'failed:';
+
+            // match elements returned via promises
+            // by their failure codes
+            elementFailures.forEach(function(element, index) {
+              if (element.code === result.rule.code) {
+                result.output += '\n\t\t' + elementFailures[index].list;
+              }
+            });
+            result.output += '\n\n\t\t' + result.rule.url;
+          }
+          else {
+            result.passed = true;
+            result.output = '';
+          }
+
+          testOut.specResults.push({
+            description: result.rule.heading,
+            assertions: [{
+              passed: result.passed,
+              errorMsg: result.output
+            }],
+            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,5 @@
+describe('check if accessibility plugin works on bad apps', function() {
+  it('should have accessibility problems on markup', function() {
+    browser.get('accessibility/badMarkup.html');
+  });
+});

plugins/accessibility/spec/failureConfig.js

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

plugins/accessibility/spec/successConfig.js

@@ -0,0 +1,12 @@
+var env = require('../../../spec/environment.js');
+
+exports.config = {
+  seleniumAddress: env.seleniumAddress,
+  framework: 'jasmine2',
+  specs: ['success_spec.js'],
+  baseUrl: env.baseUrl,
+  plugins: [{
+    chromeA11YDevTools: true,
+    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

@@ -112,4 +112,19 @@ 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: '2 elements failed:'+
+      '\n\t\t<input ng-model="firstName" type="text" class="ng-pristine ng-valid ng-touched">'+
+      '\n\t\t<input ng-model="lastName" type="text" class="ng-pristine ng-untouched ng-valid">'
+    },
+    {
+      message: '1 element failed:'+
+      '\n\t\t<img src="http://example.com/img.jpg">'
+    }]);
+
 executor.execute();

testapp/accessibility/badMarkup.html

@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+
+<html ng-app ng-hint>
+  <head>
+    <meta charset="utf-8">
+    <title>Angular.js Example</title>
+    <script src="../lib/angular/angular.min.js"></script>
+    <script src="../lib/angular/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}}
+    <img src="http://example.com/img.jpg">
+  </body>
+</html>

testapp/accessibility/index.html

@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+
+<html ng-app="xApp">
+  <head>
+    <meta charset="utf-8">
+    <title>Angular.js Example</title>
+    <script src="../../lib/angular/angular.min.js"></script>
+    <script src="../../lib/angular/angular-aria.min.js"></script>
+    <script>
+      angular.module('xApp', []);
+    </script>
+  </head>
+  <body>
+    <label for="firstName">First name:</label>
+    <input ng-model="firstName" type="text" id="firstName" />
+    <br>
+    <label for="lastName">Last name:</label>
+    <input ng-model="lastName" type="text" id="lastName" />
+    <br>
+    Hello {{firstName}} {{lastName}}
+    <img src="http://example.com/img.jpg" alt="{{firstName}} {{lastName}}">
+  </body>
+</html>