Add Storybook test runner for accessibility testing

.github/workflows/storybook_test.yaml

@@ -0,0 +1,30 @@
+# This workflow will do a clean installation of node dependencies, cache/restore them, build the source code and run tests across different versions of node
+# For more information see: https://docs.github.com/en/actions/automating-builds-and-tests/building-and-testing-nodejs
+
+name: Storybook Tests
+
+on:
+  push:
+    branches: [ "**" ]
+
+jobs:
+  build:
+
+    runs-on: ubuntu-latest
+
+    strategy:
+      matrix:
+        node-version: [22.x]
+        # See supported Node.js release schedule at https://nodejs.org/en/about/releases/
+
+    steps:
+    - uses: actions/checkout@v4
+    - name: Use Node.js ${{ matrix.node-version }}
+      uses: actions/setup-node@v4
+      with:
+        node-version: ${{ matrix.node-version }}
+        cache: 'npm'
+    - run: npm ci
+    #- run: npm run build --if-present
+    - run: npm run test:storybook-ci
+      continue-on-error: true # Not enforced for now

.storybook/preview.tsx

@@ -165,6 +165,20 @@ const preview = {
       classTarget: 'html',
       stylePreview: true,
     },
+
+    // https://storybook.js.org/docs/8.5/writing-tests/accessibility-testing
+    // https://github.com/dequelabs/axe-core/blob/develop/doc/rule-descriptions.md
+    a11y: {
+      config: {
+        // Format: { id: <rule-name>, enabled: <boolean>, selector: <css-selector> }
+        rules: [
+          // Known accessibility issues (need to fix these)
+          //{ id: 'color-contrast', selector: '*:not(button[class*=primary])' },
+        ],
+      },
+      // Axe's options parameter
+      options: {},
+    },
   },
 } satisfies Preview;
 

.storybook/test-runner.ts

@@ -0,0 +1,35 @@
+/* Copyright (c) Fortanix, Inc.
+|* This Source Code Form is subject to the terms of the Mozilla Public License, v. 2.0. If a copy of
+|* the MPL was not distributed with this file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+import { type TestRunnerConfig, getStoryContext } from '@storybook/test-runner';
+import { injectAxe, configureAxe, checkA11y } 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,
+    });
+
+    const element = storyContext.parameters?.a11y?.element ?? '#storybook-root';
+    await checkA11y(page, element, {
+      detailedReport: true,
+      detailedReportOptions: {
+        html: true,
+      },
+    });
+  },
+};
+
+export default config;