Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Website: Adds a11y audit in acceptance tests #1089

Merged
merged 26 commits into from
Jan 26, 2023
Merged

Website: Adds a11y audit in acceptance tests #1089

Show file tree
Hide file tree
Changes from 21 commits
Commits
Show all changes
26 commits
Select commit Hold shift + click to select a range
c57a317
Website: Adds a11y audit in acceptance tests
MelSumner Jan 18, 2023
0141ceb
remove id we shouldn't need
MelSumner Jan 18, 2023
a33065c
added test for homepage
MelSumner Jan 18, 2023
75634d9
added index test and updated some settings
MelSumner Jan 19, 2023
33fa416
tweak
MelSumner Jan 19, 2023
67de6fa
Adds more acceptance tests
MelSumner Jan 19, 2023
4410962
adds more tests
MelSumner Jan 20, 2023
77a1afa
adds rest of tests
MelSumner Jan 20, 2023
92697f1
fix typo
MelSumner Jan 20, 2023
dc2dbfe
Merge branch 'main' into melsumner/axe-testing
MelSumner Jan 20, 2023
325695d
Merge remote-tracking branch 'origin/main' into melsumner/axe-testing
MelSumner Jan 24, 2023
278d9bf
update test helper
MelSumner Jan 24, 2023
be959b3
Fixes form/primitives docs
MelSumner Jan 24, 2023
3518daa
updates test helper
MelSumner Jan 24, 2023
71ade97
Markdown linting
MelSumner Jan 24, 2023
e8f4439
removed pagination test for now
MelSumner Jan 24, 2023
68907f9
resolved duplicate ID issue in modal docs
MelSumner Jan 24, 2023
03d1099
Merge remote-tracking branch 'origin/main' into melsumner/axe-testing
MelSumner Jan 24, 2023
2a9d2c2
Merge remote-tracking branch 'origin/main' into melsumner/axe-testing
MelSumner Jan 24, 2023
f35f55e
Skip tabs a11y test for the time being
MelSumner Jan 24, 2023
46efb1c
adds unique aria-labels to breadcrumb demo samples
MelSumner Jan 24, 2023
53a146c
Merge branch 'main' into melsumner/axe-testing
MelSumner Jan 26, 2023
6c9e93e
removed aria-labels from code samples and skipped breadcrumb a11y tests
MelSumner Jan 26, 2023
f357159
Merge branch 'melsumner/axe-testing' of https://github.com/hashicorp/…
MelSumner Jan 26, 2023
479deaf
resolves merge conflict
MelSumner Jan 26, 2023
8cfee29
Update website/docs/components/modal/partials/guidelines/guidelines.md
MelSumner Jan 26, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions website/app/components/doc/page/footer.hbs
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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">
MelSumner marked this conversation as resolved.
Show resolved Hide resolved
<li class="doc-page-footer__nav-item">
<LinkTo @route="show" @model="about/accessibility-statement">Accessibility</LinkTo>
</li>
Expand Down
3 changes: 1 addition & 2 deletions website/docs/components/badge/partials/guidelines/guidelines.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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" />
Expand Down Expand Up @@ -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/)
14 changes: 6 additions & 8 deletions website/docs/components/breadcrumb/partials/code/how-to-use.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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" />
Expand All @@ -24,7 +23,7 @@ A few parameters were omitted for clarity.
Add the correct `@route/@models/@model/@query` parameter to each Breadcrumb Item.

```handlebars
<Hds::Breadcrumb>
<Hds::Breadcrumb aria-label="breadcrumbs with routing params">
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Apart from passing the tests, what is the benefit of doing this? I don't think we can have an expectation that all the code snippets (rendered as components), for every possible component, now and in the future, in every possible context, will pass all the accessibility criteria.
The downside of this is that when the consumers will copy this code snippet (or other code snippets in other pages for other components) they will copy code that may not be suitable for their context, or even incorrect.
I am totally OK to make the HDS components as much accessible as we can (eg. if the aria-label is required for the Breadcrumb let's add a property for that) but I want to have a discussion, as a team, and evaluate pros and cons, of making also all the code snippets for the HDS components in the Helios documentation also pass all the accessibility tests.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I would ask you to consider this: We expect our examples to work, we expect our CSS and JavaScript to be correct, why would Accessibility be any different?

  1. If I am a user with a screen reader, and I visit this page, I am presented with a list of breadcrumbs, with no way to differentiate among them. So it becomes a non-equitable discoverability issue: while a user who can see the screen can quickly differentiate among examples and copy the example that is appropriate for them, the user with AT has to go through each example and remember which examples are there, then try to find the one that they want to copy.
  2. I do not think our consumers will be confused by the presence of different aria-labels. The presence of unique labels will reinforce the Success Criteria and provide supplementary learning through the examples.

I hope you will re-consider your point of view.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

When consumers copy and paste the code snippet into their project, do we expect them to keep the aria-label, or is this something they would likely remove?

If it's something they'll remove, is there a way to attach the aria-label to the code snippet block (container) instead of directly in the component itself?

Copy link
Contributor Author

@MelSumner MelSumner Jan 25, 2023 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@didoo In order to unblock this PR, I can commit to a follow-up PR that explores potential alternative approaches that achieve the same outcome.

Copy link
Contributor Author

@MelSumner MelSumner Jan 25, 2023 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@heatherlarsen @KristinLBradley there's already an aria-label on the component itself (default is aria-label="breadcrumb") so that would take precedence (here on the docs website)

To answer the first question: any application that uses internationalized strings would change the content-

so aria-label="breadcrumb" would be edited to be aria-label={{t "breadcrumb"}}

But this goes for anything that has a string value like @text etc. Pretty much everything they copy and paste already has to be heavily edited, since they are superficial examples and not specific to a product. We put the args/props and values there to demonstrate how it is done, and they copy/paste and edit to match their own use case.

<Hds::Breadcrumb::Item @text="My org" @icon="org" @route="components" />
<Hds::Breadcrumb::Item @text="Consul" @icon="consul" @route="components" />
<Hds::Breadcrumb::Item
Expand All @@ -38,15 +37,15 @@ 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
<Hds::Breadcrumb @itemsCanWrap={{false}}>
<Hds::Breadcrumb @itemsCanWrap={{false}} aria-label="breadcrumbs no wrapping">
<Hds::Breadcrumb::Item @text="My org" @icon="org" />
<Hds::Breadcrumb::Item @text="Consul" @icon="consul" />
<Hds::Breadcrumb::Item @text="my-consul-cluster" />
Expand All @@ -60,12 +59,11 @@ 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 aria-label="breadcrumbs with truncated content">
<Hds::Breadcrumb::Item @text="My org" @icon="org" @route="components" />
<Hds::Breadcrumb::Truncation>
<Hds::Breadcrumb::Item @text="Consul" @icon="consul" @route="components" />
Expand Down
20 changes: 10 additions & 10 deletions website/docs/components/breadcrumb/partials/guidelines/guidelines.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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" />
Expand All @@ -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" />
Expand All @@ -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" />
Expand All @@ -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" />
Expand All @@ -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" />
Expand All @@ -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" />
Expand All @@ -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" />
Expand All @@ -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>
Expand All @@ -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"/>
Expand All @@ -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" />
Expand Down
36 changes: 23 additions & 13 deletions website/docs/components/form/primitives/partials/code/how-to-use.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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.
Expand All @@ -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.
Expand All @@ -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>
```

Expand All @@ -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>
Expand Down Expand Up @@ -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.
Expand All @@ -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}}
Expand All @@ -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.
Expand All @@ -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" />
Expand Down
5 changes: 2 additions & 3 deletions website/docs/components/form/select/partials/accessibility/accessibility.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@

`Form::Select` is conformant when used as directed.

## Accessibility
## Accessibility Considerations

### Mouse

Expand Down Expand Up @@ -68,7 +68,6 @@ Close with changing

![Example image of closing the select with the escape key](/assets/components/form/select/accessibility/keyboard/select-focus.png)


#### Applicable WCAG Success Criteria (Reference)

This section is for reference only, some descriptions have been truncated for brevity. The `Form::Select::Base` variation of this component is conditionally conformant; that is, it is not conformant until it has an accessible name. Otherwise, this component intends to conform to the following WCAG Success Criteria:
Expand All @@ -79,4 +78,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).
4 changes: 2 additions & 2 deletions website/docs/components/modal/partials/guidelines/guidelines.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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|>
MelSumner marked this conversation as resolved.
Show resolved Hide resolved
Small Modal
</M.Header>
<M.Body>
Expand Down
2 changes: 1 addition & 1 deletion website/docs/components/tabs/partials/accessibility/accessibility.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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).
1 change: 1 addition & 0 deletions website/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -44,6 +44,7 @@
"broccoli-merge-trees": "^4.2.0",
"broccoli-multifilter": "^2.0.0",
"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",
Expand Down
22 changes: 22 additions & 0 deletions website/tests/acceptance/about-test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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) {
Dhaulagiri marked this conversation as resolved.
Show resolved Hide resolved
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');
});
});
22 changes: 22 additions & 0 deletions website/tests/acceptance/about/accessibility-statement-test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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');
});
});
22 changes: 22 additions & 0 deletions website/tests/acceptance/about/overview-test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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/overview', function (hooks) {
setupApplicationTest(hooks);

test('visiting /about/overview', async function (assert) {
await visit('/about/overview');

assert.strictEqual(currentURL(), '/about/overview');
});

test('about/overview page passes a11y automated checks', async function (assert) {
await visit('/about/overview');

await a11yAudit();

assert.ok(true, 'a11y automation audit passed');
});
});
Loading