create the warning gradient and being setting up a testing process fo…

…r new behavior

app/instance-initializers/axe-component.js

@@ -39,6 +39,17 @@ export function initialize(application) {
      */
     turnAuditOff: false,
 
+    /**
+     * An array of classNames to add to the component when a violation occurs.
+     * If unspecified, the `axe-violation` class is used to apply our default
+     * styling
+     *
+     * @public
+     * @type {Array}
+     */
+    axeViolationClassNames: ['axe-violation'],
+
+
     /**
      * Runs an accessibility audit on any render of the component.
      * @private
@@ -59,7 +70,8 @@ export function initialize(application) {
     audit() {
       if (this.get('tagName') !== '') {
         axe.a11yCheck(this.$(), this.axeOptions, (results) => {
-          let violations = results.violations;
+          const violations = results.violations;
+          const violationClassNames = this.get('axeViolationClassNames');
 
           for (let i = 0, l = violations.length; i < l; i++) {
             let violation = violations[i];
@@ -72,7 +84,7 @@ export function initialize(application) {
               let node = nodes[j];
 
               if (node) {
-                Ember.$(node.target.join(','))[0].classList.add('axe-violation');
+                Ember.$(node.target.join(','))[0].classList.add(...violationClassNames);
               }
             }
           }

bower.json

@@ -5,7 +5,7 @@
     "ember-cli-shims": "0.1.1",
     "ember-cli-test-loader": "0.2.2",
     "ember-qunit-notifications": "0.1.0",
-    "axe-core": "~1.0.1",
+    "axe-core": "~1.1.1",
     "sinonjs": "~1.14.1"
   }
 }

content-for/head-footer.html

@@ -1,5 +1,19 @@
 <style>
   .axe-violation {
-    border: 2px solid red !important;
+    background-image: repeating-linear-gradient(
+      45deg,
+      transparent,
+      transparent 0.4em,
+      hsla(69, 84%, 83%, 1.00) 0.4em,
+      hsla(69, 84%, 83%, 1.00) 0.8em,
+      hsla(166, 44%, 65%, 1.00) 0.8em,
+      hsla(166, 44%, 65%, 1.00) 1.2em,
+      hsla(214, 96%, 45%, 1.00) 1.2em,
+      hsla(214, 96%, 45%, 1.00) 1.6em
+    ) !important;
+  }
+
+  .axe-violation:hover {
+    background-image: none;
   }
 </style>

package.json

@@ -51,6 +51,7 @@
     "testing"
   ],
   "dependencies": {
+    "bower": "1.7.9",
     "broccoli-funnel": "^1.0.1",
     "ember-cli-babel": "^5.1.6",
     "ember-cli-version-checker": "^1.1.6"

tests/.jshintrc

@@ -19,6 +19,7 @@
     "wait",
     "DS",
     "andThen",
+    "axe",
     "currentURL",
     "currentPath",
     "currentRouteName"

tests/acceptance/auto-run-test.js

@@ -6,6 +6,10 @@ import sinon from 'sinon';
 let application;
 let sandbox;
 
+const SELECTORS = {
+  passingInput: '[data-test-selector="passing-input"]'
+};
+
 module('Acceptance | auto-run', {
   beforeEach: function() {
     application = startApp();
@@ -39,7 +43,7 @@ test('should run the function whenever a render occurs', function(assert) {
     assert.equal(currentPath(), 'index');
   });
 
-  click('label');
+  click(`${SELECTORS.passingInput} label`);
 
   andThen(() => {
     assert.ok(callbackStub.calledTwice);

tests/acceptance/violations-test.js

@@ -0,0 +1,38 @@
+import Ember from 'ember';
+import { test } from 'qunit';
+import moduleForAcceptance from '../../tests/helpers/module-for-acceptance';
+import sinon from 'sinon';
+
+let actual, expected, sandbox;
+
+const IDs = {
+  emptyButton: '#empty-button',
+  sloppyInput: '#sloppy-input'
+};
+
+const findBy = (items, key, val) => items.find(item => item[key] === val);
+
+moduleForAcceptance('Acceptance | violations', {
+  beforeEach() {
+    sandbox = sinon.sandbox.create();
+  },
+
+  afterEach() {
+    sandbox.restore();
+  }
+});
+
+test('marking DOM nodes with violations', function(assert) {
+
+  sandbox.stub(axe.ember, 'a11yCheckCallback', function (results) {
+
+    assert.equal(results.violations.length, 2);
+
+    const buttonNameViolation = findBy(results.violations, 'id', 'button-name');
+    assert.equal(buttonNameViolation.nodes[0].target[0], IDs.emptyButton);
+
+  });
+
+  visit('/violations');
+
+});

tests/dummy/app/components/_base-demo-component.js

@@ -0,0 +1,7 @@
+import Ember from 'ember';
+
+const { Component } = Ember;
+
+export default Component.extend({
+  attributeBindings: ['data-test-selector']
+});

tests/dummy/app/components/empty-button.js

@@ -0,0 +1,6 @@
+import BaseDemoComponent from './_base-demo-component';
+
+export default BaseDemoComponent.extend({
+  classNames: ['button'],
+  tagName: 'button'
+});

tests/dummy/app/components/passing-component.js

@@ -1,6 +1,6 @@
-import Ember from 'ember';
+import BaseDemoComponent from './_base-demo-component';
 
-export default Ember.Component.extend({
+export default BaseDemoComponent.extend({
   actions: {
     toggle() {
       this.set('isFailing', true);

tests/dummy/app/components/sloppy-input.js

@@ -0,0 +1,5 @@
+import BaseDemoComponent from './_base-demo-component';
+
+export default BaseDemoComponent.extend({
+  tagName: 'input',
+});

tests/dummy/app/router.js

@@ -6,6 +6,7 @@ const Router = Ember.Router.extend({
 });
 
 Router.map(function() {
+  this.route('violations');
 });
 
 export default Router;

tests/dummy/app/routes/index.js

@@ -0,0 +1,4 @@
+import Ember from 'ember';
+
+export default Ember.Route.extend({
+});

tests/dummy/app/routes/violations.js

@@ -0,0 +1,4 @@
+import Ember from 'ember';
+
+export default Ember.Route.extend({
+});

tests/dummy/app/styles/app.css

@@ -0,0 +1,10 @@
+.button {
+  background-color: aqua;
+  border-radius: 0.25em;
+  border: none;
+  min-height: 1.5rem;
+  height: 1.5rem;
+
+  width: 2.2rem;
+  min-width: 2.2rem;
+}

tests/dummy/app/templates/application.hbs

@@ -1,3 +1,3 @@
-<h2 id="title">Welcome to Ember.js</h2>
+<h2 id="title">Welcome to Ember</h2>
 
-{{passing-component}}
+{{outlet}}

tests/dummy/app/templates/components/empty-button.hbs

@@ -0,0 +1 @@
+{{yield}}

tests/dummy/app/templates/components/sloppy-input.hbs

@@ -0,0 +1 @@
+{{yield}}

tests/dummy/app/templates/index.hbs

@@ -0,0 +1,2 @@
+{{passing-component data-test-selector="passing-input"}}
+{{outlet}}

tests/dummy/app/templates/violations.hbs

@@ -0,0 +1,3 @@
+{{empty-button id="empty-button" data-test-selector="empty-button"}}
+
+{{sloppy-input id="sloppy-input" data-test-selector="sloppy-input"}}