feat: add Storybook deployment workflow and integrate accessibility testing

Author: manuelsanchez2

.github/workflows/cd.yml

@@ -0,0 +1,33 @@
+name: CD - Deploy Storybook
+
+on:
+  push:
+    branches:
+      - main
+
+jobs:
+  deploy-storybook:
+    runs-on: ubuntu-latest
+    environment:
+      name: github-pages
+    permissions:
+      contents: read
+      pages: write
+      id-token: write
+    steps:
+      - name: Checkout repo
+        uses: actions/checkout@v4
+        with:
+          persist-credentials: false
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: 22
+
+      - uses: bitovi/github-actions-storybook-to-github-pages@v1.0.3
+        with:
+          install_command: npm ci
+          build_command: npm run build-storybook
+          path: storybook-static
+          checkout: false

.github/workflows/ci.yml

@@ -62,3 +62,12 @@ jobs:
           badge-title: Virtual screenreader Tests
           path: reports/virtual-screenreader.xml
           reporter: jest-junit
+
+      - name: Build Storybook 📚
+        run: npm run build-storybook
+      - name: Start Storybook
+        run: npm run storybook &
+      - name: Wait for Storybook to be ready
+        run: npx wait-on http://localhost:6006
+      - name: Run Storybook a11y tests 🧪
+        run: npm run test:storybook

.storybook/main.js

@@ -1,7 +1,7 @@
 /** @type { import('@storybook/react-vite').StorybookConfig } */
 const config = {
   'stories': ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
-  'addons': ['@storybook/addon-essentials'],
+  'addons': ['@storybook/addon-essentials', '@storybook/addon-a11y'],
   'framework': {
     'name': '@storybook/react-vite',
     'options': {},

.storybook/preview.js

@@ -3,6 +3,7 @@ import '../src/components/styles.css';
 /** @type { import('@storybook/react').Preview } */
 const preview = {
   parameters: {
+    a11y: { test: 'error', rules: [{ id: 'region', enabled: false }] },
     controls: {
       matchers: {
         color: /(background|color)$/i,

.storybook/test-runner.js

@@ -0,0 +1,35 @@
+import { injectAxe, checkA11y, configureAxe } from 'axe-playwright';
+import { getStoryContext } from '@storybook/test-runner';
+
+/*
+ * See https://storybook.js.org/docs/writing-tests/test-runner#test-hook-api
+ * to learn more about the test-runner hooks API.
+ */
+const config = {
+  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);
+
+    // Do not run a11y tests on disabled stories.
+    if (storyContext.parameters?.a11y?.disable) {
+      return;
+    }
+
+    // Apply story-level a11y rules
+    await configureAxe(page, {
+      rules: storyContext.parameters?.a11y?.config?.rules,
+    });
+
+    await checkA11y(page, 'body', {
+      detailedReport: true,
+      detailedReportOptions: {
+        html: true,
+      },
+    });
+  },
+};
+
+export default config;

.storybook/vitest.setup.js

@@ -0,0 +1,13 @@
+import { beforeAll } from 'vitest';
+import { setProjectAnnotations } from '@storybook/react';
+import * as projectAnnotations from './preview';
+import * as a11yAddonAnnotations from '@storybook/addon-a11y/preview';
+
+// This is an important step to apply the right configuration when testing your stories.
+// More info at: https://storybook.js.org/docs/api/portable-stories/portable-stories-vitest#setprojectannotations
+const project = setProjectAnnotations([
+  projectAnnotations,
+  a11yAddonAnnotations,
+]);
+
+beforeAll(project.beforeAll);

package.json

@@ -11,6 +11,7 @@
     "preview": "vite preview",
     "storybook": "storybook dev -p 6006",
     "build-storybook": "storybook build",
+    "test:storybook": "JEST_JUNIT_OUTPUT_DIR=reports JEST_JUNIT_OUTPUT_NAME=storybook.xml test-storybook --junit",
     "test:testing-library": "vitest --config ./vitest.config.js",
     "test:playwright": "PLAYWRIGHT_JUNIT_OUTPUT_DIR=reports PLAYWRIGHT_JUNIT_OUTPUT_NAME=playwright.xml playwright test -c playwright-ct.config.js --reporter=junit",
     "test:screenreader:virtual": "vitest --config ./vitest.virtual.config.js",
@@ -29,9 +30,12 @@
     "@guidepup/virtual-screen-reader": "^0.32.1",
     "@playwright/experimental-ct-react": "^1.52.0",
     "@playwright/test": "^1.52.0",
-    "@storybook/addon-essentials": "^8.6.12",
-    "@storybook/react": "^8.6.13",
-    "@storybook/react-vite": "^8.6.13",
+    "@storybook/addon-a11y": "^8.6.14",
+    "@storybook/addon-essentials": "^8.6.14",
+    "@storybook/react": "^8.6.14",
+    "@storybook/react-vite": "^8.6.14",
+    "@storybook/test": "^8.6.14",
+    "@storybook/test-runner": "^0.22.0",
     "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/react": "^16.3.0",
     "@testing-library/user-event": "^14.6.1",