test: storybook accessibility testing using axe playwright (#222)

Author: hamza14khan

.github/workflows/ci.yml

@@ -24,13 +24,19 @@ jobs:
         with:
           node-version: '20.x'
           registry-url: 'https://registry.npmjs.org'
+      - name: Install Playwright
+        run: npx playwright install --with-deps
       - name: Build and test
         run: |
           npm ci
           npm run format:check
           npm run test
           npm run build:package
           npm run build:dist
+          npm run storybook:build
+      - name: Serve Storybook and run accessibility tests
+        run: |
+          npm run test:storybook
       - name: Create zip artifact
         if: github.ref == 'refs/heads/main'
         run: |

.storybook/test-runner.js

@@ -0,0 +1,21 @@
+import { injectAxe, 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 = {
+  async preVisit(page) {
+    await injectAxe(page);
+  },
+  async postVisit(page) {
+    await checkA11y(page, '#storybook-root', {
+      detailedReport: true,
+      detailedReportOptions: {
+        html: true,
+      },
+    });
+  },
+};
+
+export default config;