Add WCAG PR check (#274)

Add a GH workflow to check for WCAG violations. If the check fails, the PR will be blocked from merging into main. There are some WCAG violations that we ignore, namely color contrast failures on stories where components are in a "loading" state. Using config options, that rule is disabled for those particular stories. To get the automated WCAG checks, Storybook has to be running while the `npm run wcag` command is run.

Note, Jest had to be downgraded to v27 to work with `@storybook/test-runner`. But, it looks like they will be adding support for v28 shortly (storybookjs/test-runner#154), so we should be able to upgrade again soon. In the meantime, we haven't been using any features from v28, so the downgrade didn't affect any tests.

Also, the Snyk checks are failing, but the new license and one of new vulnerabilities are both approved by legal in Juliann's [PR](#264 (comment)). The other new vulnerability is also introduced only through Storybook, so we wouldn't be susceptible to it.

J=SLAP-2289
TEST=auto

See that the check runs as expected on this PR and passes.

.github/workflows/wcag_test.yml

@@ -0,0 +1,14 @@
+name: WCAG tests
+
+on:
+  pull_request:
+    branches:
+      - main
+
+jobs:
+  call_wcag_test:
+    uses: yext/slapshot-reusable-workflows/.github/workflows/wcag_test.yml@v1
+    secrets:
+      NPM_TOKEN: ${{ secrets.NPM_TOKEN }}
+    with:
+      build_script: ./tests/scripts/start-storybook.sh

.storybook/preview.js

@@ -1,5 +1,6 @@
 import './index.css';
 import { SearchCoreDecorator } from '../tests/__fixtures__/core/SearchCore';
+import { runOnly } from './wcagConfig';
 
 export const parameters = {
   actions: { argTypesRegex: '^on[A-Z].*' },
@@ -12,10 +13,7 @@ export const parameters = {
   },
   a11y: {
     options: {
-      runOnly: {
-        type: 'tag',
-        values: ['wcag2a', 'wcag2aa', 'wcag21a', 'wcag21aa']
-      }
+      runOnly
     }
   },
   options: {

.storybook/test-runner.ts

@@ -0,0 +1,29 @@
+import { injectAxe, checkA11y } from 'axe-playwright';
+import { Page } from 'playwright-core';
+import { runOnly } from './wcagConfig';
+
+/**
+ * See https://storybook.js.org/docs/react/writing-tests/test-runner#test-hook-api-experimental
+ * to learn more about the test-runner hooks API.
+ */
+const renderFunctions = {
+  async preRender(page: Page) {
+    await injectAxe(page);
+  },
+  async postRender(page: Page, context) {
+    await checkA11y(page, '#root', {
+      axeOptions: {
+        runOnly,
+        rules: {
+          'color-contrast': { enabled: context.name !== 'Loading' }
+        },
+      },
+      detailedReport: true,
+      detailedReportOptions: {
+        html: true,
+      },
+    });
+  },
+};
+
+export default renderFunctions;

.storybook/wcagConfig.ts

@@ -0,0 +1,6 @@
+import { axeOptionsConfig } from 'axe-playwright';
+
+export const runOnly: axeOptionsConfig['axeOptions']['runOnly'] = {
+  type: 'tag',
+  values: ['wcag2a', 'wcag2aa', 'wcag21a', 'wcag21aa']
+};