ci: a11y addon in storybook (#1351)

Co-authored-by: Kezhik Kyzyl-ool <[email protected]>

.editorconfig

@@ -9,7 +9,7 @@ insert_final_newline = true
 max_line_length = 100
 trim_trailing_whitespace = true
 
-[{*.json, *.yaml, *.yml}]
+[{*.json,*.yaml,*.yml}]
 indent_size = 2
 
 [*.md]

.github/workflows/ci.yml

@@ -39,4 +39,3 @@ jobs:
       run: npm ci
     - name: Unit Tests
       run: npm run test
-

.github/workflows/pr-storybook-tests.yml

@@ -0,0 +1,25 @@
+name: PR Storybook Tests
+
+on:
+  workflow_run:
+    workflows: ['PR Preview Deploy']
+    types:
+    - completed
+
+jobs:
+  tests:
+    name: Tests
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v3
+      - uses: actions/setup-node@v3
+        with:
+          node-version: 18
+      - name: Install dependencies
+        run: npm ci
+      - name: Install Playwright Browsers
+        run: npx playwright install --with-deps
+      - name: Storybook Tests
+        env:
+          PR_PREVIEW_URL: "https://preview.gravity-ui.com/uikit/${{github.event.pull_request.number}}"
+        run: npm run test-storybook

.storybook/main.ts

@@ -13,6 +13,7 @@ const config: StorybookConfig = {
         '@storybook/preset-scss',
         {name: '@storybook/addon-essentials', options: {backgrounds: false}},
         './theme-addon/register.tsx',
+        '@storybook/addon-a11y',
     ],
 };
 

.storybook/test-runner.ts

@@ -0,0 +1,31 @@
+import type {TestRunnerConfig} from '@storybook/test-runner';
+import {getStoryContext} from '@storybook/test-runner';
+import {checkA11y, configureAxe, injectAxe} 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;