chore: Add Access Continuum to e2e tests

[Zeyber]

Closes: CXSPA-6523

Using Accessibility Continuum with E2E Testing

Overview

Accessibility Continuum is a tool that can identify accessibility issues on a given page. We are using this tool in conjunction with Cypress for identifying issues during e2e tests.

Setup (local environment)

Prerequisites

Required (download Access Continuum package)

• Acquire an access token to download the Access Continuum package from the registry.
• In the terminal, navigate to the cypress e2e project directory (cd projects/storefrontapp-e2e-cypress).
• Run export CONTINUUM_REGISTRY_TOKEN="my-token" in the terminal to set the token where "my-token" should be replaced by the token you acquired.
• Run npm install to install the Access Continuum package.

Optional (setup AMP Reports)

Note: If you do not set the key, this will not impact the test results.

• To setup AMP reports, you will need to acquire an AMP API key.
  • If you want to setup for your personal environment, you can follow the steps here to request one.
• After you have acquired this key, you can set it by adding AMP_API_TOKEN as an environment variable to the cypress default config (projects/storefrontapp-e2e-cypress/cypress.config.ts).
• You should also set AMP_ASSET_ID and AMP_ORG_ID as environment variables in the same config. Steps on how to acquire these can also be found here.

Adding Access Continuum to tests

Note: You can also check projects/storefrontapp-e2e-cypress/cypress/e2e/accessibility/continuum.example-e2e.cy.ts to see how to do this.

1. We need to enable Access Continuum at the start of our e2e test.

...

before(() => {
    cy.setUpContinuum('cypress/continuum.conf.ts');
});

...

2. We can run a check with Access Continuum at any moment we want to test a page. This can include moments where we have opened modals, popovers, dropdowns, etc.

// Any code that has navigated our app to a given page or state.
...

// Runs the a11y test
cy.runAllAccessibilityTests()
      // Shows the results of the test in the console
      .printAccessibilityTestResults()
      // Send the results to AMP (if setup)
      .submitAccessibilityConcernsToAMP()
      // Fail the test run if a11y testing finds concerns
      .failIfAnyAccessibilityConcerns();

...

[github-actions]

Merge Checks Failed

Please push a commit to re-trigger the build. 
To push an empty commit you can use `git commit --allow-empty -m "Trigger Build"`

[github-actions]

Merge Checks Failed

Please push a commit to re-trigger the build. 
To push an empty commit you can use `git commit --allow-empty -m "Trigger Build"`

[github-actions]

Merge Checks Failed

Please push a commit to re-trigger the build. 
To push an empty commit you can use `git commit --allow-empty -m "Trigger Build"`

[github-actions]

Merge Checks Failed

Please push a commit to re-trigger the build. 
To push an empty commit you can use `git commit --allow-empty -m "Trigger Build"`

[github-actions]

Merge Checks Failed

Please push a commit to re-trigger the build. 
To push an empty commit you can use `git commit --allow-empty -m "Trigger Build"`

[github-actions]

Merge Checks Failed

Please push a commit to re-trigger the build. 
To push an empty commit you can use `git commit --allow-empty -m "Trigger Build"`

[github-actions]

Merge Checks Failed

Please push a commit to re-trigger the build. 
To push an empty commit you can use `git commit --allow-empty -m "Trigger Build"`

[github-actions]

Merge Checks Failed

Please push a commit to re-trigger the build. 
To push an empty commit you can use `git commit --allow-empty -m "Trigger Build"`

[github-actions]

Merge Checks Failed

Please push a commit to re-trigger the build. 
To push an empty commit you can use `git commit --allow-empty -m "Trigger Build"`

[github-actions]

Merge Checks Failed

Please push a commit to re-trigger the build. 
To push an empty commit you can use `git commit --allow-empty -m "Trigger Build"`

[github-actions]

Merge Checks Failed

Please push a commit to re-trigger the build. 
To push an empty commit you can use `git commit --allow-empty -m "Trigger Build"`