Merge pull request #132 from drewlee/master

Andrew A Lee · web-flow · commit 7ec9c50fc19e · 2019-09-09T15:13:13.000-04:00
Fixes #124. Allows a11yAudit to account for axe include/exclude context param.
diff --git a/addon-test-support/audit.js b/addon-test-support/audit.js
@@ -44,6 +44,18 @@ function isPlainObj(obj) {
   return typeof obj == 'object' && obj.constructor == Object;
 }
 
+/**
+ * Determines whether supplied object contains `include` and `exclude` axe
+ * context selector properties. This is necessary to distinguish an axe
+ * config object from a context selector object, after a single argument
+ * is supplied to `runA11yAudit`.
+ * @param {Object} obj
+ * @return {Boolean}
+ */
+function isNotSelectorObj(obj) {
+  return !obj.hasOwnProperty('include') && !obj.hasOwnProperty('exclude');
+}
+
 /**
  * Runs the axe a11y audit with the given context selector and options.
  * The context defaults to '#ember-testing-container' if not specified.
@@ -56,7 +68,7 @@ function runA11yAudit(contextSelector = '#ember-testing-container', axeOptions)
   mark('a11y_audit_start');
 
   // Support passing axeOptions as a single argument
-  if (arguments.length === 1 && isPlainObj(contextSelector)) {
+  if (arguments.length === 1 && isPlainObj(contextSelector) && isNotSelectorObj(contextSelector)) {
     axeOptions = contextSelector;
     contextSelector = '#ember-testing-container';
   }
diff --git a/addon/utils/concurrent-axe.js b/addon/utils/concurrent-axe.js
@@ -20,7 +20,7 @@ export class ConcurrentAxe {
    * @return {Void}
    */
   run(element, options, callback) {
-    if (this._timer) {
+    if (this._timer !== null) {
       this._queue.push(arguments);
     } else {
       this._timer = next(() => {
diff --git a/tests/acceptance/a11y-audit-test.js b/tests/acceptance/a11y-audit-test.js
@@ -71,6 +71,30 @@ test('a11yAudit should properly scope to a specified html element context (not r
   });
 });
 
+test('a11yAudit accounts for axe.run include and exclude context parameter', function(assert) {
+  visit('/');
+
+  a11yAudit({
+    include: [[SELECTORS.passingComponent]]
+  });
+
+  a11yAudit({
+    include: [['#ember-testing-container']],
+    exclude: [
+      [SELECTORS.failingComponent],
+      ['[data-test-selector="labeless-text-input"]'],
+      ['[data-test-selector="paragraph-with-blink-tag"]'],
+      ['[data-test-selector="ungrouped-radio-inputs"]'],
+      ['[data-test-selector="noise-level-selection"]'],
+      ['[data-test-selector="poor-text-contrast"]']
+    ]
+  });
+
+  andThen(() => {
+    assert.ok(true, 'no errors should have been found in a11yAudit');
+  });
+});
+
 test('a11yAudit can accept an options hash in addition to context', function(assert) {
   visit('/');
 
diff --git a/tests/dummy/app/index.html b/tests/dummy/app/index.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html>
+<html lang="en-US">
   <head>
     <meta charset="utf-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
diff --git a/tests/dummy/app/templates/application.hbs b/tests/dummy/app/templates/application.hbs
@@ -1,7 +1,7 @@
 <div class="application o-content-box">
 
   <header class="application__header">
-    <h2 class="u-align-center">Ember A11y Testing</h2>
+    <h1 class="u-align-center">Ember A11y Testing</h1>
   </header>
 
   <main class="application__main-content u-relative u-fill-width o-content-box--lg">
diff --git a/tests/dummy/app/templates/components/violations-grid-item.hbs b/tests/dummy/app/templates/components/violations-grid-item.hbs
@@ -1,5 +1,5 @@
 <section class="c-violations-grid-item__header">
-  <h4 class="c-violations-grid-item__title u-align-center">{{title}}</h4>
+  <h3 class="c-violations-grid-item__title u-align-center">{{title}}</h3>
 </section>
 
 <section class="c-violations-grid-item__body u-relative">
diff --git a/tests/dummy/app/templates/violations.hbs b/tests/dummy/app/templates/violations.hbs
@@ -3,7 +3,7 @@
   <span class="p-violations__header-hint">&#42;Open your developer console to view violation logging</span>
 </header>
 
-<section class="p-violations__noise-selectors">
+<section class="p-violations__noise-selectors" data-test-selector="noise-level-selection">
 
   <fieldset class="c-radio-track u-align-center u-relative">
     <legend class="c-radio-track__heading">Visual Noise Level</legend>
@@ -93,7 +93,7 @@
     {{#violations-grid-item class="p-violations__grid-item" title="Poorly Contrasting Text Color" turnAuditOff=true}}
       {{#x-paragraph
         class="p-violations__grid-item-content--low-contrast-text"
-        data-test-selector="labeless-text-input"
+        data-test-selector="poor-text-contrast"
         id="violations__low-contrast-text"
         visualNoiseLevel=model.currentNoiseLevel}}
           Swoooosh
@@ -119,7 +119,7 @@
         💡 PRO TIP: In lieu of a <radiogroup>, a containing <fieldset>
         here would make these accessible.
       --}}
-      <div class="p-violations__grid-item-content--radio-items">
+      <div class="p-violations__grid-item-content--radio-items" data-test-selector="ungrouped-radio-inputs">
         <label class="u-fill-width u-align-center p-violations__grid-item-content--radio" for="violations__radio-group-items--strawberries">
           Strawberries
           {{radio-button-input name="fruits" groupValue=model.currentFruit value="Strawberries" id="violations__radio-group-items--strawberries" visualNoiseLevel=model.currentNoiseLevel}}
