Merge pull request #1499 from hashicorp/ui-a11y-updates

UI: Fix most a11y violations, modernize a11y testing setup

ui/app/components/actions/invite.hbs

@@ -10,6 +10,7 @@
  <input type="text" id="invite-token" value="{{this.hostname}}/auth/invite?token={{this.token}}" {{did-insert this.selectContents}} {{did-update this.selectContents this.token}} />
  <CopyButton
  class="button button--secondary button--compact"
+ title="Copy"
  @clipboardTarget="#invite-token"
  @success={{this.onSuccess}}
  >

ui/app/components/app-card/deployment.hbs

@@ -31,7 +31,11 @@
  </small>
  </LinkTo>
  {{#if @model.preload.deployUrl}}
- <ExternalLink href="https://{{@model.preload.deployUrl}}" class="button button--secondary">
+ <ExternalLink
+ href="https://{{@model.preload.deployUrl}}"
+ title="https://{{@model.preload.deployUrl}}"
+ class="button button--secondary"
+ >
  {{inline-svg "exit" class="icon"}}
  </ExternalLink>
  {{/if}}
@@ -55,7 +59,11 @@
  </small>
  </LinkTo>
  {{#if @model.preload.deployUrl}}
- <ExternalLink href="https://{{@model.preload.deployUrl}}" class="button button--secondary button--compact">
+ <ExternalLink
+ href="https://{{@model.preload.deployUrl}}"
+ title="https://{{@model.preload.deployUrl}}"
+ class="button button--secondary button--compact"
+ >
  {{inline-svg "exit" class="icon"}}
  </ExternalLink>
  {{/if}}

ui/app/components/app-card/release.hbs

@@ -31,7 +31,7 @@
  </small>
  </LinkTo>
  {{#if @model.url}}
- <ExternalLink href={{@model.url}} class="button button--primary">
+ <ExternalLink href={{@model.url}} title={{@model.url}} class="button button--primary">
  {{inline-svg "exit" class="icon"}}
  </ExternalLink>
  {{/if}}

ui/app/components/context-create/index.hbs

@@ -1,5 +1,5 @@
 <CopyableCode @ref="context-create">
- <pre><code id="context-create">waypoint context create \
+ <pre tabindex="0"><code id="context-create">waypoint context create \
  -server-addr={{this.hostname}} \
  -server-auth-token=<span data-test-token=true>{{this.token}}</span> \
  -server-require-auth=true \

ui/app/components/copyable-code/index.hbs

@@ -5,6 +5,7 @@
  @success={{this.onSuccess}}
  @error={{this.onError}}
  class={{if this.copySuccess 'copy-success'}}
+ title="Copy"
  >
  {{inline-svg (if this.copySuccess 'copy-success' 'copy-action') class="icon"}}
  </CopyButton>

ui/app/styles/app.scss

@@ -35,13 +35,13 @@ $button-shadow: 0 3px 2px rgba(var(--shadow), 0.2);
  --shadow: #{dehex(color.$ui-cool-gray-900)};
  --focus-ring: #{dehex(color.$blue-500)};
  --success: #{dehex(color.$green-050)};
- --success-text: #{dehex(color.$green-600)};
+ --success-text: #{dehex(color.$green-700)};
  --success-border: #{dehex(color.$green-100)};
  --error: #{dehex(color.$red-050)};
  --error-text: #{dehex(color.$red-600)};
  --error-border: #{dehex(color.$red-100)};
  --warning: #{dehex(color.$yellow-050)};
- --warning-text: #{dehex(color.$yellow-600)};
+ --warning-text: #{dehex(color.$yellow-800)};
  --warning-border: #{dehex(color.$yellow-100)};
  --info: #{dehex(color.$blue-050)};
  --info-text: #{dehex(color.$blue-500)};

ui/app/templates/application.hbs

@@ -1,9 +1,9 @@
 <SvgPatterns />
 <Header />
 
-<section id="page">
+<main id="page">
  {{outlet}}
-</section>
+</main>
 
 <AppFooter/>
 <Notifications/>

ui/app/templates/onboarding/install/linux/ubuntu.hbs

@@ -7,7 +7,7 @@
 <p>Add the official HashiCorp Linux repository.</p>
 
 <CopyableCode @ref="ubuntu-apt-add-repository">
- <pre><code id="ubuntu-apt-add-repository">sudo apt-add-repository "deb [arch=amd64] https://apt.releases.hashicorp.com $(lsb_release -cs) main"</code></pre>
+ <pre tabindex="0"><code id="ubuntu-apt-add-repository">sudo apt-add-repository "deb [arch=amd64] https://apt.releases.hashicorp.com $(lsb_release -cs) main"</code></pre>
 </CopyableCode>
 
 <p>Update and install.</p>

ui/package.json

@@ -44,7 +44,7 @@
  "babel-eslint": "^10.1.0",
  "broccoli-asset-rev": "^3.0.0",
  "date-fns": "^2.15.0",
- "ember-a11y-testing": "^3.0.2",
+ "ember-a11y-testing": "^4.0.7",
  "ember-auto-import": "^1.10.1",
  "ember-auto-import-typescript": "^0.4.0",
  "ember-classic-decorator": "^1.0.8",

ui/tests/acceptance/builds-list-test.ts

@@ -3,7 +3,6 @@ import { currentURL } from '@ember/test-helpers';
 import { setupApplicationTest } from 'ember-qunit';
 import { setupMirage } from 'ember-cli-mirage/test-support';
 import { visitable, create, collection } from 'ember-cli-page-object';
-import a11yAudit from 'ember-a11y-testing/test-support/audit';
 import login from '../helpers/login';
 
 const buildsUrl = '/default/microchip/app/wp-bandwidth/builds';
@@ -21,7 +20,6 @@ module('Acceptance | builds list', function (hooks) {
 
  test('visiting builds page', async function (assert) {
  await page.visit();
- await a11yAudit();
 
  // Currently no way to seed past the default in mirage/services/builds.ts
  assert.equal(page.buildList.length, 4);

ui/tests/acceptance/deployments-list-test.ts

@@ -3,7 +3,6 @@ import { currentURL } from '@ember/test-helpers';
 import { setupApplicationTest } from 'ember-qunit';
 import { setupMirage } from 'ember-cli-mirage/test-support';
 import { visitable, create, collection } from 'ember-cli-page-object';
-import a11yAudit from 'ember-a11y-testing/test-support/audit';
 import login from 'waypoint/tests/helpers/login';
 
 const url = '/default/microchip/app/wp-bandwidth/deployments';
@@ -20,7 +19,6 @@ module('Acceptance | deployments list', function (hooks) {
 
  test('visiting deployments page', async function (assert) {
  await page.visit();
- await a11yAudit();
 
  assert.equal(page.list.length, 3);
  assert.equal(currentURL(), url);

ui/tests/acceptance/releases-list-test.ts

@@ -3,7 +3,6 @@ import { currentURL } from '@ember/test-helpers';
 import { setupApplicationTest } from 'ember-qunit';
 import { setupMirage } from 'ember-cli-mirage/test-support';
 import { visitable, create, collection } from 'ember-cli-page-object';
-import a11yAudit from 'ember-a11y-testing/test-support/audit';
 import login from 'waypoint/tests/helpers/login';
 
 const url = '/default/microchip/app/wp-bandwidth/releases';
@@ -20,7 +19,6 @@ module('Acceptance | releases list', function (hooks) {
 
  test('visiting releases page', async function (assert) {
  await page.visit();
- await a11yAudit();
 
  assert.equal(page.list.length, 3);
  assert.equal(currentURL(), url);

ui/tests/helpers/a11y.ts

@@ -0,0 +1,21 @@
+import { ContextObject, RunOptions } from 'axe-core';
+import { setupGlobalA11yHooks, setEnableA11yAudit, setRunOptions } from 'ember-a11y-testing/test-support';
+
+// ember-a11y-testing allows us to pass `include` and `exclude` context
+// parameters as run options. This isn’t documented, and isn’t represented in
+// the type defintions but you can see it’s covered by the test suite here:
+// https://github.com/ember-a11y/ember-a11y-testing/blob/v4.0.7/tests/acceptance/a11y-audit-test.ts
+//
+// This reassures TypeScript that `include` and `exclude` are acceptable.
+type OptionsWithContext = RunOptions & ContextObject;
+
+// Selectors of elements to exclude from a11y auditing. See the following docs
+// for more:
+// https://github.com/dequelabs/axe-core/blob/develop/doc/API.md#include-exclude-object
+const exclude = [['.pds-logomark'], ['.pds-tabNav'], ['.card-header']];
+
+export function setup(): void {
+ setupGlobalA11yHooks(() => true);
+ setEnableA11yAudit(true);
+ setRunOptions({ exclude } as OptionsWithContext);
+}

ui/tests/test-helper.js

@@ -4,11 +4,13 @@ import * as QUnit from 'qunit';
 import { setApplication } from '@ember/test-helpers';
 import { setup } from 'qunit-dom';
 import { start } from 'ember-qunit';
+import { setup as setupA11yTesting } from './helpers/a11y';
 import './helpers/flash-message';
 
-
 setApplication(Application.create(config.APP));
 
+setupA11yTesting();
+
 setup(QUnit.assert);
 
 start();