From 5eddb14a330c31fe9369b9d350a9755d49c0d8e2 Mon Sep 17 00:00:00 2001
From: Buck Doyle <buck@hashicorp.com>
Date: Tue, 25 Aug 2020 10:56:02 -0500
Subject: [PATCH] Add component accessibility auditing and fixes (#8679)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

This continues #8455 by adding accessibility audits to component integration
tests and fixing associated errors. It adds audits to existing tests rather than
adding separate ones to facilitate auditing the various permutations a
component’s rendering can go through.

It also adds linting to ensure audits happen in component tests. This
necessitated consolidating test files that were scattered.
---
 ui/app/templates/components/fs/file.hbs       |  2 +-
 .../components/multi-select-dropdown.hbs      | 53 ++++++-----
 ui/tests/.eslintrc.js                         | 39 +++++---
 ui/tests/acceptance/allocation-detail-test.js |  3 +-
 .../acceptance/application-errors-test.js     |  4 +-
 ui/tests/acceptance/behaviors/fs.js           | 94 +++++++++++++++----
 ui/tests/acceptance/client-detail-test.js     |  3 +-
 ui/tests/acceptance/client-monitor-test.js    |  3 +-
 ui/tests/acceptance/clients-list-test.js      |  3 +-
 ui/tests/acceptance/exec-test.js              |  3 +-
 ui/tests/acceptance/job-allocations-test.js   |  3 +-
 ui/tests/acceptance/job-definition-test.js    |  3 +-
 ui/tests/acceptance/job-deployments-test.js   |  3 +-
 ui/tests/acceptance/job-detail-test.js        | 21 +++--
 ui/tests/acceptance/job-evaluations-test.js   |  3 +-
 ui/tests/acceptance/job-run-test.js           |  3 +-
 ui/tests/acceptance/job-versions-test.js      |  3 +-
 ui/tests/acceptance/jobs-list-test.js         |  3 +-
 ui/tests/acceptance/namespaces-test.js        |  3 +-
 .../acceptance/plugin-allocations-test.js     |  3 +-
 ui/tests/acceptance/plugin-detail-test.js     |  3 +-
 ui/tests/acceptance/plugins-list-test.js      |  3 +-
 ui/tests/acceptance/regions-test.js           |  3 +-
 ui/tests/acceptance/server-detail-test.js     |  3 +-
 ui/tests/acceptance/server-monitor-test.js    |  3 +-
 ui/tests/acceptance/servers-list-test.js      |  3 +-
 ui/tests/acceptance/task-detail-test.js       |  3 +-
 ui/tests/acceptance/task-group-detail-test.js |  3 +-
 ui/tests/acceptance/task-logs-test.js         |  3 +-
 ui/tests/acceptance/token-test.js             |  3 +-
 ui/tests/acceptance/volume-detail-test.js     |  3 +-
 ui/tests/acceptance/volumes-list-test.js      |  3 +-
 ui/tests/helpers/a11y-audit.js                | 22 +++--
 .../{ => components}/agent-monitor-test.js    |  7 +-
 .../{ => components}/allocation-row-test.js   |  5 +-
 .../{ => components}/app-breadcrumbs-test.js  |  5 +-
 .../{ => components}/attributes-table-test.js |  3 +
 .../components/copy-button-test.js            |  6 +-
 .../{ => components}/fs/file-test.js          | 10 +-
 .../{ => components}/gauge-chart-test.js      |  3 +
 .../{ => components}/image-file-test.js       |  3 +
 .../{ => components}/job-diff-test.js         |  7 +-
 .../{ => components}/job-editor-test.js       | 17 ++++
 .../{ => components}/job-page/helpers.js      |  0
 .../job-page/parts/body-test.js               |  3 +
 .../job-page/parts/children-test.js           |  3 +
 .../job-page/parts/latest-deployment-test.js  |  5 +
 .../job-page/parts/placement-failures-test.js |  3 +
 .../job-page/parts/summary-test.js            |  7 ++
 .../job-page/parts/task-groups-test.js        |  3 +
 .../job-page/periodic-test.js                 |  3 +
 .../{ => components}/job-page/service-test.js |  9 ++
 .../components/lifecycle-chart-test.js        |  4 +
 .../integration/components/line-chart-test.js |  5 +
 .../{ => components}/list-pagination-test.js  |  3 +
 .../{ => components}/list-table-test.js       |  3 +
 .../multi-select-dropdown-test.js             |  8 ++
 .../{ => components}/page-layout-test.js      |  2 +
 .../placement-failure-test.js                 |  7 +-
 .../plugin-allocation-row-test.js             |  2 +
 .../{ => components}/popover-menu-test.js     |  3 +
 .../{ => components}/primary-metric-test.js   |  2 +
 .../reschedule-event-timeline-test.js         |  7 ++
 .../components/scale-events-accordion-test.js |  6 ++
 .../scale-events-chart-test.js                |  4 +
 .../{ => components}/stepper-input-test.js    |  3 +
 .../{ => components}/streaming-file-test.js   |  4 +-
 .../{ => components}/task-group-row-test.js   |  9 ++
 .../{ => components}/task-log-test.js         |  9 +-
 .../{ => components}/toggle-test.js           |  7 ++
 .../{ => components}/two-step-button-test.js  |  8 ++
 71 files changed, 379 insertions(+), 132 deletions(-)
 rename ui/tests/integration/{ => components}/agent-monitor-test.js (95%)
 rename ui/tests/integration/{ => components}/allocation-row-test.js (95%)
 rename ui/tests/integration/{ => components}/app-breadcrumbs-test.js (94%)
 rename ui/tests/integration/{ => components}/attributes-table-test.js (95%)
 rename ui/tests/integration/{ => components}/fs/file-test.js (96%)
 rename ui/tests/integration/{ => components}/gauge-chart-test.js (92%)
 rename ui/tests/integration/{ => components}/image-file-test.js (96%)
 rename ui/tests/integration/{ => components}/job-diff-test.js (96%)
 rename ui/tests/integration/{ => components}/job-editor-test.js (95%)
 rename ui/tests/integration/{ => components}/job-page/helpers.js (100%)
 rename ui/tests/integration/{ => components}/job-page/parts/body-test.js (95%)
 rename ui/tests/integration/{ => components}/job-page/parts/children-test.js (97%)
 rename ui/tests/integration/{ => components}/job-page/parts/latest-deployment-test.js (97%)
 rename ui/tests/integration/{ => components}/job-page/parts/placement-failures-test.js (95%)
 rename ui/tests/integration/{ => components}/job-page/parts/summary-test.js (96%)
 rename ui/tests/integration/{ => components}/job-page/parts/task-groups-test.js (97%)
 rename ui/tests/integration/{ => components}/job-page/periodic-test.js (97%)
 rename ui/tests/integration/{ => components}/job-page/service-test.js (96%)
 rename ui/tests/integration/{ => components}/list-pagination-test.js (97%)
 rename ui/tests/integration/{ => components}/list-table-test.js (95%)
 rename ui/tests/integration/{ => components}/multi-select-dropdown-test.js (97%)
 rename ui/tests/integration/{ => components}/page-layout-test.js (93%)
 rename ui/tests/integration/{ => components}/placement-failure-test.js (94%)
 rename ui/tests/integration/{ => components}/plugin-allocation-row-test.js (96%)
 rename ui/tests/integration/{ => components}/popover-menu-test.js (95%)
 rename ui/tests/integration/{ => components}/primary-metric-test.js (97%)
 rename ui/tests/integration/{ => components}/reschedule-event-timeline-test.js (95%)
 rename ui/tests/integration/{ => components}/scale-events-chart-test.js (94%)
 rename ui/tests/integration/{ => components}/stepper-input-test.js (98%)
 rename ui/tests/integration/{ => components}/streaming-file-test.js (96%)
 rename ui/tests/integration/{ => components}/task-group-row-test.js (95%)
 rename ui/tests/integration/{ => components}/task-log-test.js (97%)
 rename ui/tests/integration/{ => components}/toggle-test.js (91%)
 rename ui/tests/integration/{ => components}/two-step-button-test.js (95%)

diff --git a/ui/app/templates/components/fs/file.hbs b/ui/app/templates/components/fs/file.hbs
index 471dc0bee98..e4111f9a516 100644
--- a/ui/app/templates/components/fs/file.hbs
+++ b/ui/app/templates/components/fs/file.hbs
@@ -16,7 +16,7 @@
       <button data-test-log-action="tail" class="button is-white is-compact" onclick={{action "gotoTail"}} type="button">Tail</button>
     {{/if}}
     {{#if this.isStreamable}}
-      <button data-test-log-action="toggle-stream" class="button is-white is-compact" onclick={{action "toggleStream"}} type="button">
+      <button data-test-log-action="toggle-stream" class="button is-white is-compact" onclick={{action "toggleStream"}} type="button" title="{{if this.logger.isStreaming "Pause" "Start"}} streaming">
         {{x-icon (if this.logger.isStreaming "media-pause" "media-play") class="is-text"}}
       </button>
     {{/if}}
diff --git a/ui/app/templates/components/multi-select-dropdown.hbs b/ui/app/templates/components/multi-select-dropdown.hbs
index 6def164e6b8..a9dd9c68eee 100644
--- a/ui/app/templates/components/multi-select-dropdown.hbs
+++ b/ui/app/templates/components/multi-select-dropdown.hbs
@@ -4,7 +4,7 @@
   @onClose={{action (mut this.isOpen) false}} as |dd|
 >
   <dd.Trigger data-test-dropdown-trigger class="dropdown-trigger" {{on "keydown" (action "openOnArrowDown" dd)}}>
-    <div class="dropdown-trigger-label">
+    <div class="dropdown-trigger-label" id="{{this.elementId}}-label">
       {{this.label}}
       {{#if this.selection.length}}
         <span data-test-dropdown-count class="tag is-light">
@@ -15,29 +15,34 @@
     <span class="dropdown-trigger-icon ember-power-select-status-icon"></span>
   </dd.Trigger>
   <dd.Content class="dropdown-options">
-    <ul role="listbox" data-test-dropdown-options>
-      {{#each this.options key="key" as |option|}}
-        <li
-          data-test-dropdown-option={{option.key}}
-          class="dropdown-option"
-          tabindex="0"
-          onkeydown={{action "traverseList" option}}
-        >
-          <label>
-            <input
-              type="checkbox"
-              tabindex="-1"
-              checked={{contains option.key this.selection}}
-              onchange={{action "toggle" option}}
-            />
-            {{option.label}}
-          </label>
-        </li>
-      {{else}}
-        <em data-test-dropdown-empty class="dropdown-empty">
+    {{#if this.options}}
+      <ul role="listbox" aria-labelledby="{{this.elementId}}-label" data-test-dropdown-options>
+        {{#each this.options key="key" as |option|}}
+          <div
+            data-test-dropdown-option={{option.key}}
+            class="dropdown-option"
+            tabindex="0"
+            onkeydown={{action "traverseList" option}}
+          >
+            <label>
+              <input
+                type="checkbox"
+                tabindex="-1"
+                checked={{contains option.key this.selection}}
+                role="option"
+                onchange={{action "toggle" option}}
+              />
+              {{option.label}}
+            </label>
+          </div>
+        {{/each}}
+      </ul>
+    {{else}}
+      <ul aria-labelledby="{{this.elementId}}-label" data-test-dropdown-options>
+        <li data-test-dropdown-empty class="dropdown-empty">
           No options
-        </em>
-      {{/each}}
-    </ul>
+        </li>
+      </ul>
+    {{/if}}
   </dd.Content>
 </BasicDropdown>
\ No newline at end of file
diff --git a/ui/tests/.eslintrc.js b/ui/tests/.eslintrc.js
index 59a066dcce8..66934a8751b 100644
--- a/ui/tests/.eslintrc.js
+++ b/ui/tests/.eslintrc.js
@@ -10,19 +10,36 @@ module.exports = {
   env: {
     embertest: true,
   },
-  overrides: {
-    files: ['acceptance/**/*-test.js'],
-    plugins: ['ember-a11y-testing'],
-    rules: {
-      'ember-a11y-testing/a11y-audit-called': 'error',
+  overrides: [
+    {
+      files: ['acceptance/**/*-test.js'],
+      plugins: ['ember-a11y-testing'],
+      rules: {
+        'ember-a11y-testing/a11y-audit-called': 'error',
+      },
+      settings: {
+        'ember-a11y-testing': {
+          auditModule: {
+            package: 'nomad-ui/tests/helpers/a11y-audit',
+            exportName: 'default',
+          },
+        },
+      },
     },
-    settings: {
-      'ember-a11y-testing': {
-        auditModule: {
-          package: 'nomad-ui/tests/helpers/a11y-audit',
-          exportName: 'default',
+    {
+      files: ['integration/components/**/*-test.js'],
+      plugins: ['ember-a11y-testing'],
+      rules: {
+        'ember-a11y-testing/a11y-audit-called': 'error',
+      },
+      settings: {
+        'ember-a11y-testing': {
+          auditModule: {
+            package: 'nomad-ui/tests/helpers/a11y-audit',
+            exportName: 'componentA11yAudit',
+          },
         },
       },
     },
-  },
+  ],
 };
diff --git a/ui/tests/acceptance/allocation-detail-test.js b/ui/tests/acceptance/allocation-detail-test.js
index f6b0ee4226d..2ebdf1f29e0 100644
--- a/ui/tests/acceptance/allocation-detail-test.js
+++ b/ui/tests/acceptance/allocation-detail-test.js
@@ -49,8 +49,7 @@ module('Acceptance | allocation detail', function(hooks) {
   });
 
   test('it passes an accessibility audit', async function(assert) {
-    await a11yAudit();
-    assert.ok(true, 'a11y audit passes');
+    await a11yAudit(assert);
   });
 
   test('/allocation/:id should name the allocation and link to the corresponding job and node', async function(assert) {
diff --git a/ui/tests/acceptance/application-errors-test.js b/ui/tests/acceptance/application-errors-test.js
index ac9ac9bb94f..ab609b61530 100644
--- a/ui/tests/acceptance/application-errors-test.js
+++ b/ui/tests/acceptance/application-errors-test.js
@@ -20,9 +20,7 @@ module('Acceptance | application errors ', function(hooks) {
   test('it passes an accessibility audit', async function(assert) {
     server.pretender.get('/v1/nodes', () => [500, {}, null]);
     await ClientsList.visit();
-    await a11yAudit();
-
-    assert.ok(true, 'a11y audit passes');
+    await a11yAudit(assert);
   });
 
   test('transitioning away from an error page resets the global error', async function(assert) {
diff --git a/ui/tests/acceptance/behaviors/fs.js b/ui/tests/acceptance/behaviors/fs.js
index 574bd06555a..923d46c7bdd 100644
--- a/ui/tests/acceptance/behaviors/fs.js
+++ b/ui/tests/acceptance/behaviors/fs.js
@@ -24,17 +24,31 @@ const fileSort = (prop, files) => {
   return dir.sortBy(prop).concat(file.sortBy(prop));
 };
 
-export default function browseFilesystem({ pageObjectVisitPathFunctionName, pageObjectVisitFunctionName, visitSegments, getExpectedPathBase, getTitleComponent, getBreadcrumbComponent, getFilesystemRoot }) {
+export default function browseFilesystem({
+  pageObjectVisitPathFunctionName,
+  pageObjectVisitFunctionName,
+  visitSegments,
+  getExpectedPathBase,
+  getTitleComponent,
+  getBreadcrumbComponent,
+  getFilesystemRoot,
+}) {
   test('it passes an accessibility audit', async function(assert) {
-    await FS[pageObjectVisitFunctionName](visitSegments({allocation: this.allocation, task: this.task }));
-    await a11yAudit();
-    assert.ok(true, 'a11y audit passes');
+    await FS[pageObjectVisitFunctionName](
+      visitSegments({ allocation: this.allocation, task: this.task })
+    );
+    await a11yAudit(assert);
   });
 
   test('visiting filesystem root', async function(assert) {
-    await FS[pageObjectVisitFunctionName](visitSegments({allocation: this.allocation, task: this.task }));
+    await FS[pageObjectVisitFunctionName](
+      visitSegments({ allocation: this.allocation, task: this.task })
+    );
 
-    const pathBaseWithTrailingSlash = getExpectedPathBase({ allocation: this.allocation, task: this.task });
+    const pathBaseWithTrailingSlash = getExpectedPathBase({
+      allocation: this.allocation,
+      task: this.task,
+    });
     const pathBaseWithoutTrailingSlash = pathBaseWithTrailingSlash.slice(0, -1);
 
     assert.equal(currentURL(), pathBaseWithoutTrailingSlash, 'No redirect');
@@ -50,17 +64,32 @@ export default function browseFilesystem({ pageObjectVisitPathFunctionName, page
         pathWithLeadingSlash = `/${filePath}`;
       }
 
-      await FS[pageObjectVisitPathFunctionName]({ ...visitSegments({allocation: this.allocation, task: this.task }), path: filePath });
+      await FS[pageObjectVisitPathFunctionName]({
+        ...visitSegments({ allocation: this.allocation, task: this.task }),
+        path: filePath,
+      });
       assert.equal(
         currentURL(),
-        `${getExpectedPathBase({allocation: this.allocation, task: this.task })}${encodeURIComponent(filePath)}`,
+        `${getExpectedPathBase({
+          allocation: this.allocation,
+          task: this.task,
+        })}${encodeURIComponent(filePath)}`,
         'No redirect'
       );
       assert.equal(
         document.title,
-        `${pathWithLeadingSlash} - ${getTitleComponent({allocation: this.allocation, task: this.task})} - Nomad`
+        `${pathWithLeadingSlash} - ${getTitleComponent({
+          allocation: this.allocation,
+          task: this.task,
+        })} - Nomad`
+      );
+      assert.equal(
+        FS.breadcrumbsText,
+        `${getBreadcrumbComponent({
+          allocation: this.allocation,
+          task: this.task,
+        })} ${filePath.replace(/\//g, ' ')}`.trim()
       );
-      assert.equal(FS.breadcrumbsText, `${getBreadcrumbComponent({allocation: this.allocation, task: this.task})} ${filePath.replace(/\//g, ' ')}`.trim());
     };
 
     await paths.reduce(async (prev, filePath) => {
@@ -73,7 +102,10 @@ export default function browseFilesystem({ pageObjectVisitPathFunctionName, page
     const objects = { allocation: this.allocation, task: this.task };
     await FS[pageObjectVisitPathFunctionName]({ ...visitSegments(objects), path: '/' });
 
-    const sortedFiles = fileSort('name', filesForPath(this.server.schema.allocFiles, getFilesystemRoot(objects)).models);
+    const sortedFiles = fileSort(
+      'name',
+      filesForPath(this.server.schema.allocFiles, getFilesystemRoot(objects)).models
+    );
 
     assert.ok(FS.fileViewer.isHidden);
 
@@ -123,7 +155,10 @@ export default function browseFilesystem({ pageObjectVisitPathFunctionName, page
     );
 
     assert.equal(FS.breadcrumbs.length, 3);
-    assert.equal(FS.breadcrumbsText, `${getBreadcrumbComponent(objects)} ${this.directory.name} ${this.nestedDirectory.name}`);
+    assert.equal(
+      FS.breadcrumbsText,
+      `${getBreadcrumbComponent(objects)} ${this.directory.name} ${this.nestedDirectory.name}`
+    );
     assert.equal(FS.breadcrumbs[2].text, this.nestedDirectory.name);
 
     assert.notOk(
@@ -190,7 +225,10 @@ export default function browseFilesystem({ pageObjectVisitPathFunctionName, page
       ];
     });
 
-    await FS[pageObjectVisitPathFunctionName]({ ...visitSegments({allocation: this.allocation, task: this.task }), path: '/' });
+    await FS[pageObjectVisitPathFunctionName]({
+      ...visitSegments({ allocation: this.allocation, task: this.task }),
+      path: '/',
+    });
 
     assert.deepEqual(FS.directoryEntryNames(), [
       'aaa-big-old-directory',
@@ -275,7 +313,10 @@ export default function browseFilesystem({ pageObjectVisitPathFunctionName, page
 
     await FS[pageObjectVisitPathFunctionName]({ ...visitSegments(objects), path: '/' });
 
-    const sortedFiles = fileSort('name', filesForPath(this.server.schema.allocFiles, getFilesystemRoot(objects)).models);
+    const sortedFiles = fileSort(
+      'name',
+      filesForPath(this.server.schema.allocFiles, getFilesystemRoot(objects)).models
+    );
     const fileRecord = sortedFiles.find(f => !f.isDir);
     const fileIndex = sortedFiles.indexOf(fileRecord);
 
@@ -303,7 +344,10 @@ export default function browseFilesystem({ pageObjectVisitPathFunctionName, page
   });
 
   test('viewing an empty directory', async function(assert) {
-    await FS[pageObjectVisitPathFunctionName]({ ...visitSegments({ allocation: this.allocation, task: this.task }), path: 'empty-directory' });
+    await FS[pageObjectVisitPathFunctionName]({
+      ...visitSegments({ allocation: this.allocation, task: this.task }),
+      path: 'empty-directory',
+    });
 
     assert.ok(FS.isEmptyDirectory);
   });
@@ -313,7 +357,10 @@ export default function browseFilesystem({ pageObjectVisitPathFunctionName, page
       return new Response(500, {}, 'no such file or directory');
     });
 
-    await FS[pageObjectVisitPathFunctionName]({ ...visitSegments({ allocation: this.allocation, task: this.task }), path: '/what-is-this' });
+    await FS[pageObjectVisitPathFunctionName]({
+      ...visitSegments({ allocation: this.allocation, task: this.task }),
+      path: '/what-is-this',
+    });
     assert.equal(FS.error.title, 'Not Found', '500 is interpreted as 404');
 
     await visit('/');
@@ -322,7 +369,10 @@ export default function browseFilesystem({ pageObjectVisitPathFunctionName, page
       return new Response(999);
     });
 
-    await FS[pageObjectVisitPathFunctionName]({ ...visitSegments({ allocation: this.allocation, task: this.task }), path: '/what-is-this' });
+    await FS[pageObjectVisitPathFunctionName]({
+      ...visitSegments({ allocation: this.allocation, task: this.task }),
+      path: '/what-is-this',
+    });
     assert.equal(FS.error.title, 'Error', 'other statuses are passed through');
   });
 
@@ -331,7 +381,10 @@ export default function browseFilesystem({ pageObjectVisitPathFunctionName, page
       return new Response(500, {}, 'no such file or directory');
     });
 
-    await FS[pageObjectVisitPathFunctionName]({ ...visitSegments({ allocation: this.allocation, task: this.task }), path: this.directory.name });
+    await FS[pageObjectVisitPathFunctionName]({
+      ...visitSegments({ allocation: this.allocation, task: this.task }),
+      path: this.directory.name,
+    });
     assert.equal(FS.error.title, 'Not Found', '500 is interpreted as 404');
 
     await visit('/');
@@ -340,7 +393,10 @@ export default function browseFilesystem({ pageObjectVisitPathFunctionName, page
       return new Response(999);
     });
 
-    await FS[pageObjectVisitPathFunctionName]({ ...visitSegments({ allocation: this.allocation, task: this.task }), path: this.directory.name });
+    await FS[pageObjectVisitPathFunctionName]({
+      ...visitSegments({ allocation: this.allocation, task: this.task }),
+      path: this.directory.name,
+    });
     assert.equal(FS.error.title, 'Error', 'other statuses are passed through');
   });
 }
diff --git a/ui/tests/acceptance/client-detail-test.js b/ui/tests/acceptance/client-detail-test.js
index 4d0b2b2ce2a..9e95141f169 100644
--- a/ui/tests/acceptance/client-detail-test.js
+++ b/ui/tests/acceptance/client-detail-test.js
@@ -44,8 +44,7 @@ module('Acceptance | client detail', function(hooks) {
 
   test('it passes an accessibility audit', async function(assert) {
     await ClientDetail.visit({ id: node.id });
-    await a11yAudit();
-    assert.ok(true, 'a11y audit passes');
+    await a11yAudit(assert);
   });
 
   test('/clients/:id should have a breadcrumb trail linking back to clients', async function(assert) {
diff --git a/ui/tests/acceptance/client-monitor-test.js b/ui/tests/acceptance/client-monitor-test.js
index 2107034d779..e0206430613 100644
--- a/ui/tests/acceptance/client-monitor-test.js
+++ b/ui/tests/acceptance/client-monitor-test.js
@@ -28,8 +28,7 @@ module('Acceptance | client monitor', function(hooks) {
 
   test('it passes an accessibility audit', async function(assert) {
     await ClientMonitor.visit({ id: node.id });
-    await a11yAudit();
-    assert.ok(true, 'a11y audit passes');
+    await a11yAudit(assert);
   });
 
   test('/clients/:id/monitor should have a breadcrumb trail linking back to clients', async function(assert) {
diff --git a/ui/tests/acceptance/clients-list-test.js b/ui/tests/acceptance/clients-list-test.js
index 282ba522117..a1878d0a615 100644
--- a/ui/tests/acceptance/clients-list-test.js
+++ b/ui/tests/acceptance/clients-list-test.js
@@ -21,8 +21,7 @@ module('Acceptance | clients list', function(hooks) {
     server.createList('agent', 1);
 
     await ClientsList.visit();
-    await a11yAudit();
-    assert.ok(true, 'a11y audit passes');
+    await a11yAudit(assert);
   });
 
   test('/clients should list one page of clients', async function(assert) {
diff --git a/ui/tests/acceptance/exec-test.js b/ui/tests/acceptance/exec-test.js
index 13e20dd3fef..b7d0817c664 100644
--- a/ui/tests/acceptance/exec-test.js
+++ b/ui/tests/acceptance/exec-test.js
@@ -36,8 +36,7 @@ module('Acceptance | exec', function(hooks) {
 
   test('it passes an accessibility audit', async function(assert) {
     await Exec.visitJob({ job: this.job.id });
-    await a11yAudit();
-    assert.ok(true, 'a11y audit passes');
+    await a11yAudit(assert);
   });
 
   test('/exec/:job should show the region, namespace, and job name', async function(assert) {
diff --git a/ui/tests/acceptance/job-allocations-test.js b/ui/tests/acceptance/job-allocations-test.js
index 3d0a4102863..7c86653c339 100644
--- a/ui/tests/acceptance/job-allocations-test.js
+++ b/ui/tests/acceptance/job-allocations-test.js
@@ -34,8 +34,7 @@ module('Acceptance | job allocations', function(hooks) {
     allocations = server.schema.allocations.where({ jobId: job.id }).models;
 
     await Allocations.visit({ id: job.id });
-    await a11yAudit();
-    assert.ok(true, 'a11y audit passes');
+    await a11yAudit(assert);
   });
 
   test('lists all allocations for the job', async function(assert) {
diff --git a/ui/tests/acceptance/job-definition-test.js b/ui/tests/acceptance/job-definition-test.js
index e0259ea59ee..779d0f8131d 100644
--- a/ui/tests/acceptance/job-definition-test.js
+++ b/ui/tests/acceptance/job-definition-test.js
@@ -21,8 +21,7 @@ module('Acceptance | job definition', function(hooks) {
   });
 
   test('it passes an accessibility audit', async function(assert) {
-    await a11yAudit('scrollable-region-focusable');
-    assert.ok(true, 'a11y audit passes');
+    await a11yAudit(assert, 'scrollable-region-focusable');
   });
 
   test('visiting /jobs/:job_id/definition', async function(assert) {
diff --git a/ui/tests/acceptance/job-deployments-test.js b/ui/tests/acceptance/job-deployments-test.js
index 3c935fc8240..e501eaff016 100644
--- a/ui/tests/acceptance/job-deployments-test.js
+++ b/ui/tests/acceptance/job-deployments-test.js
@@ -36,8 +36,7 @@ module('Acceptance | job deployments', function(hooks) {
 
   test('it passes an accessibility audit', async function(assert) {
     await Deployments.visit({ id: job.id });
-    await a11yAudit();
-    assert.ok(true, 'a11y audit passes');
+    await a11yAudit(assert);
   });
 
   test('/jobs/:id/deployments should list all job deployments', async function(assert) {
diff --git a/ui/tests/acceptance/job-detail-test.js b/ui/tests/acceptance/job-detail-test.js
index 16c8b18e437..c4a36601e88 100644
--- a/ui/tests/acceptance/job-detail-test.js
+++ b/ui/tests/acceptance/job-detail-test.js
@@ -70,7 +70,11 @@ module('Acceptance | job detail (with namespaces)', function(hooks) {
   hooks.beforeEach(function() {
     server.createList('namespace', 2);
     server.create('node');
-    job = server.create('job', { type: 'service', status: 'running', namespaceId: server.db.namespaces[1].name });
+    job = server.create('job', {
+      type: 'service',
+      status: 'running',
+      namespaceId: server.db.namespaces[1].name,
+    });
     server.createList('job', 3, { namespaceId: server.db.namespaces[0].name });
 
     server.create('token');
@@ -80,8 +84,7 @@ module('Acceptance | job detail (with namespaces)', function(hooks) {
   test('it passes an accessibility audit', async function(assert) {
     const namespace = server.db.namespaces.find(job.namespaceId);
     await JobDetail.visit({ id: job.id, namespace: namespace.name });
-    await a11yAudit();
-    assert.ok(true, 'a11y audit passes');
+    await a11yAudit(assert);
   });
 
   test('when there are namespaces, the job detail page states the namespace for the job', async function(assert) {
@@ -114,8 +117,14 @@ module('Acceptance | job detail (with namespaces)', function(hooks) {
   });
 
   test('the exec button state can change between namespaces', async function(assert) {
-    const job1 = server.create('job', { status: 'running', namespaceId: server.db.namespaces[0].id });
-    const job2 = server.create('job', { status: 'running', namespaceId: server.db.namespaces[1].id });
+    const job1 = server.create('job', {
+      status: 'running',
+      namespaceId: server.db.namespaces[0].id,
+    });
+    const job2 = server.create('job', {
+      status: 'running',
+      namespaceId: server.db.namespaces[1].id,
+    });
 
     window.localStorage.nomadTokenSecret = clientToken.secretId;
 
@@ -163,7 +172,7 @@ module('Acceptance | job detail (with namespaces)', function(hooks) {
       },
     });
 
-    await JobDetail.visit({ id: job.id, namespace: server.db.namespaces[1].name  });
+    await JobDetail.visit({ id: job.id, namespace: server.db.namespaces[1].name });
     assert.notOk(JobDetail.execButton.isDisabled);
   });
 });
diff --git a/ui/tests/acceptance/job-evaluations-test.js b/ui/tests/acceptance/job-evaluations-test.js
index 5e1195fef5c..54e2c3dc8b8 100644
--- a/ui/tests/acceptance/job-evaluations-test.js
+++ b/ui/tests/acceptance/job-evaluations-test.js
@@ -20,8 +20,7 @@ module('Acceptance | job evaluations', function(hooks) {
   });
 
   test('it passes an accessibility audit', async function(assert) {
-    await a11yAudit();
-    assert.ok(true, 'a11y audit passes');
+    await a11yAudit(assert);
   });
 
   test('lists all evaluations for the job', async function(assert) {
diff --git a/ui/tests/acceptance/job-run-test.js b/ui/tests/acceptance/job-run-test.js
index f0596bca212..f541898919e 100644
--- a/ui/tests/acceptance/job-run-test.js
+++ b/ui/tests/acceptance/job-run-test.js
@@ -57,8 +57,7 @@ module('Acceptance | job run', function(hooks) {
 
   test('it passes an accessibility audit', async function(assert) {
     await JobRun.visit();
-    await a11yAudit();
-    assert.ok(true, 'a11y audit passes');
+    await a11yAudit(assert);
   });
 
   test('visiting /jobs/run', async function(assert) {
diff --git a/ui/tests/acceptance/job-versions-test.js b/ui/tests/acceptance/job-versions-test.js
index 6aed64e5d2b..cd2c224d602 100644
--- a/ui/tests/acceptance/job-versions-test.js
+++ b/ui/tests/acceptance/job-versions-test.js
@@ -21,8 +21,7 @@ module('Acceptance | job versions', function(hooks) {
   });
 
   test('it passes an accessibility audit', async function(assert) {
-    await a11yAudit();
-    assert.ok(true, 'a11y audit passes');
+    await a11yAudit(assert);
   });
 
   test('/jobs/:id/versions should list all job versions', async function(assert) {
diff --git a/ui/tests/acceptance/jobs-list-test.js b/ui/tests/acceptance/jobs-list-test.js
index 4b35c379a20..5100fc2f9d3 100644
--- a/ui/tests/acceptance/jobs-list-test.js
+++ b/ui/tests/acceptance/jobs-list-test.js
@@ -26,8 +26,7 @@ module('Acceptance | jobs list', function(hooks) {
 
   test('it passes an accessibility audit', async function(assert) {
     await JobsList.visit();
-    await a11yAudit();
-    assert.ok(true, 'a11y audit passes');
+    await a11yAudit(assert);
   });
 
   test('visiting /jobs', async function(assert) {
diff --git a/ui/tests/acceptance/namespaces-test.js b/ui/tests/acceptance/namespaces-test.js
index 3c0c31cd6e4..3dfd09ab76d 100644
--- a/ui/tests/acceptance/namespaces-test.js
+++ b/ui/tests/acceptance/namespaces-test.js
@@ -50,8 +50,7 @@ module('Acceptance | namespaces (enabled)', function(hooks) {
 
   test('it passes an accessibility audit', async function(assert) {
     await JobsList.visit();
-    await a11yAudit();
-    assert.ok(true, 'a11y audit passes');
+    await a11yAudit(assert);
   });
 
   test('the namespace switcher lists all namespaces', async function(assert) {
diff --git a/ui/tests/acceptance/plugin-allocations-test.js b/ui/tests/acceptance/plugin-allocations-test.js
index 15156bd89f9..34a78f261fe 100644
--- a/ui/tests/acceptance/plugin-allocations-test.js
+++ b/ui/tests/acceptance/plugin-allocations-test.js
@@ -26,8 +26,7 @@ module('Acceptance | plugin allocations', function(hooks) {
     });
 
     await PluginAllocations.visit({ id: plugin.id });
-    await a11yAudit();
-    assert.ok(true, 'a11y audit passes');
+    await a11yAudit(assert);
   });
 
   test('/csi/plugins/:id/allocations shows all allocations in a single table', async function(assert) {
diff --git a/ui/tests/acceptance/plugin-detail-test.js b/ui/tests/acceptance/plugin-detail-test.js
index 405bd3b2f5a..0f3db7cccf0 100644
--- a/ui/tests/acceptance/plugin-detail-test.js
+++ b/ui/tests/acceptance/plugin-detail-test.js
@@ -20,8 +20,7 @@ module('Acceptance | plugin detail', function(hooks) {
 
   test('it passes an accessibility audit', async function(assert) {
     await PluginDetail.visit({ id: plugin.id });
-    await a11yAudit();
-    assert.ok(true, 'a11y audit passes');
+    await a11yAudit(assert);
   });
 
   test('/csi/plugins/:id should have a breadcrumb trail linking back to Plugins and Storage', async function(assert) {
diff --git a/ui/tests/acceptance/plugins-list-test.js b/ui/tests/acceptance/plugins-list-test.js
index 37279683a50..b378f0f2e27 100644
--- a/ui/tests/acceptance/plugins-list-test.js
+++ b/ui/tests/acceptance/plugins-list-test.js
@@ -17,8 +17,7 @@ module('Acceptance | plugins list', function(hooks) {
 
   test('it passes an accessibility audit', async function(assert) {
     await PluginsList.visit();
-    await a11yAudit();
-    assert.ok(true, 'a11y audit passes');
+    await a11yAudit(assert);
   });
 
   test('visiting /csi/plugins', async function(assert) {
diff --git a/ui/tests/acceptance/regions-test.js b/ui/tests/acceptance/regions-test.js
index b3305ff018a..c088fceb323 100644
--- a/ui/tests/acceptance/regions-test.js
+++ b/ui/tests/acceptance/regions-test.js
@@ -21,8 +21,7 @@ module('Acceptance | regions (only one)', function(hooks) {
 
   test('it passes an accessibility audit', async function(assert) {
     await JobsList.visit();
-    await a11yAudit();
-    assert.ok(true, 'a11y audit passes');
+    await a11yAudit(assert);
   });
 
   test('when there is only one region, the region switcher is not shown in the nav bar and the region is not in the page title', async function(assert) {
diff --git a/ui/tests/acceptance/server-detail-test.js b/ui/tests/acceptance/server-detail-test.js
index 1f84307566d..0715104c939 100644
--- a/ui/tests/acceptance/server-detail-test.js
+++ b/ui/tests/acceptance/server-detail-test.js
@@ -18,8 +18,7 @@ module('Acceptance | server detail', function(hooks) {
   });
 
   test('it passes an accessibility audit', async function(assert) {
-    await a11yAudit();
-    assert.ok(true, 'a11y audit passes');
+    await a11yAudit(assert);
   });
 
   test('visiting /servers/:server_name', async function(assert) {
diff --git a/ui/tests/acceptance/server-monitor-test.js b/ui/tests/acceptance/server-monitor-test.js
index d5a6cbdfccd..104d20d52dd 100644
--- a/ui/tests/acceptance/server-monitor-test.js
+++ b/ui/tests/acceptance/server-monitor-test.js
@@ -27,8 +27,7 @@ module('Acceptance | server monitor', function(hooks) {
 
   test('it passes an accessibility audit', async function(assert) {
     await ServerMonitor.visit({ name: agent.name });
-    await a11yAudit();
-    assert.ok(true, 'a11y audit passes');
+    await a11yAudit(assert);
   });
 
   test('/servers/:id/monitor should have a breadcrumb trail linking back to servers', async function(assert) {
diff --git a/ui/tests/acceptance/servers-list-test.js b/ui/tests/acceptance/servers-list-test.js
index 0b5ccf00566..9f6fb9fd5fb 100644
--- a/ui/tests/acceptance/servers-list-test.js
+++ b/ui/tests/acceptance/servers-list-test.js
@@ -27,8 +27,7 @@ module('Acceptance | servers list', function(hooks) {
   test('it passes an accessibility audit', async function(assert) {
     minimumSetup();
     await ServersList.visit();
-    await a11yAudit();
-    assert.ok(true, 'a11y audit passes');
+    await a11yAudit(assert);
   });
 
   test('/servers should list all servers', async function(assert) {
diff --git a/ui/tests/acceptance/task-detail-test.js b/ui/tests/acceptance/task-detail-test.js
index aeaa8ff0029..10e150ffc5d 100644
--- a/ui/tests/acceptance/task-detail-test.js
+++ b/ui/tests/acceptance/task-detail-test.js
@@ -24,8 +24,7 @@ module('Acceptance | task detail', function(hooks) {
   });
 
   test('it passes an accessibility audit', async function(assert) {
-    await a11yAudit();
-    assert.ok(true, 'a11y audit passes');
+    await a11yAudit(assert);
   });
 
   test('/allocation/:id/:task_name should name the task and list high-level task information', async function(assert) {
diff --git a/ui/tests/acceptance/task-group-detail-test.js b/ui/tests/acceptance/task-group-detail-test.js
index 88c324dbe77..a38508f203e 100644
--- a/ui/tests/acceptance/task-group-detail-test.js
+++ b/ui/tests/acceptance/task-group-detail-test.js
@@ -70,8 +70,7 @@ module('Acceptance | task group detail', function(hooks) {
 
   test('it passes an accessibility audit', async function(assert) {
     await TaskGroup.visit({ id: job.id, name: taskGroup.name });
-    await a11yAudit();
-    assert.ok(true, 'a11y audit passes');
+    await a11yAudit(assert);
   });
 
   test('/jobs/:id/:task-group should list high-level metrics for the allocation', async function(assert) {
diff --git a/ui/tests/acceptance/task-logs-test.js b/ui/tests/acceptance/task-logs-test.js
index ebba5b25325..9887e9892e5 100644
--- a/ui/tests/acceptance/task-logs-test.js
+++ b/ui/tests/acceptance/task-logs-test.js
@@ -26,8 +26,7 @@ module('Acceptance | task logs', function(hooks) {
   });
 
   test('it passes an accessibility audit', async function(assert) {
-    await a11yAudit();
-    assert.ok(true, 'a11y audit passes');
+    await a11yAudit(assert);
   });
 
   test('/allocation/:id/:task_name/logs should have a log component', async function(assert) {
diff --git a/ui/tests/acceptance/token-test.js b/ui/tests/acceptance/token-test.js
index a7e0f9c8b97..5306d36f820 100644
--- a/ui/tests/acceptance/token-test.js
+++ b/ui/tests/acceptance/token-test.js
@@ -30,8 +30,7 @@ module('Acceptance | tokens', function(hooks) {
 
   test('it passes an accessibility audit', async function(assert) {
     await Tokens.visit();
-    await a11yAudit();
-    assert.ok(true, 'a11y audit passes');
+    await a11yAudit(assert);
   });
 
   test('the token form sets the token in local storage', async function(assert) {
diff --git a/ui/tests/acceptance/volume-detail-test.js b/ui/tests/acceptance/volume-detail-test.js
index bbe785ad9d4..b951d54d077 100644
--- a/ui/tests/acceptance/volume-detail-test.js
+++ b/ui/tests/acceptance/volume-detail-test.js
@@ -31,8 +31,7 @@ module('Acceptance | volume detail', function(hooks) {
 
   test('it passes an accessibility audit', async function(assert) {
     await VolumeDetail.visit({ id: volume.id });
-    await a11yAudit();
-    assert.ok(true, 'a11y audit passes');
+    await a11yAudit(assert);
   });
 
   test('/csi/volumes/:id should have a breadcrumb trail linking back to Volumes and Storage', async function(assert) {
diff --git a/ui/tests/acceptance/volumes-list-test.js b/ui/tests/acceptance/volumes-list-test.js
index 2818716fbc8..7adf7736474 100644
--- a/ui/tests/acceptance/volumes-list-test.js
+++ b/ui/tests/acceptance/volumes-list-test.js
@@ -29,8 +29,7 @@ module('Acceptance | volumes list', function(hooks) {
 
   test('it passes an accessibility audit', async function(assert) {
     await VolumesList.visit();
-    await a11yAudit();
-    assert.ok(true, 'a11y audit passes');
+    await a11yAudit(assert);
   });
 
   test('visiting /csi redirects to /csi/volumes', async function(assert) {
diff --git a/ui/tests/helpers/a11y-audit.js b/ui/tests/helpers/a11y-audit.js
index c6f5394618a..6ab951a6613 100644
--- a/ui/tests/helpers/a11y-audit.js
+++ b/ui/tests/helpers/a11y-audit.js
@@ -1,16 +1,26 @@
 import a11yAudit from 'ember-a11y-testing/test-support/audit';
 
-export default async function defaultA11yAudit(...overriddenRules) {
+function appendRuleOverrides(overriddenRules) {
   const rules = {
     'color-contrast': {
-      enabled: false
+      enabled: false,
     },
     'heading-order': {
-      enabled: false
-    }
+      enabled: false,
+    },
   };
 
-  overriddenRules.forEach(rule => rules[rule] = { enabled: false });
+  overriddenRules.forEach(rule => (rules[rule] = { enabled: false }));
+
+  return rules;
+}
+
+export default async function defaultA11yAudit(assert, ...overriddenRules) {
+  await a11yAudit({ rules: appendRuleOverrides(overriddenRules) });
+  assert.ok(true, 'a11y audit passes');
+}
 
-  await a11yAudit({rules});
+export async function componentA11yAudit(element, assert, ...overriddenRules) {
+  await a11yAudit(element, { rules: appendRuleOverrides(overriddenRules) });
+  assert.ok(true, 'a11y audit passes');
 }
diff --git a/ui/tests/integration/agent-monitor-test.js b/ui/tests/integration/components/agent-monitor-test.js
similarity index 95%
rename from ui/tests/integration/agent-monitor-test.js
rename to ui/tests/integration/components/agent-monitor-test.js
index 3d86e3bd03d..5a9728f990b 100644
--- a/ui/tests/integration/agent-monitor-test.js
+++ b/ui/tests/integration/components/agent-monitor-test.js
@@ -5,8 +5,9 @@ import { find, render, settled } from '@ember/test-helpers';
 import hbs from 'htmlbars-inline-precompile';
 import Pretender from 'pretender';
 import sinon from 'sinon';
-import { logEncode } from '../../mirage/data/logs';
-import { selectOpen, selectOpenChoose } from '../utils/ember-power-select-extensions';
+import { logEncode } from '../../../mirage/data/logs';
+import { selectOpen, selectOpenChoose } from '../../utils/ember-power-select-extensions';
+import { componentA11yAudit } from 'nomad-ui/tests/helpers/a11y-audit';
 
 module('Integration | Component | agent-monitor', function(hooks) {
   setupRenderingTest(hooks);
@@ -53,6 +54,8 @@ module('Integration | Component | agent-monitor', function(hooks) {
     assert.ok(find('[data-test-toggle]'));
     assert.ok(find('[data-test-log-box]'));
     assert.ok(find('[data-test-log-box].is-full-bleed.is-dark'));
+
+    await componentA11yAudit(this.element, assert);
   });
 
   test('when provided with a client, AgentMonitor streams logs for the client', async function(assert) {
diff --git a/ui/tests/integration/allocation-row-test.js b/ui/tests/integration/components/allocation-row-test.js
similarity index 95%
rename from ui/tests/integration/allocation-row-test.js
rename to ui/tests/integration/components/allocation-row-test.js
index f1c1ae13365..018d6ba9e8d 100644
--- a/ui/tests/integration/allocation-row-test.js
+++ b/ui/tests/integration/components/allocation-row-test.js
@@ -1,11 +1,12 @@
 import { module, test } from 'qunit';
 import { setupRenderingTest } from 'ember-qunit';
 import hbs from 'htmlbars-inline-precompile';
-import generateResources from '../../mirage/data/generate-resources';
+import generateResources from '../../../mirage/data/generate-resources';
 import { startMirage } from 'nomad-ui/initializers/ember-cli-mirage';
 import { find, render } from '@ember/test-helpers';
 import Response from 'ember-cli-mirage/response';
 import { initialize as fragmentSerializerInitializer } from 'nomad-ui/initializers/fragment-serializer';
+import { componentA11yAudit } from 'nomad-ui/tests/helpers/a11y-audit';
 
 module('Integration | Component | allocation row', function(hooks) {
   setupRenderingTest(hooks);
@@ -105,6 +106,7 @@ module('Integration | Component | allocation row', function(hooks) {
     `);
 
     assert.ok(find('[data-test-icon="unhealthy-driver"]'), 'Unhealthy driver icon is shown');
+    await componentA11yAudit(this.element, assert);
   });
 
   test('Allocation row shows an icon indicator when it was preempted', async function(assert) {
@@ -119,6 +121,7 @@ module('Integration | Component | allocation row', function(hooks) {
     `);
 
     assert.ok(find('[data-test-icon="preemption"]'), 'Preempted icon is shown');
+    await componentA11yAudit(this.element, assert);
   });
 
   test('when an allocation is not running, the utilization graphs are omitted', async function(assert) {
diff --git a/ui/tests/integration/app-breadcrumbs-test.js b/ui/tests/integration/components/app-breadcrumbs-test.js
similarity index 94%
rename from ui/tests/integration/app-breadcrumbs-test.js
rename to ui/tests/integration/components/app-breadcrumbs-test.js
index 20d0fd7255e..60ca4b1a053 100644
--- a/ui/tests/integration/app-breadcrumbs-test.js
+++ b/ui/tests/integration/components/app-breadcrumbs-test.js
@@ -5,6 +5,7 @@ import { setupRenderingTest } from 'ember-qunit';
 import { findAll, render, settled } from '@ember/test-helpers';
 import hbs from 'htmlbars-inline-precompile';
 import PromiseObject from 'nomad-ui/utils/classes/promise-object';
+import { componentA11yAudit } from 'nomad-ui/tests/helpers/a11y-audit';
 
 module('Integration | Component | app breadcrumbs', function(hooks) {
   setupRenderingTest(hooks);
@@ -24,7 +25,7 @@ module('Integration | Component | app breadcrumbs', function(hooks) {
   const commonCrumbs = [{ label: 'One', args: ['one'] }, { label: 'Two', args: ['two'] }];
 
   const template = hbs`
-    <AppBreadcrumbs />
+    <ul><AppBreadcrumbs /></ul>
   `;
 
   test('breadcrumbs comes from the breadcrumbs service', async function(assert) {
@@ -75,6 +76,8 @@ module('Integration | Component | app breadcrumbs', function(hooks) {
       'Promise breadcrumb is in a loading state'
     );
 
+    await componentA11yAudit(this.element, assert);
+
     resolvePromise({ label: 'Two', args: ['two'] });
 
     return settled().then(() => {
diff --git a/ui/tests/integration/attributes-table-test.js b/ui/tests/integration/components/attributes-table-test.js
similarity index 95%
rename from ui/tests/integration/attributes-table-test.js
rename to ui/tests/integration/components/attributes-table-test.js
index c129e614334..8ea493a9f76 100644
--- a/ui/tests/integration/attributes-table-test.js
+++ b/ui/tests/integration/components/attributes-table-test.js
@@ -2,6 +2,7 @@ import { find, findAll, render } from '@ember/test-helpers';
 import { module, test } from 'qunit';
 import { setupRenderingTest } from 'ember-qunit';
 import hbs from 'htmlbars-inline-precompile';
+import { componentA11yAudit } from 'nomad-ui/tests/helpers/a11y-audit';
 import flat from 'flat';
 
 const { flatten } = flat;
@@ -36,6 +37,8 @@ module('Integration | Component | attributes table', function(hooks) {
       rowsCount,
       `Table has ${rowsCount} rows with values`
     );
+
+    await componentA11yAudit(this.element, assert);
   });
 
   test('should render the full path of key/value pair from the root of the object', async function(assert) {
diff --git a/ui/tests/integration/components/copy-button-test.js b/ui/tests/integration/components/copy-button-test.js
index 148bc83866c..734294f37be 100644
--- a/ui/tests/integration/components/copy-button-test.js
+++ b/ui/tests/integration/components/copy-button-test.js
@@ -2,6 +2,7 @@ import { module, test } from 'qunit';
 import { setupRenderingTest } from 'ember-qunit';
 import { click, render } from '@ember/test-helpers';
 import hbs from 'htmlbars-inline-precompile';
+import { componentA11yAudit } from 'nomad-ui/tests/helpers/a11y-audit';
 
 import sinon from 'sinon';
 
@@ -14,10 +15,11 @@ module('Integration | Component | copy-button', function(hooks) {
     await render(hbs`<CopyButton @class="copy-button" />`);
 
     assert.dom('.copy-button .icon-is-copy-action').exists();
+    await componentA11yAudit(this.element, assert);
   });
 
   test('it shows the success icon on success and resets afterward', async function(assert) {
-    const clock = sinon.useFakeTimers();
+    const clock = sinon.useFakeTimers({ shouldAdvanceTime: true });
 
     await render(hbs`<CopyButton @class="copy-button" />`);
 
@@ -25,6 +27,7 @@ module('Integration | Component | copy-button', function(hooks) {
     await triggerCopySuccess('.copy-button button');
 
     assert.dom('.copy-button .icon-is-copy-success').exists();
+    await componentA11yAudit(this.element, assert);
 
     clock.runAll();
 
@@ -41,5 +44,6 @@ module('Integration | Component | copy-button', function(hooks) {
     await triggerCopyError('.copy-button button');
 
     assert.dom('.copy-button .icon-is-alert-triangle').exists();
+    await componentA11yAudit(this.element, assert);
   });
 });
diff --git a/ui/tests/integration/fs/file-test.js b/ui/tests/integration/components/fs/file-test.js
similarity index 96%
rename from ui/tests/integration/fs/file-test.js
rename to ui/tests/integration/components/fs/file-test.js
index 3126fd3a077..95a95305948 100644
--- a/ui/tests/integration/fs/file-test.js
+++ b/ui/tests/integration/components/fs/file-test.js
@@ -3,7 +3,8 @@ import { setupRenderingTest } from 'ember-qunit';
 import { find, render, settled } from '@ember/test-helpers';
 import hbs from 'htmlbars-inline-precompile';
 import Pretender from 'pretender';
-import { logEncode } from '../../../mirage/data/logs';
+import { logEncode } from '../../../../mirage/data/logs';
+import { componentA11yAudit } from 'nomad-ui/tests/helpers/a11y-audit';
 
 const { assign } = Object;
 const HOST = '1.1.1.1:1111';
@@ -77,6 +78,8 @@ module('Integration | Component | fs/file', function(hooks) {
       find('[data-test-file-box] [data-test-image-file]'),
       'The image file component was not rendered'
     );
+
+    await componentA11yAudit(this.element, assert);
   });
 
   test('When a file is an image, the file mode is image', async function(assert) {
@@ -93,6 +96,8 @@ module('Integration | Component | fs/file', function(hooks) {
       find('[data-test-file-box] [data-test-log-cli]'),
       'The streaming file component was not rendered'
     );
+
+    await componentA11yAudit(this.element, assert);
   });
 
   test('When the file is neither text-based or an image, the unsupported file type empty state is shown', async function(assert) {
@@ -110,6 +115,7 @@ module('Integration | Component | fs/file', function(hooks) {
       'The streaming file component was not rendered'
     );
     assert.ok(find('[data-test-unsupported-type]'), 'Unsupported file type message is shown');
+    await componentA11yAudit(this.element, assert);
   });
 
   test('The unsupported file type empty state includes a link to the raw file', async function(assert) {
@@ -220,6 +226,8 @@ module('Integration | Component | fs/file', function(hooks) {
       find('[data-test-header] [data-test-yield-spy]'),
       'Yielded content shows up in the header'
     );
+
+    await componentA11yAudit(this.element, assert);
   });
 
   test('The body is full-bleed and dark when the file is streaming', async function(assert) {
diff --git a/ui/tests/integration/gauge-chart-test.js b/ui/tests/integration/components/gauge-chart-test.js
similarity index 92%
rename from ui/tests/integration/gauge-chart-test.js
rename to ui/tests/integration/components/gauge-chart-test.js
index 1a75d716381..910c31922a1 100644
--- a/ui/tests/integration/gauge-chart-test.js
+++ b/ui/tests/integration/components/gauge-chart-test.js
@@ -2,6 +2,7 @@ import { find, render } from '@ember/test-helpers';
 import { module, test } from 'qunit';
 import { setupRenderingTest } from 'ember-qunit';
 import hbs from 'htmlbars-inline-precompile';
+import { componentA11yAudit } from 'nomad-ui/tests/helpers/a11y-audit';
 import { create } from 'ember-cli-page-object';
 import gaugeChart from 'nomad-ui/tests/pages/components/gauge-chart';
 
@@ -30,6 +31,8 @@ module('Integration | Component | gauge chart', function(hooks) {
     assert.equal(GaugeChart.label, props.label);
     assert.equal(GaugeChart.percentage, '50%');
     assert.ok(GaugeChart.svgIsPresent);
+
+    await componentA11yAudit(this.element, assert);
   });
 
   test('the width of the chart is determined based on the container and the height is a function of the width', async function(assert) {
diff --git a/ui/tests/integration/image-file-test.js b/ui/tests/integration/components/image-file-test.js
similarity index 96%
rename from ui/tests/integration/image-file-test.js
rename to ui/tests/integration/components/image-file-test.js
index f9122241e84..424cb9e3ab7 100644
--- a/ui/tests/integration/image-file-test.js
+++ b/ui/tests/integration/components/image-file-test.js
@@ -2,6 +2,7 @@ import { find, settled } from '@ember/test-helpers';
 import { module, test } from 'qunit';
 import { setupRenderingTest } from 'ember-qunit';
 import hbs from 'htmlbars-inline-precompile';
+import { componentA11yAudit } from 'nomad-ui/tests/helpers/a11y-audit';
 import sinon from 'sinon';
 import RSVP from 'rsvp';
 import { formatBytes } from 'nomad-ui/helpers/format-bytes';
@@ -30,6 +31,8 @@ module('Integration | Component | image file', function(hooks) {
       commonProperties.src,
       `src is ${commonProperties.src}`
     );
+
+    await componentA11yAudit(this.element, assert);
   });
 
   test('the image is wrapped in an anchor that links directly to the image', async function(assert) {
diff --git a/ui/tests/integration/job-diff-test.js b/ui/tests/integration/components/job-diff-test.js
similarity index 96%
rename from ui/tests/integration/job-diff-test.js
rename to ui/tests/integration/components/job-diff-test.js
index b111a9a4eae..fe0023db574 100644
--- a/ui/tests/integration/job-diff-test.js
+++ b/ui/tests/integration/components/job-diff-test.js
@@ -2,7 +2,8 @@ import { findAll, find, render } from '@ember/test-helpers';
 import { module, test } from 'qunit';
 import { setupRenderingTest } from 'ember-qunit';
 import hbs from 'htmlbars-inline-precompile';
-import cleanWhitespace from '../utils/clean-whitespace';
+import cleanWhitespace from '../../utils/clean-whitespace';
+import { componentA11yAudit } from 'nomad-ui/tests/helpers/a11y-audit';
 
 module('Integration | Component | job diff', function(hooks) {
   setupRenderingTest(hooks);
@@ -55,6 +56,8 @@ module('Integration | Component | job diff', function(hooks) {
       '- Removed Field: "12"',
       'Removed field is rendered correctly'
     );
+
+    await componentA11yAudit(this.element, assert);
   });
 
   test('job object diffs', async function(assert) {
@@ -156,6 +159,8 @@ module('Integration | Component | job diff', function(hooks) {
       this.get('diff').Objects[1].Objects[0].Fields.length,
       'Objects within objects are rendered'
     );
+
+    await componentA11yAudit(this.element, assert);
   });
 
   function field(name, type, newVal, oldVal) {
diff --git a/ui/tests/integration/job-editor-test.js b/ui/tests/integration/components/job-editor-test.js
similarity index 95%
rename from ui/tests/integration/job-editor-test.js
rename to ui/tests/integration/components/job-editor-test.js
index 68411dda08b..03fb4b3160b 100644
--- a/ui/tests/integration/job-editor-test.js
+++ b/ui/tests/integration/components/job-editor-test.js
@@ -8,6 +8,7 @@ import { startMirage } from 'nomad-ui/initializers/ember-cli-mirage';
 import jobEditor from 'nomad-ui/tests/pages/components/job-editor';
 import { initialize as fragmentSerializerInitializer } from 'nomad-ui/initializers/fragment-serializer';
 import setupCodeMirror from 'nomad-ui/tests/helpers/codemirror';
+import { componentA11yAudit } from 'nomad-ui/tests/helpers/a11y-audit';
 
 const Editor = create(jobEditor());
 
@@ -109,6 +110,8 @@ module('Integration | Component | job-editor', function(hooks) {
     await renderNewJob(this, job);
     assert.ok(Editor.editorHelp.isPresent, 'Editor explanation popup is present');
     assert.ok(Editor.editor.isPresent, 'Editor is present');
+
+    await componentA11yAudit(this.element, assert);
   });
 
   test('the explanation popup can be dismissed', async function(assert) {
@@ -168,6 +171,8 @@ module('Integration | Component | job-editor', function(hooks) {
     assert.ok(Editor.planOutput, 'The plan is outputted');
     assert.notOk(Editor.editor.isPresent, 'The editor is replaced with the plan output');
     assert.ok(Editor.planHelp.isPresent, 'The plan explanation popup is shown');
+
+    await componentA11yAudit(this.element, assert);
   });
 
   test('from the plan screen, the cancel button goes back to the editor with the job still in tact', async function(assert) {
@@ -199,6 +204,8 @@ module('Integration | Component | job-editor', function(hooks) {
       errorMessage,
       'The error message from the server is shown in the error in the UI'
     );
+
+    await componentA11yAudit(this.element, assert);
   });
 
   test('when plan fails, the plan error message is shown', async function(assert) {
@@ -219,6 +226,8 @@ module('Integration | Component | job-editor', function(hooks) {
       errorMessage,
       'The error message from the server is shown in the error in the UI'
     );
+
+    await componentA11yAudit(this.element, assert);
   });
 
   test('when run fails, the run error message is shown', async function(assert) {
@@ -240,6 +249,8 @@ module('Integration | Component | job-editor', function(hooks) {
       errorMessage,
       'The error message from the server is shown in the error in the UI'
     );
+
+    await componentA11yAudit(this.element, assert);
   });
 
   test('when the scheduler dry-run has warnings, the warnings are shown to the user', async function(assert) {
@@ -260,6 +271,8 @@ module('Integration | Component | job-editor', function(hooks) {
       Editor.dryRunMessage.body.includes(newJobTaskGroupName),
       'The scheduler dry-run message includes the warning from send back by the API'
     );
+
+    await componentA11yAudit(this.element, assert);
   });
 
   test('when the scheduler dry-run has no warnings, a success message is shown to the user', async function(assert) {
@@ -276,6 +289,8 @@ module('Integration | Component | job-editor', function(hooks) {
       Editor.dryRunMessage.errored,
       'The warning message is not shown in addition to the success message'
     );
+
+    await componentA11yAudit(this.element, assert);
   });
 
   test('when a job is submitted in the edit context, a POST request is made to the update job endpoint', async function(assert) {
@@ -330,6 +345,8 @@ module('Integration | Component | job-editor', function(hooks) {
 
     await renderEditJob(this, job);
     assert.ok(Editor.cancelEditingIsAvailable, 'Cancel editing button exists');
+
+    await componentA11yAudit(this.element, assert);
   });
 
   test('when the job-editor cancel button is clicked, the onCancel hook is called', async function(assert) {
diff --git a/ui/tests/integration/job-page/helpers.js b/ui/tests/integration/components/job-page/helpers.js
similarity index 100%
rename from ui/tests/integration/job-page/helpers.js
rename to ui/tests/integration/components/job-page/helpers.js
diff --git a/ui/tests/integration/job-page/parts/body-test.js b/ui/tests/integration/components/job-page/parts/body-test.js
similarity index 95%
rename from ui/tests/integration/job-page/parts/body-test.js
rename to ui/tests/integration/components/job-page/parts/body-test.js
index 8d27cdc8bce..7a5aab93157 100644
--- a/ui/tests/integration/job-page/parts/body-test.js
+++ b/ui/tests/integration/components/job-page/parts/body-test.js
@@ -3,6 +3,7 @@ import { setupRenderingTest } from 'ember-qunit';
 import { find, findAll, render } from '@ember/test-helpers';
 import hbs from 'htmlbars-inline-precompile';
 import { startMirage } from 'nomad-ui/initializers/ember-cli-mirage';
+import { componentA11yAudit } from 'nomad-ui/tests/helpers/a11y-audit';
 
 module('Integration | Component | job-page/parts/body', function(hooks) {
   setupRenderingTest(hooks);
@@ -49,6 +50,8 @@ module('Integration | Component | job-page/parts/body', function(hooks) {
     assert.ok(subnavLabels.some(label => label === 'Definition'), 'Definition link');
     assert.ok(subnavLabels.some(label => label === 'Versions'), 'Versions link');
     assert.ok(subnavLabels.some(label => label === 'Deployments'), 'Deployments link');
+
+    await componentA11yAudit(this.element, assert);
   });
 
   test('the subnav does not include the deployments link when the job is not a service', async function(assert) {
diff --git a/ui/tests/integration/job-page/parts/children-test.js b/ui/tests/integration/components/job-page/parts/children-test.js
similarity index 97%
rename from ui/tests/integration/job-page/parts/children-test.js
rename to ui/tests/integration/components/job-page/parts/children-test.js
index da51de95a01..4fbf2dcae1e 100644
--- a/ui/tests/integration/job-page/parts/children-test.js
+++ b/ui/tests/integration/components/job-page/parts/children-test.js
@@ -5,6 +5,7 @@ import sinon from 'sinon';
 import { module, test } from 'qunit';
 import { setupRenderingTest } from 'ember-qunit';
 import { startMirage } from 'nomad-ui/initializers/ember-cli-mirage';
+import { componentA11yAudit } from 'nomad-ui/tests/helpers/a11y-audit';
 
 module('Integration | Component | job-page/parts/children', function(hooks) {
   setupRenderingTest(hooks);
@@ -92,6 +93,8 @@ module('Integration | Component | job-page/parts/children', function(hooks) {
     assert.ok(
       new RegExp(`1.10.+?${childrenCount}`).test(find('.pagination-numbers').textContent.trim())
     );
+
+    await componentA11yAudit(this.element, assert);
   });
 
   test('is sorted based on the sortProperty and sortDescending properties', async function(assert) {
diff --git a/ui/tests/integration/job-page/parts/latest-deployment-test.js b/ui/tests/integration/components/job-page/parts/latest-deployment-test.js
similarity index 97%
rename from ui/tests/integration/job-page/parts/latest-deployment-test.js
rename to ui/tests/integration/components/job-page/parts/latest-deployment-test.js
index b1b3fd76f8e..d51c430cbec 100644
--- a/ui/tests/integration/job-page/parts/latest-deployment-test.js
+++ b/ui/tests/integration/components/job-page/parts/latest-deployment-test.js
@@ -5,6 +5,7 @@ import hbs from 'htmlbars-inline-precompile';
 import moment from 'moment';
 import { startMirage } from 'nomad-ui/initializers/ember-cli-mirage';
 import { initialize as fragmentSerializerInitializer } from 'nomad-ui/initializers/fragment-serializer';
+import { componentA11yAudit } from 'nomad-ui/tests/helpers/a11y-audit';
 
 module('Integration | Component | job-page/parts/latest-deployment', function(hooks) {
   setupRenderingTest(hooks);
@@ -108,6 +109,8 @@ module('Integration | Component | job-page/parts/latest-deployment', function(ho
       deployment.get('statusDescription'),
       'Status description is in the metrics block'
     );
+
+    await componentA11yAudit(this.element, assert);
   });
 
   test('when there is no running deployment, the latest deployment section shows up for the last deployment', async function(assert) {
@@ -149,6 +152,8 @@ module('Integration | Component | job-page/parts/latest-deployment', function(ho
 
     assert.ok(find('[data-test-deployment-task-groups]'), 'Task groups found');
     assert.ok(find('[data-test-deployment-allocations]'), 'Allocations found');
+
+    await componentA11yAudit(this.element, assert);
   });
 
   test('each task group in the expanded task group section shows task group details', async function(assert) {
diff --git a/ui/tests/integration/job-page/parts/placement-failures-test.js b/ui/tests/integration/components/job-page/parts/placement-failures-test.js
similarity index 95%
rename from ui/tests/integration/job-page/parts/placement-failures-test.js
rename to ui/tests/integration/components/job-page/parts/placement-failures-test.js
index 2fc5a9d7aa2..80b409dad32 100644
--- a/ui/tests/integration/job-page/parts/placement-failures-test.js
+++ b/ui/tests/integration/components/job-page/parts/placement-failures-test.js
@@ -4,6 +4,7 @@ import { module, test } from 'qunit';
 import { setupRenderingTest } from 'ember-qunit';
 import { startMirage } from 'nomad-ui/initializers/ember-cli-mirage';
 import { initialize as fragmentSerializerInitializer } from 'nomad-ui/initializers/fragment-serializer';
+import { componentA11yAudit } from 'nomad-ui/tests/helpers/a11y-audit';
 
 module('Integration | Component | job-page/parts/placement-failures', function(hooks) {
   setupRenderingTest(hooks);
@@ -58,6 +59,8 @@ module('Integration | Component | job-page/parts/placement-failures', function(h
         'The number of unplaced allocs = CoalescedFailures + 1'
       );
     });
+
+    await componentA11yAudit(this.element, assert);
   });
 
   test('when the job has no placement failures, the placement failures section is gone', async function(assert) {
diff --git a/ui/tests/integration/job-page/parts/summary-test.js b/ui/tests/integration/components/job-page/parts/summary-test.js
similarity index 96%
rename from ui/tests/integration/job-page/parts/summary-test.js
rename to ui/tests/integration/components/job-page/parts/summary-test.js
index 2e652e0882f..975a1b89201 100644
--- a/ui/tests/integration/job-page/parts/summary-test.js
+++ b/ui/tests/integration/components/job-page/parts/summary-test.js
@@ -4,6 +4,7 @@ import { module, test } from 'qunit';
 import { setupRenderingTest } from 'ember-qunit';
 import { startMirage } from 'nomad-ui/initializers/ember-cli-mirage';
 import { initialize as fragmentSerializerInitializer } from 'nomad-ui/initializers/fragment-serializer';
+import { componentA11yAudit } from 'nomad-ui/tests/helpers/a11y-audit';
 
 module('Integration | Component | job-page/parts/summary', function(hooks) {
   setupRenderingTest(hooks);
@@ -36,6 +37,8 @@ module('Integration | Component | job-page/parts/summary', function(hooks) {
 
     assert.ok(find('[data-test-children-status-bar]'), 'Children status bar found');
     assert.notOk(find('[data-test-allocation-status-bar]'), 'Allocation status bar not found');
+
+    await componentA11yAudit(this.element, assert);
   });
 
   test('jobs without children use the allocations diagram', async function(assert) {
@@ -53,6 +56,8 @@ module('Integration | Component | job-page/parts/summary', function(hooks) {
 
     assert.ok(find('[data-test-allocation-status-bar]'), 'Allocation status bar found');
     assert.notOk(find('[data-test-children-status-bar]'), 'Children status bar not found');
+
+    await componentA11yAudit(this.element, assert);
   });
 
   test('the allocations diagram lists all allocation status figures', async function(assert) {
@@ -176,6 +181,8 @@ module('Integration | Component | job-page/parts/summary', function(hooks) {
       find('.inline-chart [data-test-allocation-status-bar]'),
       'Allocation bar is rendered in an inline-chart container'
     );
+
+    await componentA11yAudit(this.element, assert);
   });
 
   test('the collapsed/expanded state is persisted to localStorage', async function(assert) {
diff --git a/ui/tests/integration/job-page/parts/task-groups-test.js b/ui/tests/integration/components/job-page/parts/task-groups-test.js
similarity index 97%
rename from ui/tests/integration/job-page/parts/task-groups-test.js
rename to ui/tests/integration/components/job-page/parts/task-groups-test.js
index 6c0b9fb9241..c662aca392c 100644
--- a/ui/tests/integration/job-page/parts/task-groups-test.js
+++ b/ui/tests/integration/components/job-page/parts/task-groups-test.js
@@ -5,6 +5,7 @@ import { module, test } from 'qunit';
 import sinon from 'sinon';
 import { startMirage } from 'nomad-ui/initializers/ember-cli-mirage';
 import { setupRenderingTest } from 'ember-qunit';
+import { componentA11yAudit } from 'nomad-ui/tests/helpers/a11y-audit';
 
 module('Integration | Component | job-page/parts/task-groups', function(hooks) {
   setupRenderingTest(hooks);
@@ -56,6 +57,8 @@ module('Integration | Component | job-page/parts/task-groups', function(hooks) {
       job.get('taskGroups.length'),
       'One row per task group'
     );
+
+    await componentA11yAudit(this.element, assert);
   });
 
   test('each row in the task group table should show basic information about the task group', async function(assert) {
diff --git a/ui/tests/integration/job-page/periodic-test.js b/ui/tests/integration/components/job-page/periodic-test.js
similarity index 97%
rename from ui/tests/integration/job-page/periodic-test.js
rename to ui/tests/integration/components/job-page/periodic-test.js
index f57889185c4..ddb81cdcd75 100644
--- a/ui/tests/integration/job-page/periodic-test.js
+++ b/ui/tests/integration/components/job-page/periodic-test.js
@@ -11,6 +11,7 @@ import {
   expectDeleteRequest,
   expectStartRequest,
 } from './helpers';
+import { componentA11yAudit } from 'nomad-ui/tests/helpers/a11y-audit';
 
 module('Integration | Component | job-page/periodic', function(hooks) {
   setupRenderingTest(hooks);
@@ -155,6 +156,8 @@ module('Integration | Component | job-page/periodic', function(hooks) {
 
     await stopJob();
     expectError(assert, 'Could Not Stop Job');
+
+    await componentA11yAudit(this.element, assert);
   });
 
   test('Starting a job sends a post request for the job using the current definition', async function(assert) {
diff --git a/ui/tests/integration/job-page/service-test.js b/ui/tests/integration/components/job-page/service-test.js
similarity index 96%
rename from ui/tests/integration/job-page/service-test.js
rename to ui/tests/integration/components/job-page/service-test.js
index 35131418da9..6efd33e7910 100644
--- a/ui/tests/integration/job-page/service-test.js
+++ b/ui/tests/integration/components/job-page/service-test.js
@@ -7,6 +7,7 @@ import { startMirage } from 'nomad-ui/initializers/ember-cli-mirage';
 import { startJob, stopJob, expectError, expectDeleteRequest, expectStartRequest } from './helpers';
 import Job from 'nomad-ui/tests/pages/jobs/detail';
 import { initialize as fragmentSerializerInitializer } from 'nomad-ui/initializers/fragment-serializer';
+import { componentA11yAudit } from 'nomad-ui/tests/helpers/a11y-audit';
 
 module('Integration | Component | job-page/service', function(hooks) {
   setupRenderingTest(hooks);
@@ -81,6 +82,8 @@ module('Integration | Component | job-page/service', function(hooks) {
 
     await stopJob();
     expectError(assert, 'Could Not Stop Job');
+
+    await componentA11yAudit(this.element, assert);
   });
 
   test('Starting a job sends a post request for the job using the current definition', async function(assert) {
@@ -126,6 +129,8 @@ module('Integration | Component | job-page/service', function(hooks) {
 
     assert.equal(allocationRow.shortId, allocation.id.split('-')[0], 'ID');
     assert.equal(allocationRow.taskGroup, allocation.taskGroup, 'Task Group name');
+
+    await componentA11yAudit(this.element, assert);
   });
 
   test('Recent allocations caps out at five', async function(assert) {
@@ -162,6 +167,8 @@ module('Integration | Component | job-page/service', function(hooks) {
       Job.recentAllocationsEmptyState.headline.includes('No Allocations'),
       'No allocations empty message'
     );
+
+    await componentA11yAudit(this.element, assert);
   });
 
   test('Active deployment can be promoted', async function(assert) {
@@ -213,6 +220,8 @@ module('Integration | Component | job-page/service', function(hooks) {
       'The error message mentions ACLs'
     );
 
+    await componentA11yAudit(this.element, assert);
+
     await click('[data-test-job-error-close]');
 
     assert.notOk(find('[data-test-job-error-title]'), 'Error message is dismissable');
diff --git a/ui/tests/integration/components/lifecycle-chart-test.js b/ui/tests/integration/components/lifecycle-chart-test.js
index 5c74a1c646f..3c47d0b96d5 100644
--- a/ui/tests/integration/components/lifecycle-chart-test.js
+++ b/ui/tests/integration/components/lifecycle-chart-test.js
@@ -2,6 +2,7 @@ import { module, test } from 'qunit';
 import { setupRenderingTest } from 'ember-qunit';
 import { render, settled } from '@ember/test-helpers';
 import hbs from 'htmlbars-inline-precompile';
+import { componentA11yAudit } from 'nomad-ui/tests/helpers/a11y-audit';
 import { create } from 'ember-cli-page-object';
 import LifecycleChart from 'nomad-ui/tests/pages/components/lifecycle-chart';
 
@@ -56,6 +57,8 @@ module('Integration | Component | lifecycle-chart', function(hooks) {
       assert.notOk(task.isActive);
       assert.notOk(task.isFinished);
     });
+
+    await componentA11yAudit(this.element, assert);
   });
 
   test('it doesn’t render when there’s only one phase', async function(assert) {
@@ -92,6 +95,7 @@ module('Integration | Component | lifecycle-chart', function(hooks) {
 
     assert.ok(Chart.phases[1].isActive);
     assert.ok(Chart.tasks[3].isActive);
+    await componentA11yAudit(this.element, assert);
 
     this.set('taskStates.firstObject.finishedAt', new Date());
     await settled();
diff --git a/ui/tests/integration/components/line-chart-test.js b/ui/tests/integration/components/line-chart-test.js
index 9c01c85a163..fb5412af9eb 100644
--- a/ui/tests/integration/components/line-chart-test.js
+++ b/ui/tests/integration/components/line-chart-test.js
@@ -4,6 +4,7 @@ import { setupRenderingTest } from 'ember-qunit';
 import hbs from 'htmlbars-inline-precompile';
 import sinon from 'sinon';
 import moment from 'moment';
+import { componentA11yAudit } from 'nomad-ui/tests/helpers/a11y-audit';
 
 const REF_DATE = new Date();
 
@@ -33,6 +34,8 @@ module('Integration | Component | line chart', function(hooks) {
         `${datum.type} event at ${datum.x}`
       );
     });
+
+    await componentA11yAudit(this.element, assert);
   });
 
   test('when a chart has annotations and is timeseries, annotations are sorted reverse-chronologically', async function(assert) {
@@ -123,5 +126,7 @@ module('Integration | Component | line chart', function(hooks) {
     assert.notOk(annotationEls[0].classList.contains('is-staggered'));
     assert.ok(annotationEls[1].classList.contains('is-staggered'));
     assert.notOk(annotationEls[2].classList.contains('is-staggered'));
+
+    await componentA11yAudit(this.element, assert);
   });
 });
diff --git a/ui/tests/integration/list-pagination-test.js b/ui/tests/integration/components/list-pagination-test.js
similarity index 97%
rename from ui/tests/integration/list-pagination-test.js
rename to ui/tests/integration/components/list-pagination-test.js
index a9cf1748f81..99e0966844c 100644
--- a/ui/tests/integration/list-pagination-test.js
+++ b/ui/tests/integration/components/list-pagination-test.js
@@ -2,6 +2,7 @@ import { findAll, find, render } from '@ember/test-helpers';
 import { module, skip, test } from 'qunit';
 import { setupRenderingTest } from 'ember-qunit';
 import hbs from 'htmlbars-inline-precompile';
+import { componentA11yAudit } from 'nomad-ui/tests/helpers/a11y-audit';
 
 module('Integration | Component | list pagination', function(hooks) {
   setupRenderingTest(hooks);
@@ -38,6 +39,7 @@ module('Integration | Component | list pagination', function(hooks) {
 
     assert.ok(!findAll('.first').length, 'On the first page, there is no first link');
     assert.ok(!findAll('.prev').length, 'On the first page, there is no prev link');
+    await componentA11yAudit(this.element, assert);
 
     assert.equal(
       findAll('.link').length,
@@ -51,6 +53,7 @@ module('Integration | Component | list pagination', function(hooks) {
 
     assert.ok(findAll('.next').length, 'While not on the last page, there is a next link');
     assert.ok(findAll('.last').length, 'While not on the last page, there is a last link');
+    await componentA11yAudit(this.element, assert);
 
     assert.ok(
       findAll('.item').length,
diff --git a/ui/tests/integration/list-table-test.js b/ui/tests/integration/components/list-table-test.js
similarity index 95%
rename from ui/tests/integration/list-table-test.js
rename to ui/tests/integration/components/list-table-test.js
index bce7ee840b9..96b4f1c26f6 100644
--- a/ui/tests/integration/list-table-test.js
+++ b/ui/tests/integration/components/list-table-test.js
@@ -3,6 +3,7 @@ import { module, skip, test } from 'qunit';
 import { setupRenderingTest } from 'ember-qunit';
 import faker from 'nomad-ui/mirage/faker';
 import hbs from 'htmlbars-inline-precompile';
+import { componentA11yAudit } from 'nomad-ui/tests/helpers/a11y-audit';
 
 module('Integration | Component | list table', function(hooks) {
   setupRenderingTest(hooks);
@@ -64,6 +65,8 @@ module('Integration | Component | list table', function(hooks) {
       assert.equal($item.querySelectorAll('td')[1].innerHTML.trim(), item.lastName, 'Last name');
       assert.equal($item.querySelectorAll('td')[2].innerHTML.trim(), item.age, 'Age');
     });
+
+    await componentA11yAudit(this.element, assert);
   });
 
   // Ember doesn't support query params (or controllers or routes) in integration tests,
diff --git a/ui/tests/integration/multi-select-dropdown-test.js b/ui/tests/integration/components/multi-select-dropdown-test.js
similarity index 97%
rename from ui/tests/integration/multi-select-dropdown-test.js
rename to ui/tests/integration/components/multi-select-dropdown-test.js
index f6f30b27df3..82e2dbac274 100644
--- a/ui/tests/integration/multi-select-dropdown-test.js
+++ b/ui/tests/integration/components/multi-select-dropdown-test.js
@@ -3,6 +3,7 @@ import { module, test } from 'qunit';
 import { setupRenderingTest } from 'ember-qunit';
 import sinon from 'sinon';
 import hbs from 'htmlbars-inline-precompile';
+import { componentA11yAudit } from 'nomad-ui/tests/helpers/a11y-audit';
 
 const TAB = 9;
 const ESC = 27;
@@ -47,6 +48,8 @@ module('Integration | Component | multi-select dropdown', function(hooks) {
       'Trigger is appropriately labeled'
     );
     assert.notOk(find('[data-test-dropdown-options]'), 'Options are not rendered');
+
+    await componentA11yAudit(this.element, assert);
   });
 
   test('component opens the options dropdown when clicked', async function(assert) {
@@ -57,6 +60,8 @@ module('Integration | Component | multi-select dropdown', function(hooks) {
     await click('[data-test-dropdown-trigger]');
 
     await assert.ok(find('[data-test-dropdown-options]'), 'Options are shown now');
+    await componentA11yAudit(this.element, assert);
+
     await click('[data-test-dropdown-trigger]');
 
     assert.notOk(find('[data-test-dropdown-options]'), 'Options are hidden after clicking again');
@@ -114,6 +119,8 @@ module('Integration | Component | multi-select dropdown', function(hooks) {
       'The count is accurate'
     );
 
+    await componentA11yAudit(this.element, assert);
+
     await this.set('selection', []);
 
     assert.notOk(
@@ -301,5 +308,6 @@ module('Integration | Component | multi-select dropdown', function(hooks) {
     assert.ok(find('[data-test-dropdown-options]'), 'The dropdown is still shown');
     assert.ok(find('[data-test-dropdown-empty]'), 'The empty state is shown');
     assert.notOk(find('[data-test-dropdown-option]'), 'No options are shown');
+    await componentA11yAudit(this.element, assert);
   });
 });
diff --git a/ui/tests/integration/page-layout-test.js b/ui/tests/integration/components/page-layout-test.js
similarity index 93%
rename from ui/tests/integration/page-layout-test.js
rename to ui/tests/integration/components/page-layout-test.js
index 9fc13071c08..f2437dae7e2 100644
--- a/ui/tests/integration/page-layout-test.js
+++ b/ui/tests/integration/components/page-layout-test.js
@@ -3,6 +3,7 @@ import { setupRenderingTest } from 'ember-qunit';
 import { find, click, render } from '@ember/test-helpers';
 import hbs from 'htmlbars-inline-precompile';
 import { startMirage } from 'nomad-ui/initializers/ember-cli-mirage';
+import { componentA11yAudit } from 'nomad-ui/tests/helpers/a11y-audit';
 
 module('Integration | Component | page layout', function(hooks) {
   setupRenderingTest(hooks);
@@ -25,6 +26,7 @@ module('Integration | Component | page layout', function(hooks) {
     await click('[data-test-header-gutter-toggle]');
 
     assert.ok(find('[data-test-gutter-menu]').classList.contains('is-open'), 'Gutter menu is open');
+    await componentA11yAudit(this.element, assert);
   });
 
   test('the gutter-menu hamburger menu closes the gutter menu', async function(assert) {
diff --git a/ui/tests/integration/placement-failure-test.js b/ui/tests/integration/components/placement-failure-test.js
similarity index 94%
rename from ui/tests/integration/placement-failure-test.js
rename to ui/tests/integration/components/placement-failure-test.js
index 66873282401..78653426a92 100644
--- a/ui/tests/integration/placement-failure-test.js
+++ b/ui/tests/integration/components/placement-failure-test.js
@@ -3,7 +3,8 @@ import { module, test } from 'qunit';
 import { setupRenderingTest } from 'ember-qunit';
 import { assign } from '@ember/polyfills';
 import hbs from 'htmlbars-inline-precompile';
-import cleanWhitespace from '../utils/clean-whitespace';
+import cleanWhitespace from '../../utils/clean-whitespace';
+import { componentA11yAudit } from 'nomad-ui/tests/helpers/a11y-audit';
 
 module('Integration | Component | placement failures', function(hooks) {
   setupRenderingTest(hooks);
@@ -78,6 +79,8 @@ module('Integration | Component | placement failures', function(hooks) {
       'Quota exhausted message shown'
     );
     assert.equal(findAll('[data-test-placement-failure-scores]').length, 1, 'Scores message shown');
+
+    await componentA11yAudit(this.element, assert);
   });
 
   test('should render correctly when a node is not evaluated', async function(assert) {
@@ -101,6 +104,8 @@ module('Integration | Component | placement failures', function(hooks) {
       0,
       'Nodes exhausted message NOT shown when there are no nodes exhausted'
     );
+
+    await componentA11yAudit(this.element, assert);
   });
 
   function createFixture(obj = {}, name = 'Placement Failure') {
diff --git a/ui/tests/integration/plugin-allocation-row-test.js b/ui/tests/integration/components/plugin-allocation-row-test.js
similarity index 96%
rename from ui/tests/integration/plugin-allocation-row-test.js
rename to ui/tests/integration/components/plugin-allocation-row-test.js
index 595488099dc..243679a6bf5 100644
--- a/ui/tests/integration/plugin-allocation-row-test.js
+++ b/ui/tests/integration/components/plugin-allocation-row-test.js
@@ -4,6 +4,7 @@ import hbs from 'htmlbars-inline-precompile';
 import { startMirage } from 'nomad-ui/initializers/ember-cli-mirage';
 import { render, settled } from '@ember/test-helpers';
 import { initialize as fragmentSerializerInitializer } from 'nomad-ui/initializers/fragment-serializer';
+import { componentA11yAudit } from 'nomad-ui/tests/helpers/a11y-audit';
 
 module('Integration | Component | plugin allocation row', function(hooks) {
   setupRenderingTest(hooks);
@@ -39,6 +40,7 @@ module('Integration | Component | plugin allocation row', function(hooks) {
       req.url.startsWith('/v1/allocation')
     );
     assert.equal(allocationRequest.url, `/v1/allocation/${storageController.allocID}`);
+    await componentA11yAudit(this.element, assert);
   });
 
   test('After the plugin allocation row fetches the plugin allocation, allocation stats are fetched', async function(assert) {
diff --git a/ui/tests/integration/popover-menu-test.js b/ui/tests/integration/components/popover-menu-test.js
similarity index 95%
rename from ui/tests/integration/popover-menu-test.js
rename to ui/tests/integration/components/popover-menu-test.js
index 3d0348f6011..4f0184b3775 100644
--- a/ui/tests/integration/popover-menu-test.js
+++ b/ui/tests/integration/components/popover-menu-test.js
@@ -2,6 +2,7 @@ import { click } from '@ember/test-helpers';
 import { module, test } from 'qunit';
 import { setupRenderingTest } from 'ember-qunit';
 import hbs from 'htmlbars-inline-precompile';
+import { componentA11yAudit } from 'nomad-ui/tests/helpers/a11y-audit';
 import { create } from 'ember-cli-page-object';
 import popoverMenuPageObject from 'nomad-ui/tests/pages/components/popover-menu';
 
@@ -39,6 +40,7 @@ module('Integration | Component | popover-menu', function(hooks) {
     assert.ok(PopoverMenu.labelHasIcon);
     assert.notOk(PopoverMenu.menu.isOpen);
     assert.equal(PopoverMenu.label, props.label);
+    await componentA11yAudit(this.element, assert);
   });
 
   test('clicking the trigger button toggles the popover menu', async function(assert) {
@@ -50,6 +52,7 @@ module('Integration | Component | popover-menu', function(hooks) {
     await PopoverMenu.toggle();
 
     assert.ok(PopoverMenu.menu.isOpen);
+    await componentA11yAudit(this.element, assert);
   });
 
   test('the trigger gets the triggerClass prop assigned as a class', async function(assert) {
diff --git a/ui/tests/integration/primary-metric-test.js b/ui/tests/integration/components/primary-metric-test.js
similarity index 97%
rename from ui/tests/integration/primary-metric-test.js
rename to ui/tests/integration/components/primary-metric-test.js
index 2e96436bf33..4cae8532110 100644
--- a/ui/tests/integration/primary-metric-test.js
+++ b/ui/tests/integration/components/primary-metric-test.js
@@ -4,6 +4,7 @@ import { module, test } from 'qunit';
 import { setupRenderingTest } from 'ember-qunit';
 import hbs from 'htmlbars-inline-precompile';
 import { find, render } from '@ember/test-helpers';
+import { componentA11yAudit } from 'nomad-ui/tests/helpers/a11y-audit';
 import { task } from 'ember-concurrency';
 import sinon from 'sinon';
 import { startMirage } from 'nomad-ui/initializers/ember-cli-mirage';
@@ -75,6 +76,7 @@ module('Integration | Component | primary metric', function(hooks) {
     assert.ok(find('[data-test-percentage-bar]'), 'Percentage bar');
     assert.ok(find('[data-test-percentage]'), 'Percentage figure');
     assert.ok(find('[data-test-absolute-value]'), 'Absolute usage figure');
+    await componentA11yAudit(this.element, assert);
   });
 
   test('The CPU metric maps to is-info', async function(assert) {
diff --git a/ui/tests/integration/reschedule-event-timeline-test.js b/ui/tests/integration/components/reschedule-event-timeline-test.js
similarity index 95%
rename from ui/tests/integration/reschedule-event-timeline-test.js
rename to ui/tests/integration/components/reschedule-event-timeline-test.js
index 82f24a0a04a..80ca60bf388 100644
--- a/ui/tests/integration/reschedule-event-timeline-test.js
+++ b/ui/tests/integration/components/reschedule-event-timeline-test.js
@@ -3,6 +3,7 @@ import { setupRenderingTest } from 'ember-qunit';
 import { find, findAll, render } from '@ember/test-helpers';
 import { startMirage } from 'nomad-ui/initializers/ember-cli-mirage';
 import hbs from 'htmlbars-inline-precompile';
+import { componentA11yAudit } from 'nomad-ui/tests/helpers/a11y-audit';
 import moment from 'moment';
 
 module('Integration | Component | reschedule event timeline', function(hooks) {
@@ -69,6 +70,8 @@ module('Integration | Component | reschedule event timeline', function(hooks) {
       allocation.get('clientStatus'),
       'Allocation shows the status'
     );
+
+    await componentA11yAudit(this.element, assert);
   });
 
   test('when the allocation has failed and there is a follow up evaluation, a note with a time is shown', async function(assert) {
@@ -93,6 +96,8 @@ module('Integration | Component | reschedule event timeline', function(hooks) {
       'Stop warning is shown since the last allocation failed'
     );
     assert.notOk(find('[data-test-attempt-notice]'), 'Reschdule attempt notice is not shown');
+
+    await componentA11yAudit(this.element, assert);
   });
 
   test('when the allocation has failed and there is no follow up evaluation, a warning is shown', async function(assert) {
@@ -126,6 +131,8 @@ module('Integration | Component | reschedule event timeline', function(hooks) {
       'Reschedule notice is shown since the follow up eval says so'
     );
     assert.notOk(find('[data-test-stop-warning]'), 'Stop warning is not shown');
+
+    await componentA11yAudit(this.element, assert);
   });
 
   test('when the allocation has a next allocation already, it is shown in the timeline', async function(assert) {
diff --git a/ui/tests/integration/components/scale-events-accordion-test.js b/ui/tests/integration/components/scale-events-accordion-test.js
index 32ede584d2d..73f45b9b9e4 100644
--- a/ui/tests/integration/components/scale-events-accordion-test.js
+++ b/ui/tests/integration/components/scale-events-accordion-test.js
@@ -5,6 +5,7 @@ import hbs from 'htmlbars-inline-precompile';
 import { startMirage } from 'nomad-ui/initializers/ember-cli-mirage';
 import setupCodeMirror from 'nomad-ui/tests/helpers/codemirror';
 import { initialize as fragmentSerializerInitializer } from 'nomad-ui/initializers/fragment-serializer';
+import { componentA11yAudit } from 'nomad-ui/tests/helpers/a11y-audit';
 
 module('Integration | Component | scale-events-accordion', function(hooks) {
   setupRenderingTest(hooks);
@@ -40,6 +41,7 @@ module('Integration | Component | scale-events-accordion', function(hooks) {
     await render(commonTemplate);
 
     assert.equal(findAll('[data-test-scale-events] [data-test-accordion-head]').length, eventCount);
+    await componentA11yAudit(this.element, assert);
   });
 
   test('when an event is an error, an error icon is shown', async function(assert) {
@@ -51,6 +53,7 @@ module('Integration | Component | scale-events-accordion', function(hooks) {
     await render(commonTemplate);
 
     assert.ok(find('[data-test-error]'));
+    await componentA11yAudit(this.element, assert);
   });
 
   test('when an event has a count higher than previous count, a danger up arrow is shown', async function(assert) {
@@ -69,6 +72,7 @@ module('Integration | Component | scale-events-accordion', function(hooks) {
         .querySelector('.icon')
         .classList.contains('is-danger')
     );
+    await componentA11yAudit(this.element, assert);
   });
 
   test('when an event has a count lower than previous count, a primary down arrow is shown', async function(assert) {
@@ -110,6 +114,7 @@ module('Integration | Component | scale-events-accordion', function(hooks) {
     await render(commonTemplate);
 
     assert.ok(find('[data-test-accordion-toggle]').classList.contains('is-invisible'));
+    await componentA11yAudit(this.element, assert);
   });
 
   test('when an event has meta properties, the accordion entry is expanding, presenting the meta properties in a json viewer', async function(assert) {
@@ -134,5 +139,6 @@ module('Integration | Component | scale-events-accordion', function(hooks) {
       getCodeMirrorInstance('[data-test-json-viewer]').getValue(),
       JSON.stringify(meta, null, 2)
     );
+    await componentA11yAudit(this.element, assert);
   });
 });
diff --git a/ui/tests/integration/scale-events-chart-test.js b/ui/tests/integration/components/scale-events-chart-test.js
similarity index 94%
rename from ui/tests/integration/scale-events-chart-test.js
rename to ui/tests/integration/components/scale-events-chart-test.js
index 9628dbc4695..87994e806a2 100644
--- a/ui/tests/integration/scale-events-chart-test.js
+++ b/ui/tests/integration/components/scale-events-chart-test.js
@@ -4,6 +4,7 @@ import { click, find, findAll, render } from '@ember/test-helpers';
 import hbs from 'htmlbars-inline-precompile';
 import moment from 'moment';
 import setupCodeMirror from 'nomad-ui/tests/helpers/codemirror';
+import { componentA11yAudit } from 'nomad-ui/tests/helpers/a11y-audit';
 
 module('Integration | Component | scale-events-chart', function(hooks) {
   setupRenderingTest(hooks);
@@ -58,6 +59,7 @@ module('Integration | Component | scale-events-chart', function(hooks) {
       findAll('[data-test-annotation]').length,
       events.filter(ev => ev.count == null).length
     );
+    await componentA11yAudit(this.element, assert);
   });
 
   test('clicking an annotation presents details for the event', async function(assert) {
@@ -82,6 +84,8 @@ module('Integration | Component | scale-events-chart', function(hooks) {
       getCodeMirrorInstance('[data-test-json-viewer]').getValue(),
       JSON.stringify(annotation.meta, null, 2)
     );
+
+    await componentA11yAudit(this.element, assert);
   });
 
   test('clicking an active annotation closes event details', async function(assert) {
diff --git a/ui/tests/integration/stepper-input-test.js b/ui/tests/integration/components/stepper-input-test.js
similarity index 98%
rename from ui/tests/integration/stepper-input-test.js
rename to ui/tests/integration/components/stepper-input-test.js
index e2a0a20abcb..9e22ad9b340 100644
--- a/ui/tests/integration/stepper-input-test.js
+++ b/ui/tests/integration/components/stepper-input-test.js
@@ -2,6 +2,7 @@ import { find, render, settled, triggerEvent, waitUntil } from '@ember/test-help
 import { module, test } from 'qunit';
 import { setupRenderingTest } from 'ember-qunit';
 import hbs from 'htmlbars-inline-precompile';
+import { componentA11yAudit } from 'nomad-ui/tests/helpers/a11y-audit';
 import sinon from 'sinon';
 import { create } from 'ember-cli-page-object';
 import stepperInput from 'nomad-ui/tests/pages/components/stepper-input';
@@ -49,6 +50,8 @@ module('Integration | Component | stepper input', function(hooks) {
     assert.ok(StepperInput.increment.isPresent);
     assert.ok(StepperInput.decrement.classNames.split(' ').includes(this.classVariant));
     assert.ok(StepperInput.increment.classNames.split(' ').includes(this.classVariant));
+
+    await componentA11yAudit(this.element, assert);
   });
 
   test('clicking the increment and decrement buttons immediately changes the shown value in the input but debounces the onUpdate call', async function(assert) {
diff --git a/ui/tests/integration/streaming-file-test.js b/ui/tests/integration/components/streaming-file-test.js
similarity index 96%
rename from ui/tests/integration/streaming-file-test.js
rename to ui/tests/integration/components/streaming-file-test.js
index f3ffd8ee749..94bb56ec385 100644
--- a/ui/tests/integration/streaming-file-test.js
+++ b/ui/tests/integration/components/streaming-file-test.js
@@ -3,8 +3,9 @@ import { find, settled, triggerKeyEvent } from '@ember/test-helpers';
 import { module, test } from 'qunit';
 import { setupRenderingTest } from 'ember-qunit';
 import hbs from 'htmlbars-inline-precompile';
+import { componentA11yAudit } from 'nomad-ui/tests/helpers/a11y-audit';
 import Pretender from 'pretender';
-import { logEncode } from '../../mirage/data/logs';
+import { logEncode } from '../../../mirage/data/logs';
 import fetch from 'nomad-ui/utils/fetch';
 import Log from 'nomad-ui/utils/classes/log';
 
@@ -64,6 +65,7 @@ module('Integration | Component | streaming file', function(hooks) {
       'Query params are correct'
     );
     assert.equal(find('[data-test-output]').textContent, 'Hello World');
+    await componentA11yAudit(this.element, assert);
   });
 
   test('when mode is `tail`, the logger signals tail', async function(assert) {
diff --git a/ui/tests/integration/task-group-row-test.js b/ui/tests/integration/components/task-group-row-test.js
similarity index 95%
rename from ui/tests/integration/task-group-row-test.js
rename to ui/tests/integration/components/task-group-row-test.js
index c6c4fa584f3..1f7ac954d64 100644
--- a/ui/tests/integration/task-group-row-test.js
+++ b/ui/tests/integration/components/task-group-row-test.js
@@ -4,6 +4,7 @@ import { click, find, render, settled, waitUntil } from '@ember/test-helpers';
 import hbs from 'htmlbars-inline-precompile';
 import { startMirage } from 'nomad-ui/initializers/ember-cli-mirage';
 import { initialize as fragmentSerializerInitializer } from 'nomad-ui/initializers/fragment-serializer';
+import { componentA11yAudit } from 'nomad-ui/tests/helpers/a11y-audit';
 
 const jobName = 'test-job';
 const jobId = JSON.stringify([jobName, 'default']);
@@ -83,6 +84,8 @@ module('Integration | Component | task group row', function(hooks) {
 
     await settled();
     assert.ok(find('[data-test-scale]'));
+
+    await componentA11yAudit(this.element, assert);
   });
 
   test('Clicking scaling buttons immediately updates the rendered count but debounces the scaling API request', async function(assert) {
@@ -130,6 +133,8 @@ module('Integration | Component | task group row', function(hooks) {
 
     await render(commonTemplate);
     assert.ok(find('[data-test-scale="increment"]:disabled'));
+
+    await componentA11yAudit(this.element, assert);
   });
 
   test('When the current count is equal to the min count, the decrement count button is disabled', async function(assert) {
@@ -144,6 +149,8 @@ module('Integration | Component | task group row', function(hooks) {
 
     await render(commonTemplate);
     assert.ok(find('[data-test-scale="decrement"]:disabled'));
+
+    await componentA11yAudit(this.element, assert);
   });
 
   test('When there is an active deployment, both scale buttons are disabled', async function(assert) {
@@ -157,6 +164,8 @@ module('Integration | Component | task group row', function(hooks) {
     await render(commonTemplate);
     assert.ok(find('[data-test-scale="increment"]:disabled'));
     assert.ok(find('[data-test-scale="decrement"]:disabled'));
+
+    await componentA11yAudit(this.element, assert);
   });
 
   test('When the current ACL token does not have the namespace:scale-job or namespace:submit-job policy rule', async function(assert) {
diff --git a/ui/tests/integration/task-log-test.js b/ui/tests/integration/components/task-log-test.js
similarity index 97%
rename from ui/tests/integration/task-log-test.js
rename to ui/tests/integration/components/task-log-test.js
index e62b4119497..ef3943e0a0a 100644
--- a/ui/tests/integration/task-log-test.js
+++ b/ui/tests/integration/components/task-log-test.js
@@ -3,8 +3,9 @@ import { module, test } from 'qunit';
 import { setupRenderingTest } from 'ember-qunit';
 import { find, click, render, settled } from '@ember/test-helpers';
 import hbs from 'htmlbars-inline-precompile';
+import { componentA11yAudit } from 'nomad-ui/tests/helpers/a11y-audit';
 import Pretender from 'pretender';
-import { logEncode } from '../../mirage/data/logs';
+import { logEncode } from '../../../mirage/data/logs';
 
 const HOST = '1.1.1.1:1111';
 const allowedConnectionTime = 100;
@@ -85,6 +86,8 @@ module('Integration | Component | task log', function(hooks) {
       find('pre.cli-window'),
       'Cli is preformatted and using the cli-window component class'
     );
+
+    await componentA11yAudit(this.element, assert);
   });
 
   test('Streaming starts on creation', async function(assert) {
@@ -105,6 +108,8 @@ module('Integration | Component | task log', function(hooks) {
       streamFrames[0],
       'First chunk of streaming log is shown'
     );
+
+    await componentA11yAudit(this.element, assert);
   });
 
   test('Clicking Head loads the log head', async function(assert) {
@@ -285,6 +290,8 @@ module('Integration | Component | task log', function(hooks) {
 
     await click('[data-test-connection-error-dismiss]');
     assert.notOk(find('[data-test-connection-error]'), 'The error message is dismissable');
+
+    await componentA11yAudit(this.element, assert);
   });
 
   test('When the client is inaccessible, the server is accessible, and stderr is pressed before the client timeout occurs, the no connection error is not shown', async function(assert) {
diff --git a/ui/tests/integration/toggle-test.js b/ui/tests/integration/components/toggle-test.js
similarity index 91%
rename from ui/tests/integration/toggle-test.js
rename to ui/tests/integration/components/toggle-test.js
index 8cc730f147d..862b69e5e1f 100644
--- a/ui/tests/integration/toggle-test.js
+++ b/ui/tests/integration/components/toggle-test.js
@@ -2,6 +2,7 @@ import { find, settled } from '@ember/test-helpers';
 import { module, test } from 'qunit';
 import { setupRenderingTest } from 'ember-qunit';
 import hbs from 'htmlbars-inline-precompile';
+import { componentA11yAudit } from 'nomad-ui/tests/helpers/a11y-audit';
 import sinon from 'sinon';
 import { create } from 'ember-cli-page-object';
 import togglePageObject from 'nomad-ui/tests/pages/components/toggle';
@@ -46,6 +47,8 @@ module('Integration | Component | toggle', function(hooks) {
       'checkbox',
       'The input type is checkbox'
     );
+
+    await componentA11yAudit(this.element, assert);
   });
 
   test('the isActive property dictates the active state and class', async function(assert) {
@@ -61,6 +64,8 @@ module('Integration | Component | toggle', function(hooks) {
 
     assert.ok(Toggle.isActive);
     assert.ok(Toggle.hasActiveClass);
+
+    await componentA11yAudit(this.element, assert);
   });
 
   test('the isDisabled property dictates the disabled state and class', async function(assert) {
@@ -76,6 +81,8 @@ module('Integration | Component | toggle', function(hooks) {
 
     assert.ok(Toggle.isDisabled);
     assert.ok(Toggle.hasDisabledClass);
+
+    await componentA11yAudit(this.element, assert);
   });
 
   test('toggling the input calls the onToggle action', async function(assert) {
diff --git a/ui/tests/integration/two-step-button-test.js b/ui/tests/integration/components/two-step-button-test.js
similarity index 95%
rename from ui/tests/integration/two-step-button-test.js
rename to ui/tests/integration/components/two-step-button-test.js
index 22faa1f2b6c..4dd9be00fa9 100644
--- a/ui/tests/integration/two-step-button-test.js
+++ b/ui/tests/integration/components/two-step-button-test.js
@@ -2,6 +2,7 @@ import { find, click, render } from '@ember/test-helpers';
 import { module, test } from 'qunit';
 import { setupRenderingTest } from 'ember-qunit';
 import hbs from 'htmlbars-inline-precompile';
+import { componentA11yAudit } from 'nomad-ui/tests/helpers/a11y-audit';
 import sinon from 'sinon';
 import { create } from 'ember-cli-page-object';
 import twoStepButton from 'nomad-ui/tests/pages/components/two-step-button';
@@ -45,6 +46,8 @@ module('Integration | Component | two step button', function(hooks) {
     assert.notOk(find('[data-test-cancel-button]'), 'No cancel button yet');
     assert.notOk(find('[data-test-confirm-button]'), 'No confirm button yet');
     assert.notOk(find('[data-test-confirmation-message]'), 'No confirmation message yet');
+
+    await componentA11yAudit(this.element, assert);
   });
 
   test('clicking the idle state button transitions into the promptForConfirmation state', async function(assert) {
@@ -67,6 +70,7 @@ module('Integration | Component | two step button', function(hooks) {
     );
 
     assert.notOk(find('[data-test-idle-button]'), 'No more idle button');
+    await componentA11yAudit(this.element, assert);
   });
 
   test('canceling in the promptForConfirmation state calls the onCancel hook and resets to the idle state', async function(assert) {
@@ -106,6 +110,8 @@ module('Integration | Component | two step button', function(hooks) {
     assert.ok(TwoStepButton.cancelIsDisabled, 'The cancel button is disabled');
     assert.ok(TwoStepButton.confirmIsDisabled, 'The confirm button is disabled');
     assert.ok(TwoStepButton.isRunning, 'The confirm button is in a loading state');
+
+    await componentA11yAudit(this.element, assert);
   });
 
   test('when in the prompt state, clicking outside will reset state back to idle', async function(assert) {
@@ -161,5 +167,7 @@ module('Integration | Component | two step button', function(hooks) {
 
     await TwoStepButton.idle();
     assert.ok(find('[data-test-idle-button]'), 'Still in the idle state after clicking');
+
+    await componentA11yAudit(this.element, assert);
   });
 });