chore: run a11y audits on protractor

* Fixes accessibility issue in grid-list with `role="listitem"`
* Adds protractor plugin to run aXe-core accessibility audits
* Fixes a bunch of a11y issues in the e2e app to make the aXe audits green

Author: devversion

package.json

@@ -51,6 +51,9 @@
     "@types/node": "^6.0.34",
     "@types/run-sequence": "0.0.27",
     "@types/rx": "^2.5.33",
+    "axe-core": "^2.0.7",
+    "axe-protractor": "0.0.7",
+    "axe-webdriverjs": "^0.4.0",
     "browserstacktunnel-wrapper": "^2.0.0",
     "conventional-changelog": "^1.1.0",
     "express": "^4.14.0",
@@ -80,7 +83,6 @@
     "minimist": "^1.2.0",
     "node-sass": "^3.4.2",
     "protractor": "^4.0.8",
-    "protractor-accessibility-plugin": "0.1.1",
     "resolve-bin": "^0.4.0",
     "rollup": "^0.34.13",
     "run-sequence": "^1.2.2",

src/e2e-app/e2e-app/e2e-app.html

@@ -1,12 +1,17 @@
-<a md-list-item [routerLink]="['button']">Button</a>
-<a md-list-item [routerLink]="['checkbox']">Checkbox</a>
-<a md-list-item [routerLink]="['dialog']">Dialog</a>
-<a md-list-item [routerLink]="['grid-list']">Grid list</a>
-<a md-list-item [routerLink]="['icon']">Icon</a>
-<a md-list-item [routerLink]="['list']">List</a>
-<a md-list-item [routerLink]="['menu']">Menu</a>
-<a md-list-item [routerLink]="['progress-bar']">Progress bar</a>
-<a md-list-item [routerLink]="['radio']">Radios</a>
-<a md-list-item [routerLink]="['tabs']">Tabs</a>
+<md-nav-list>
+  <a md-list-item [routerLink]="['button']">Button</a>
+  <a md-list-item [routerLink]="['checkbox']">Checkbox</a>
+  <a md-list-item [routerLink]="['dialog']">Dialog</a>
+  <a md-list-item [routerLink]="['grid-list']">Grid list</a>
+  <a md-list-item [routerLink]="['icon']">Icon</a>
+  <a md-list-item [routerLink]="['list']">List</a>
+  <a md-list-item [routerLink]="['menu']">Menu</a>
+  <a md-list-item [routerLink]="['progress-bar']">Progress bar</a>
+  <a md-list-item [routerLink]="['radio']">Radios</a>
+  <a md-list-item [routerLink]="['tabs']">Tabs</a>
+</md-nav-list>
+
+<main>
+  <router-outlet role="main"></router-outlet>
+</main>
 
-<router-outlet></router-outlet>

src/e2e-app/radio/radio-e2e.html

@@ -1,10 +1,12 @@
 <section>
   <md-radio-group [disabled]="isGroupDisabled"
                   [(value)]="groupValue"
-                  id="test-group">
+                  id="test-group" aria-label="Select a Pokemon">
+
     <md-radio-button value="fire" id="fire">Charmander</md-radio-button>
     <md-radio-button value="water" id="water">Squirtle</md-radio-button>
     <md-radio-button value="leaf" id="leaf">Bulbasaur</md-radio-button>
+
   </md-radio-group>
   <button (click)="isGroupDisabled=!isGroupDisabled" id="toggle-disable">Disable/enable group</button>
 </section>

src/lib/grid-list/grid-list.ts

@@ -35,6 +35,9 @@ const MD_FIT_MODE = 'fit';
   selector: 'md-grid-list',
   templateUrl: 'grid-list.html',
   styleUrls: ['grid-list.css'],
+  host: {
+    'role': 'list'
+  },
   encapsulation: ViewEncapsulation.None,
 })
 export class MdGridList implements OnInit, AfterContentChecked {

test/protractor.conf.js

@@ -9,15 +9,27 @@ require('ts-node').register({
 
 const E2E_BASE_URL = process.env['E2E_BASE_URL'] || 'http://localhost:4200';
 const config = {
-  // TODO(jelbourn): add back plugin for a11y assersions once it supports specifying AXS options.
   useAllAngular2AppRoots: true,
   specs: [ path.join(__dirname, '../e2e/**/*.e2e.ts') ],
   baseUrl: E2E_BASE_URL,
   allScriptsTimeout: 120000,
   getPageTimeout: 120000,
   jasmineNodeOpts: {
     defaultTimeoutInterval: 120000,
-  }
+  },
+
+  plugins: [
+    {
+      // Runs the axe-core accessibility checks each time the e2e page changes and
+      // Angular is ready.
+      path: '../tools/axe-protractor/axe-protractor.js',
+
+      rules: [
+        // Exclude md-menu elements because those are empty if not active.
+        { id: 'aria-required-children', selector: '*:not(.md-menu)' },
+      ]
+    }
+  ]
 };
 
 if (process.env['TRAVIS']) {

tools/axe-protractor/axe-protractor.js

@@ -0,0 +1,47 @@
+'use strict';
+
+/**
+ * Protractor Plugin to run axe-core accessibility audits after Angular bootstrapped.
+ */
+
+const AxeBuilder = require('axe-webdriverjs');
+const {buildMessage} = require('./build-message');
+
+/* List of pages which were already checked by axe-core and shouldn't run again */
+const checkedPages = [];
+
+/**
+ * Protractor plugin hook which always runs when Angular successfully bootsrapped.
+ */
+function onPageStable() {
+  AxeBuilder(browser.driver)
+    .configure(this.config || {})
+    .analyze(results => handleResults(this, results));
+}
+
+/**
+ * Processes the axe-core results by reporting recognized violations
+ * to Protractor and printing them out.
+ * @param {!protractor.ProtractorPlugin} context
+ * @param {axe.AxeResults} results
+ */
+function handleResults(context, results) {
+
+  if (checkedPages.indexOf(results.url) !== -1) {
+    checkedPages.push(results.url);
+
+    results.violations.forEach(violation => {
+      
+      let specName = `${violation.help} (${results.url})`;
+      let message = '\n' + buildMessage(violation);
+
+      context.addFailure(message, {specName});
+
+    });
+
+  }
+
+}
+
+exports.name = 'protractor-axe';
+exports.onPageStable = onPageStable;

tools/axe-protractor/build-message.js

@@ -0,0 +1,16 @@
+/**
+ * Builds a simple message of the violation results of axe-core by listing
+ * each violation and the associated element selector in a new line.
+ * @param {!axe.Violation} violation
+ */
+exports.buildMessage = violation => {
+
+  let selectors = violation.nodes.map(node => {
+    return node.target.join(' ');
+  });
+
+  return selectors.reduce((content, selector) => {
+    return content + '- ' + selector + '\n';
+  }, '');
+
+};