Orbit Storybook - a11y issues

.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:

.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

packages/orbit-components/.gitignore

@@ -21,3 +21,4 @@ cypress/videos
 /test-results/
 /playwright-report/
 /playwright/.cache/
+artifacts/

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
+```

packages/orbit-components/.storybook/orbitDecorator.tsx

@@ -2,6 +2,7 @@ import * as React from "react";
 import type { Decorator } from "@storybook/react";
 import jsxToString from "react-element-to-jsx-string";
 import { Highlight, themes } from "prism-react-renderer";
+import { addons } from "@storybook/preview-api";
 
 import defaultTheme from "../src/defaultTheme";
 import OrbitProvider from "../src/OrbitProvider";
@@ -15,8 +16,18 @@ const OrbitDecorator: Decorator = (storyFn, context) => {
   React.useEffect(() => {
     const html = document.querySelector("html");
     if (html && !html.getAttribute("dir")) html.setAttribute("dir", "ltr");
+    const componentForceRerender = () => {
+      // Invokes Storybook's addon API method event to trigger a UI refresh.
+      // Ensures that a11y addons is refreshed and shows the correct list of component accessibility issues.
+      console.log("Component is being rerendered.");
+      addons.getChannel().emit("forceReRender");
+    };
+
+    componentForceRerender();
     return () => {
-      if (html) html.removeAttribute("dir");
+      if (html) {
+        html.removeAttribute("dir");
+      }
     };
   }, []);
 

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;

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"
   }
 }