Component accessibility testing

[xman343]

Changes

Adding a Cypress script that tests all the components in the examples folder for accessibility violations using cypress-axe.

Testing

To run all tests headlessly: yarn test --filter=a11y from root.

To run interactively inside browser (locally): yarn workspace a11y open.

Docs

N/A

[mayank99]

Another option you might want to explore is Cypress component testing. It is considered stable, unlike Playwright component testing (which is still experimental), so it's possible that you might be able to loop over components in cypress just fine. Definitely worth experimenting. If you run into similar limitations, then you can carry on with my suggestion above about using playwright e2e testing instead.

Note: You'll have to use cypress-axe instead of @axe-core/playwright.

[xman343]

I think we should run these tests in CI as well.

You can add a new job in build.yml that looks something like this:

  a11y:
    name: Test for a11y violations
    needs: install
    runs-on: ubuntu-latest

    steps:
      - uses: actions/checkout@v3

      - name: Use Node 18.X
        uses: actions/setup-node@v3
        with:
          node-version: 18.x

      - name: Cache node_modules
        uses: actions/cache@v3
        id: cache-node-modules
        with:
          path: |
            node_modules
            packages/*/node_modules
            apps/*/node_modules
            playgrounds/*/node_modules
          key: modules-${{ runner.os }}-${{ hashFiles('yarn.lock') }}

      - run: yarn test --filter=a11y

Added!

[mayank99]

LGTM 🚀 working great both locally and in CI.

Now lets start fixing all reported violations in future PRs.

[LostABike]

Testing/playing around with this PR. If I understand correctly, we are running a pre-written script axe-core on all of our components? I am able to run the test, and it would tell me there are components that fail accessibility but doesn't specify how. Does it simply test for aria-label on all components? nevermind I just saw the exact test rules and descriptions! @xman343 @mayank99

[xman343]

Testing/playing around with this PR. If I understand correctly, we are running a pre-written script axe-core on all of our components? I am able to run the test, and it would tell me there are components that fail accessibility but doesn't specify how. Does it simply test for aria-label on all components? nevermind I just saw the exact test rules and descriptions! @xman343 @mayank99

Anything I should add, or does the code look good to you?

[LostABike]

Testing/playing around with this PR. If I understand correctly, we are running a pre-written script axe-core on all of our components? I am able to run the test, and it would tell me there are components that fail accessibility but doesn't specify how. Does it simply test for aria-label on all components? nevermind I just saw the exact test rules and descriptions! @xman343 @mayank99

Anything I should add, or does the code look good to you?

I'm not too well-versed in configurating modules and scripts so I'm just learning from your code :D But I have read them and I think they look good. Also tested functionality and seems to be working as expected 👍

[mayank99]

fyi i updated this because visual tests were failing even after retrying 7 times.