Website: Adds a11y audit in acceptance tests

website/app/components/doc/page/footer.hbs

@@ -1,6 +1,6 @@
 <footer class="doc-page-footer" ...attributes>
-  <nav class="doc-page-footer__nav-menu" aria-label="footer navigation">
-    <ul class="doc-page-footer__nav-list" role="list">
+  <nav class="doc-page-footer__nav-menu" aria-label="footer">
+    <ul class="doc-page-footer__nav-list" aria-label="footer navigation">
       <li class="doc-page-footer__nav-item">
         <LinkTo @route="show" @model="about/accessibility-statement">Accessibility</LinkTo>
       </li>

website/docs/components/badge/partials/guidelines/guidelines.md

@@ -65,7 +65,7 @@ For example:
 - when listing statuses in a table
 - for successful or passive actions
 
-### Inverted 
+### Inverted
 
 <Hds::Badge @type="inverted" @text="Neutral inverted" />
 <Hds::Badge @type="inverted" @color="highlight" @text="Highlight inverted" />
@@ -130,7 +130,6 @@ Badges come in a few icon and text combinations; text only, icon only, and icon
 - Use language consistently within each product. For example, when using “In Progress” for one badge, use that same convention throughout the rest of the application.
 - Since Badges are not interactive, they don’t support links. Consider moving the link outside of the Badge instead.
 
-
 ## Related
 
 - [Badge Count](/components/badge-count/)

website/docs/components/breadcrumb/partials/accessibility/accessibility.md

@@ -25,5 +25,3 @@ This section is for reference only. This component intends to conform to the fol
 ## Support
 
 If any accessibility issues have been found within this component, let us know by [submitting an issue](https://github.com/hashicorp/design-system/issues/new/choose).
-
-

website/docs/components/breadcrumb/partials/code/how-to-use.md

@@ -9,7 +9,6 @@ The Breadcrumb is an application-level UI element, so it’s likely to be implem
 A few parameters were omitted for clarity.
 !!!
 
-
 ```handlebars
 <Hds::Breadcrumb>
   <Hds::Breadcrumb::Item @text="My org" @icon="org" />
@@ -38,11 +37,11 @@ Add the correct `@route/@models/@model/@query` parameter to each Breadcrumb Item
 
 ### No wrapping
 
-By default, the Breadcrumb allows items to wrap on multiple lines if the container is too small. Pass `false` to the `@itemsCanWrap` parameter to avoid wrapping. 
+By default, the Breadcrumb allows items to wrap on multiple lines if the container is too small. Pass `false` to the `@itemsCanWrap` parameter to avoid wrapping.
 
 !!! Warning
 
-The text will automatically truncate and be replaced with an ellipsis to fit within the container. However, this may result in the text being unavailable to keyboard-only users and, thus, is not WCAG conformant. 
+The text will automatically truncate and be replaced with an ellipsis to fit within the container. However, this may result in the text being unavailable to keyboard-only users and, thus, is not WCAG-conformant.
 !!!
 
 ```handlebars
@@ -60,10 +59,9 @@ It’s possible to hide part of the Breadcrumb tree under a "truncated" item tha
 
 !!! Warning
 
-The text will automatically truncate and be replaced with an ellipsis to fit within the container. However, this may result in the text being unavailable to keyboard-only users and, thus, is not WCAG conformant. 
+The text will automatically truncate and be replaced with an ellipsis to fit within the container. However, this may result in the text being unavailable to keyboard-only users and, thus, is not WCAG conformant.
 !!!
 
-
 ```handlebars
 <Hds::Breadcrumb>
   <Hds::Breadcrumb::Item @text="My org" @icon="org" @route="components" />

website/docs/components/breadcrumb/partials/guidelines/guidelines.md

@@ -28,7 +28,7 @@
 The last item in a the breadcrumb should always be the current page, and it should not be interactive.
 
 <div>
-	<Hds::Breadcrumb>
+	<Hds::Breadcrumb aria-label="breadcrumb with current page">
   	<Hds::Breadcrumb::Item @text="Level 1" />
   	<Hds::Breadcrumb::Item @text="Level 2" />
   	<Hds::Breadcrumb::Item @text="Level 3" />
@@ -39,7 +39,7 @@ The last item in a the breadcrumb should always be the current page, and it shou
 ### With icon
 
 <div>
-	<Hds::Breadcrumb>
+	<Hds::Breadcrumb aria-label="breadcrumb with icon">
   	<Hds::Breadcrumb::Item @text="Level 1" @icon="org" />
   	<Hds::Breadcrumb::Item @text="Level 2" @icon="folder" />
   	<Hds::Breadcrumb::Item @text="Level 3" @icon="user" />
@@ -49,7 +49,7 @@ The last item in a the breadcrumb should always be the current page, and it shou
 ### Truncation
 
 <div>
-	<Hds::Breadcrumb>
+	<Hds::Breadcrumb aria-label="breadcrumb with truncation">
 		<Hds::Breadcrumb::Item @text="Level 1" />
 		<Hds::Breadcrumb::Truncation>
 			<Hds::Breadcrumb::Item @text="Level 2" />
@@ -70,7 +70,7 @@ The truncated menu will include all of the hidden Breadcrumb Items. Clicking on
 We recommend only adding icons to the **first three items** to avoid unnecessary visual noise. 
 
 !!! Do
-<Hds::Breadcrumb>
+<Hds::Breadcrumb aria-label="breadcrumb recommendations">
   <Hds::Breadcrumb::Item @text="Level one" @icon="org" />
   <Hds::Breadcrumb::Item @text="Level two" @icon="folder" />
   <Hds::Breadcrumb::Item @text="Level three" @icon="org" />
@@ -80,7 +80,7 @@ We recommend only adding icons to the **first three items** to avoid unnecessary
 !!!
 
 !!! Dont
-<Hds::Breadcrumb>
+<Hds::Breadcrumb aria-label="breadcrumb example to avoid">
   <Hds::Breadcrumb::Item @text="Level one" @icon="org" />
   <Hds::Breadcrumb::Item @text="Level two" @icon="folder" />
   <Hds::Breadcrumb::Item @text="Level three" @icon="server-cluster" />
@@ -93,7 +93,7 @@ We recommend only adding icons to the **first three items** to avoid unnecessary
 Icons shouldn’t be placed randomly within the list. If the preceding item doesn’t include an icon, the next item shouldn’t include an icon either.
 
 !!! Do
-<Hds::Breadcrumb>
+<Hds::Breadcrumb aria-label="breadcrumb icon placement">
   <Hds::Breadcrumb::Item @text="Level one" @icon="org" />
   <Hds::Breadcrumb::Item @text="Level two" @icon="folder" />
   <Hds::Breadcrumb::Item @text="Level three" @icon="org" />
@@ -103,7 +103,7 @@ Icons shouldn’t be placed randomly within the list. If the preceding item does
 !!!
 
 !!! Dont
-<Hds::Breadcrumb>
+<Hds::Breadcrumb aria-label="breadcrumb icon placement to avoid">
   <Hds::Breadcrumb::Item @text="Level one" @icon="org" />
   <Hds::Breadcrumb::Item @text="Level two" @icon="folder" />
   <Hds::Breadcrumb::Item @text="Level three" />
@@ -120,7 +120,7 @@ We offer various options for truncation due to depth or lack of space.
 
 “Truncate middle” houses any number of Breadcrumb Items under a menu in the middle of the Breadcrumb. The number of items displayed before and after truncation depends on the use case and space available within the application.  We recommend this method if needing to truncate the Breadcrumb.
 
-<Hds::Breadcrumb>
+<Hds::Breadcrumb aria-label="breadcrumb truncation middle example">
   <Hds::Breadcrumb::Item @text="Level one" />
   <Hds::Breadcrumb::Item @text="Level two" />
   <Hds::Breadcrumb::Truncation>
@@ -134,7 +134,7 @@ We offer various options for truncation due to depth or lack of space.
 
 “Truncate squeeze” reduces the persistent Breadcrumb Items to the first and last/current items and hides the other items under a menu. We recommend only using this method when space is limited, such as on mobile viewports.
 
-<Hds::Breadcrumb>
+<Hds::Breadcrumb aria-label="breadcrumb truncation squeeze example">
   <Hds::Breadcrumb::Item @text="Level one" />
   <Hds::Breadcrumb::Truncation>
     <Hds::Breadcrumb::Item @text="Level two"/>
@@ -146,7 +146,7 @@ We offer various options for truncation due to depth or lack of space.
 
 Each text-based item can truncate using a pixel-based max-width. We recommend this option for items with long text strings.
 
-<Hds::Breadcrumb @itemsCanWrap={{false}}>
+<Hds::Breadcrumb @itemsCanWrap={{false}} aria-label="breadcrumb width based">
   <Hds::Breadcrumb::Item @text="Level one" />
   <Hds::Breadcrumb::Item @text="Level two" />
   <Hds::Breadcrumb::Item @text="Level three truncation" @maxWidth="120px" />

website/docs/components/form/primitives/partials/code/how-to-use.md

@@ -5,19 +5,25 @@
 The default invocation requires text to be passed and a `controlId` argument (the ID of the form control associated with the label).
 
 ```handlebars
-<Hds::Form::Label @controlId="control-ID">My label</Hds::Form::Label>
+<Hds::Form::Label @controlId="control-ID">
+  My label
+</Hds::Form::Label>
 ```
 
 Pass an `isRequired` argument, when user input is required for the associated form control.
 
 ```handlebars
-<Hds::Form::Label @controlId="control-ID" @isRequired={{true}}>My label</Hds::Form::Label>
+<Hds::Form::Label @controlId="control-ID" @isRequired={{true}}>
+  My label
+</Hds::Form::Label>
 ```
 
 Pass an `isOptional` argument, when the user input is optional for the associated form control.
 
 ```handlebars
-<Hds::Form::Label @controlId="control-ID" @isOptional={{true}}>My label</Hds::Form::Label>
+<Hds::Form::Label @controlId="control-ID" @isOptional={{true}}>
+ My label
+</Hds::Form::Label>
 ```
 
 If the label needs to contain more than just text, it’s possible to pass structured content to component. While the correct text styling is applied to the component’s container, the layout of the content inside the component is the responsibility of the product team.
@@ -41,7 +47,9 @@ The default invocation requires text to be passed and a `controlId` argument.
 The `controlId` value is used to generate an ID, prefixed with `helper-text-`, so that the ID can be referenced in the `aria-describedby` attribute of the form control. If no `controlId` is provided, no ID is generated. If needed, it can be passed directly as an HTML attribute.
 
 ```handlebars
-<Hds::Form::HelperText @controlId="control-ID">This is some helper text</Hds::Form::HelperText>
+<Hds::Form::HelperText @controlId="helper-text-first">
+  This is some helper text
+</Hds::Form::HelperText>
 ```
 
 If the helper text needs to contain more than just text, use the block form of the component. While the correct styling is applied to the component itself, the nested components may need additional styling and are the responsibility of the product team.
@@ -54,8 +62,10 @@ Interactive elements in text (associated with the input through `aria-describedb
 ```handlebars
 <Hds::Form::HelperText @controlId="control-ID">
   Some text with a
-  <Hds::Link::Inline @route="show" @model="components/link/inline">Hds::Link::Inline</Hds::Link::Inline>,
-  or <code>some formatted code</code> or a <strong>strong message</strong>.
+  <Hds::Link::Inline @route="show" @model="components/link/inline">
+  Hds::Link::Inline</Hds::Link::Inline>,
+  or <code>some formatted code</code>
+  or a <strong>strong message</strong>.
 </Hds::Form::HelperText>
 ```
 
@@ -66,14 +76,14 @@ The default invocation requires text to be passed and a `controlId` argument.
 The `controlId` value will be used to generate an ID, prefixed with `error-`, so that this ID can be referenced in the `aria-describedby` attribute of the form control. If no `controlId` is provided, no ID is generated. If needed, it can be passed directly as an HTML attribute.
 
 ```handlebars
-<Hds::Form::Error @controlId="control-ID">This is a simple error message</Hds::Form::Error>
+<Hds::Form::Error @controlId="error-message-first">This is a simple error message</Hds::Form::Error>
 ```
 
-If the error is made up of multiple messages, it’s possible to iterate over a collection of error messages. 
+If the error is made up of multiple messages, it’s possible to iterate over a collection of error messages.
 
 ```handlebars
 <Hds::Form::Error @controlId="control-ID" as |Error|>
-  {{#each @model.SAMPLE_ERROR_MESSAGES as |message|}}
+  {{#each this.SAMPLE_ERROR_MESSAGES as |message|}}
     <Error.Message>{{message}}</Error.Message>
   {{/each}}
 </Hds::Form::Error>
@@ -138,7 +148,7 @@ If the legend needs to contain more than just text, it’s possible to pass stru
 
 !!! Warning
 
-It’s unlikely that you’ll need to use this component direcly, but if you do contact the Design Systems Team so we can provide support.
+It’s unlikely that you’ll need to use this component directly, but if you do contact the Design Systems Team so we can provide support.
 !!!
 
 The default invocation includes a set of contextual components, a control (in this case a text input) with hashed values passed back to it, and a `@layout` argument. Depending on the context, you may want to pass just the label, or the label _and_ the helper text, while the error message is likely conditional to the validation of the input provided by the user. The arguments `id` and `ariaDescribedBy` are automatically generated by the component and passed back to the control.
@@ -150,7 +160,7 @@ The layout of the content inside the "control" container is the responsibility o
   <F.Label>This is the label</F.Label>
   <F.HelperText>This is the helper text</F.HelperText>
   <F.Control>
-    // add your control here
+    <!--add your control here-->
     <input
       type="email"
       id={{F.id}}
@@ -167,7 +177,7 @@ The layout of the content inside the "control" container is the responsibility o
 
 !!! Warning
 
-It’s unlikely that you’ll need to use this component direcly, but if you do contact the Design Systems Team so we can provide support.
+It’s unlikely that you’ll need to use this component directly, but if you do contact the Design Systems Team so we can provide support.
 !!!
 
 The default invocation includes a set of contextual components, one or more fields (in this case radio buttons within a label), and a `@layout` argument. Depending on the context, you may want to pass just the legend, just the helper text, both or none, while the error message is likely conditional to the validation of the inputs provided by the user.
@@ -178,7 +188,7 @@ The layout of the content inside the "control" container is the responsibility o
 <Hds::Form::Fieldset @layout="horizontal" @isRequired={{true}} as |F|>
   <F.Legend>This is the legend</F.Legend>
   <F.HelperText>This is the helper text</F.HelperText>
-  // add your fields here
+  <!-- add your fields here -->
   <F.Control>
     <label for="my-group-checkbox1" class="my-custom-class">
       <input type="checkbox" id="my-group-checkbox1" checked="checked" />

website/docs/components/form/radio-card/partials/guidelines/guidelines.md

@@ -13,7 +13,7 @@ Use the Radio Card Group in most cases. Use individual Radio Cards only in speci
 
 ## Control position
 
-In most cases, we recommend using the bottom position. Still, we offer Radio Cards in a left position, which is a good option when the content in the cards is minimal. 
+In most cases, we recommend using the bottom position. Still, we offer Radio Cards in a left position, which is a good option when the content in the cards is minimal.
 
 ### Bottom
 
@@ -57,19 +57,15 @@ In most cases, we recommend using the bottom position. Still, we offer Radio Car
 
 ## Legend style
 
-<<<<<<< HEAD
-The legend can receive any of the available text styles. We recommend using the default legend style provided with the component when placed along with other form components or `Display/400/Bold` when your form is broken down into sections.
-=======
 ### Default style
->>>>>>> main
 
 When placed along with other form components, we recommend using the default legend style provided by the component.
 
 ![Default legend style](/assets/components/form/radio-card/radio-card-default-legend.png =600x*)
 
 ### Display style
 
-When using the Radio Card Group as its own section, we recommend using `Display/400/Bold` for the legend. 
+When using the Radio Card Group as its own section, we recommend using `Display/400/Bold` for the legend.
 
 ![Display/400/Bold legend style](/assets/components/form/radio-card/radio-card-heading.png =600x*)
 

website/docs/components/form/select/partials/accessibility/accessibility.md

@@ -14,7 +14,7 @@
 
 ## Interactions 
 
-![Image of select interactions](/assets/components/form/select/select-interactions.png =1015x*)
+![Mouse and keyboard select interactions](/assets/components/form/select/select-interactions.png =1015x*)
 
 ## Applicable WCAG Success Criteria (Reference)
 
@@ -26,4 +26,4 @@ This section is for reference only, some descriptions have been truncated for br
 
 ## Support
 
-If any accessibility issues have been found within this component, let us know by [submitting an issue](https://github.com/hashicorp/design-system/issues/new/choose).
+If any accessibility issues have been found within this component, let us know by [submitting an issue](https://github.com/hashicorp/design-system/issues/new/choose).

website/docs/components/modal/partials/guidelines/guidelines.md

@@ -16,8 +16,8 @@
 
 Small
 
-<Hds::Modal @size="small" id="size-small-modal" open as |M|>
-  <M.Header>
+<Hds::Modal @size="small" id="size-small-modal-first" open as |M|>
+  <M.Header as |H|>
     Small Modal
   </M.Header>
   <M.Body>

website/docs/components/tabs/partials/accessibility/accessibility.md

@@ -47,4 +47,4 @@ Move to interactive element within the content area
 
 ## Support
 
-If any accessibility issues have been found within this component, let us know by [submitting an issue](https://github.com/hashicorp/design-system/issues/new/choose).
+If any accessibility issues have been found within this component, let us know by [submitting an issue](https://github.com/hashicorp/design-system/issues/new/choose).

website/package.json

@@ -46,6 +46,7 @@
     "broccoli-multifilter": "^2.0.0",
     "cspell": "^6.19.2",
     "ember-a11y-refocus": "^3.0.2",
+    "ember-a11y-testing": "^5.1.0",
     "ember-auto-import": "^2.4.2",
     "ember-body-class": "^3.0.0",
     "ember-cli": "~4.7.0",

website/tests/acceptance/about-test.js

@@ -0,0 +1,22 @@
+import { module, test } from 'qunit';
+import { visit, currentURL } from '@ember/test-helpers';
+import { setupApplicationTest } from 'website/tests/helpers';
+import { a11yAudit } from 'ember-a11y-testing/test-support';
+
+module('Acceptance | about', function (hooks) {
+  setupApplicationTest(hooks);
+
+  test('visiting /about', async function (assert) {
+    await visit('/about');
+
+    assert.strictEqual(currentURL(), '/about');
+  });
+
+  test('about page passes a11y automated checks', async function (assert) {
+    await visit('/about');
+
+    await a11yAudit();
+
+    assert.ok(true, 'a11y automation audit passed');
+  });
+});

website/tests/acceptance/about/accessibility-statement-test.js

@@ -0,0 +1,22 @@
+import { module, test } from 'qunit';
+import { visit, currentURL } from '@ember/test-helpers';
+import { setupApplicationTest } from 'website/tests/helpers';
+import { a11yAudit } from 'ember-a11y-testing/test-support';
+
+module('Acceptance | about/accessibility statement', function (hooks) {
+  setupApplicationTest(hooks);
+
+  test('visiting /about/accessibility-statement', async function (assert) {
+    await visit('/about/accessibility-statement');
+
+    assert.strictEqual(currentURL(), '/about/accessibility-statement');
+  });
+
+  test('about/accessibility-statement page passes a11y automated checks', async function (assert) {
+    await visit('/about/accessibility-statement');
+
+    await a11yAudit();
+
+    assert.ok(true, 'a11y automation audit passed');
+  });
+});