Merge pull request #28 from BrianSipple/improve-violation-highlight-s…

…tyles

Improve Violation Highlight Styles

README.md

@@ -82,6 +82,18 @@ time it is rendered. This ensures that the component is still accessible even
 after state changes, and since the checks are scoped to a component's element,
 it means that any state change propagated downwards is also caught.
 
+#### Inspecting Violations
+When a violation is detected for a component's element, the element will have the `.axe-violation` class added to it. Visually, this will produce a striping pattern over the element (which will disappear on hover) designed to make it easily distinguishable from its expected appearance, even for users with low vision.
+
+Take this text input without a label, for example:
+
+![](docs/assets/violation-styling.png)
+
+At the same time, a violation error message will be logged to the console with even more detailed information as to what went wrong. The following message corresponds to the same text input element above:
+
+![](docs/assets/violation-console-output.png)
+
+
 #### Component Hooks
 
 Since development is not a uniform experience, Ember A11y Testing provides

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);
               }
             }
           }

content-for/head-footer.html

@@ -1,5 +1,19 @@
 <style>
   .axe-violation {
-    border: 2px solid red !important;
+    background-image: repeating-linear-gradient(
+      135deg,
+      transparent,
+      transparent 1.2em,   /* make transparent portion somewhat wider than total stripe width */
+      hsla(69, 84%, 83%, 1.00) 1.2em,
+      hsla(69, 84%, 83%, 1.00) 1.45em,
+      hsla(166, 44%, 65%, 1.00) 1.45em,
+      hsla(166, 44%, 65%, 1.00) 1.7em,
+      hsla(214, 96%, 45%, 1.00) 1.7em,
+      hsla(214, 96%, 45%, 1.00) 1.95em
+    ) !important;
+  }
+
+  .axe-violation:hover {
+    background-image: none !important;
   }
 </style>

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,43 @@
+import Ember from 'ember';
+import { test } from 'qunit';
+import moduleForAcceptance from '../../tests/helpers/module-for-acceptance';
+import sinon from 'sinon';
+
+const { A } = Ember;
+
+const IDs = {
+  emptyButton: '#empty-button',
+  sloppyInput: '#sloppy-input'
+};
+
+
+let actual, expected, sandbox;
+
+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) {
+    actual = results.violations.length;
+    expected = 2;
+
+    assert.equal(actual, expected);
+
+    const buttonNameViolation = A(results.violations).findBy('id', 'button-name');
+    actual = buttonNameViolation.nodes[0].target[0];
+    expected = IDs.emptyButton;
+
+    assert.equal(actual, expected);
+  });
+
+  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"}}