Add WCAG PR check

.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']
+};