feat(SLB-226): add a11y checks

packages/ui/.storybook/main.ts

@@ -31,6 +31,7 @@ const config: StorybookConfig = {
     '@storybook/addon-essentials',
     '@storybook/addon-interactions',
     '@storybook/addon-coverage',
+    '@storybook/addon-a11y'
   ],
   framework: {
     name: '@storybook/react-vite',

packages/ui/.storybook/preview.tsx

@@ -62,6 +62,28 @@ const SWRCacheDecorator: Decorator = (Story) => {
 
 export const parameters = {
   chromatic: { viewports: [320, 840, 1440] },
+  a11y: {
+    // Optional selector to inspect
+    element: '#storybook-root',
+    config: {
+      rules: [
+        {
+          // The autocomplete rule will not run based on the CSS selector provided
+          id: 'autocomplete-valid',
+          selector: '*:not([autocomplete="nope"])',
+        },
+        {
+          // Setting the enabled option to false will disable checks for this particular rule on all stories.
+          id: 'image-alt',
+          enabled: false,
+        },
+      ],
+    },
+    // Axe's options parameter
+    options: {},
+    // Optional flag to prevent the automatic check
+    manual: true,
+  },
 };
 
 export const decorators = [LocationDecorator, IntlDecorator, SWRCacheDecorator];

packages/ui/.storybook/test-runner.ts

@@ -0,0 +1,32 @@
+import type { TestRunnerConfig } from '@storybook/test-runner';
+import { getStoryContext } from '@storybook/test-runner';
+
+import { injectAxe, checkA11y, configureAxe } from 'axe-playwright';
+
+/*
+ * See https://storybook.js.org/docs/writing-tests/test-runner#test-hook-api
+ * to learn more about the test-runner hooks API.
+ */
+const config: TestRunnerConfig = {
+  async preVisit(page) {
+    await injectAxe(page);
+  },
+  async postVisit(page, context) {
+    // Get the entire context of a story, including parameters, args, argTypes, etc.
+    const storyContext = await getStoryContext(page, context);
+
+    // Apply story-level a11y rules
+    await configureAxe(page, {
+      rules: storyContext.parameters?.a11y?.config?.rules,
+    });
+
+    await checkA11y(page, '#storybook-root', {
+      detailedReport: true,
+      detailedReportOptions: {
+        html: true,
+      },
+    });
+  },
+};
+
+export default config;

packages/ui/package.json

@@ -63,6 +63,7 @@
     "@amazeelabs/bridge-storybook": "^1.2.8",
     "@amazeelabs/cloudinary-responsive-image": "^1.6.15",
     "@formatjs/cli": "^6.2.4",
+    "@storybook/addon-a11y": "7.6.19",
     "@storybook/addon-actions": "^7.6.7",
     "@storybook/addon-coverage": "^1.0.0",
     "@storybook/addon-essentials": "^7.6.7",
@@ -85,6 +86,7 @@
     "@types/react-dom": "^18.2.18",
     "@vitejs/plugin-react-swc": "^3.5.0",
     "autoprefixer": "^10.4.16",
+    "axe-playwright": "^2.0.1",
     "cssnano": "^6.0.3",
     "eslint-plugin-formatjs": "^4.11.3",
     "eslint-plugin-storybook": "^0.6.15",