[Axe] Run axe across all stories

[kendallgassner]

In follow up PR:

• Remove old @aat tests

This PR aims to run axe ci testing on all Storybook stories. I noticed in a previous PR that we had uncaught axe violations because we have to manually add a Playwright test for each Storybook story. Because of this manual effort many of our stories do not have axe testing setup.

In addition to writing a script to run axe against all stories I made fixes to all pre-existing stories with axe failures.

Changelog

New

Changed

Removed

Rollout strategy

• Patch release
• Minor release
• Major release; if selected, include a written rollout or migration plan
• None; if selected, include a brief description as to why

Testing & Reviewing

Merge checklist

• Added/updated tests
• Added/updated documentation
• Added/updated previews (Storybook)
• Changes are SSR compatible
• Tested in Chrome
• Tested in Firefox
• Tested in Safari
• Tested in Edge
• (GitHub staff only) Integration tests pass at github/github (Learn more about how to run integration tests)

[changeset-bot]

⚠️ No Changeset found

Latest commit: e492c51

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

[github-actions]

👋 Hi, this pull request contains changes to the source code that github/github depends on. If you are GitHub staff, we recommend testing these changes with github/github using the integration workflow. Thanks!

[github-actions]

size-limit report 📦

Path	Size
packages/react/dist/browser.esm.js	104.56 KB (0%)
packages/react/dist/browser.umd.js	104.89 KB (0%)

[joshblack]

Looks great! Just left a couple of comments 👀

[joshblack]

Suggested change

	test.describe('@aat', () => {
	test.describe('aat', () => {

I would just annotate this as aat, or remove it, since we're using the @aat tag at the test-level to filter things out currently (although we could totally change this in the future.

[kendallgassner]

My thought was to remove all @aat tests after this is merged since we don't need to generate them ourselves

[kendallgassner]

@joshblack do you feel like we need the other @Aat tests now?

[joshblack]

@kendallgassner I totally bet we could, especially the automated/boilerplate ones.

I think it can still be helpful to have this tag since there are stories where we would like to put the component in a specific state and then run axe, ideally. Like with menus to make sure we test things when it's open and closed or if we want to use the matrix test helper to make sure we run axe against prop combinations of things.

[kendallgassner]

@joshblack If we keep the '@Aat' in this file, doesn't it break up the tests to run concurrently in aat-report. I assumed aat-runner 1-4 were different threads.

[joshblack]

@kendallgassner I think we should definitely keep @aat in the file for the reasons you mentioned, just was saying that we could add it at the test-level instead of in the describe (which seems like the case on line 38? let me know if I'm misreading 👀)

If we have that in place then I think we can remove the outer describe block or replace it with just describe('aat')

[kendallgassner]

A legit color-contrast failure: flash banner with a link in it. I might need to add the components-flash-features--with-icon-action-dismiss story to the skip list until we can get a fix out for this.

[primer-integration]

👋 Hi from github/github! Your integration PR is ready: https://github.com/github/github/pull/359958

[TylerJDev]

Random question; I see the flow isn't part of the workflow ci.yml anymore, and was wondering if this was intentional? Just trying to see where the tests are being ran in the CI 👀

[kendallgassner]

@TylerJDev I didn't have to change the CI because @joshblack pointed out that I could use the storybook-static/index.json file to pull storybook ids ✨ . This file is generated during npx storybook build which is already run during the aat report!

The aat report will run these specific tests because of the @aat tag.