chore: add a11y rules to Storybook

kiwicom · Nov 1, 2024 · bd09a80 · bd09a80
1 parent 208fe61
commit bd09a80
Show file tree

Hide file tree

Showing 9 changed files with 1,370 additions and 43 deletions.
diff --git a/.github/workflows/test.yml b/.github/workflows/test.yml
@@ -126,7 +126,7 @@ jobs:
     name: Visual Regression Tests
     runs-on: ubuntu-latest
     container:
-      image: mcr.microsoft.com/playwright:v1.44.1-jammy
+      image: mcr.microsoft.com/playwright:v1.48.2-jammy
     strategy:
       fail-fast: false
       matrix:

diff --git a/.github/workflows/update-visual-tests.yml b/.github/workflows/update-visual-tests.yml
@@ -12,7 +12,7 @@ jobs:
   update-visual-tests:
     runs-on: ubuntu-latest
     container:
-      image: mcr.microsoft.com/playwright:v1.44.1-jammy
+      image: mcr.microsoft.com/playwright:v1.48.2-jammy
     steps:
       - name: Checkout
         uses: actions/checkout@v4

diff --git a/packages/orbit-components/.gitignore b/packages/orbit-components/.gitignore
@@ -21,3 +21,4 @@ cypress/videos
 /test-results/
 /playwright-report/
 /playwright/.cache/
+artifacts/
diff --git a/packages/orbit-components/.storybook/README.md b/packages/orbit-components/.storybook/README.md
@@ -0,0 +1,27 @@
+# About
+
+Storybook included the list of Orbit components.
+
+URL: https://kiwicom.github.io/orbit/
+
+## Run
+
+**Install dependencies:**
+
+```
+yarn install
+```
+
+**Run Storybook:**
+
+```
+yarn storybook
+```
+
+**Run a11y tests:**
+
+This will run test-runner script and generates HTML files with the list of a11y issues. Be aware that the local storybook server must be running as well (`yarn storybook`).
+
+```
+yarn test-storybook
+```
diff --git a/packages/orbit-components/.storybook/orbitDecorator.tsx b/packages/orbit-components/.storybook/orbitDecorator.tsx
@@ -51,7 +51,8 @@ const OrbitDecorator: Decorator = (storyFn, context) => {
         <Text spaceAfter="largest" type={inverted ? "white" : "primary"}>
           {context.parameters?.info}
         </Text>
-        {children}
+        {/* eslint-disable-next-line tailwindcss/no-custom-classname */}
+        <div className="story-content">{children}</div>
         <div dir="ltr" className="mt-600 relative">
           <Tile>
             <Highlight theme={themes.vsLight} code={code} language="tsx">

diff --git a/packages/orbit-components/.storybook/preview.ts b/packages/orbit-components/.storybook/preview.ts
@@ -29,6 +29,9 @@ const preview: Preview = {
   decorators: [orbitDecorator],
   parameters: {
     viewport: { viewports },
+    a11y: {
+      element: ".story-content",
+    },
   },
 };
 

diff --git a/packages/orbit-components/.storybook/test-runner.ts b/packages/orbit-components/.storybook/test-runner.ts
@@ -0,0 +1,32 @@
+import type { TestRunnerConfig } from "@storybook/test-runner";
+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: TestRunnerConfig = {
+  async preVisit(page) {
+    await injectAxe(page);
+  },
+  async postVisit(page, story) {
+    const fileName = story.name.replace(/\s+/g, "");
+    await checkA11y(
+      page,
+      ".story-content",
+      {
+        detailedReport: true,
+        detailedReportOptions: {
+          html: true,
+        },
+      },
+      undefined,
+      "html",
+      {
+        reportFileName: `${fileName}-result.html`,
+      },
+    );
+  },
+};
+
+export default config;
diff --git a/packages/orbit-components/package.json b/packages/orbit-components/package.json
@@ -11,6 +11,7 @@
   },
   "scripts": {
     "storybook": "storybook dev -p 6007 -c .storybook --ci",
+    "test-storybook": "test-storybook --url http://127.0.0.1:6007",
     "cy:dev": "vite cypress/integration --logLevel silent",
     "cy:run": "start-server-and-test cy:dev http-get://localhost:3000 'cypress run'",
     "cy:open": "start-server-and-test cy:dev http-get://localhost:3000 'cypress open'",
@@ -89,7 +90,7 @@
     "@emotion/core": "^11.0.0",
     "@nanostores/react": "^0.2.0",
     "@nanostores/router": "^0.3.1",
-    "@playwright/experimental-ct-react": "^1.44.1",
+    "@playwright/experimental-ct-react": "^1.48.1",
     "@size-limit/webpack-why": "^11.1.4",
     "@storybook/addon-a11y": "^8.2.4",
     "@storybook/addon-controls": "^8.2.4",
@@ -102,6 +103,7 @@
     "@storybook/react-webpack5": "^8.2.4",
     "@storybook/storybook-deployer": "^2.8.16",
     "@storybook/theming": "^8.2.1",
+    "@storybook/test-runner": "^0.19.1",
     "@svgr/core": "^6.3.1",
     "@svgr/plugin-jsx": "^6.3.1",
     "@svgr/plugin-prettier": "^6.3.1",
@@ -142,6 +144,8 @@
     "ttf2woff2": "^4.0.1",
     "vite": "^4.5.5",
     "webpack": "^5.94.0",
-    "webpack-cli": "^5.1.4"
+    "webpack-cli": "^5.1.4",
+    "axe-playwright": "^2.0.3",
+    "@playwright/test": "^1.44.1"
   }
 }