test: configure stricter a11y rules

.github/workflows/ci.yml

@@ -17,7 +17,6 @@ jobs:
           cache: "pnpm"
           registry-url: "https://registry.npmjs.org"
       - run: pnpm install
-      - run: pnpm exec playwright install --with-deps
       - run: pnpm run build
       - run: pnpm run lint:report
       - run: pnpm run test:report

apps/docs/.eslintignore

@@ -2,3 +2,4 @@ node_modules
 .turbo
 storybook-static
 reports
+!.storybook

apps/docs/.storybook/main.ts

@@ -10,28 +10,19 @@ const config: StorybookConfig = {
     getAbsolutePath("@storybook/addon-a11y"),
   ],
   framework: {
-    name: getAbsolutePath("@storybook/react-vite"),
+    name: "@storybook/react-vite",
     options: {},
   },
   docs: {
     autodocs: "tag",
   },
-  typescript: {
-    reactDocgen: "react-docgen-typescript",
-    reactDocgenTypescriptOptions: {
-      shouldExtractLiteralValuesFromEnum: true,
-      shouldRemoveUndefinedFromOptional: true,
-      propFilter: (prop) =>
-        prop.parent ? !/node_modules/.test(prop.parent.fileName) : true,
-    },
-  },
 };
 
 /**
  * This function is used to resolve the absolute path of a package.
  * It is needed in projects that use Yarn PnP or are set up within a monorepo.
  */
-function getAbsolutePath(value: string): any {
+function getAbsolutePath(value: string): string {
   return dirname(require.resolve(join(value, "package.json")));
 }
 

apps/docs/.storybook/preview.ts

@@ -1,6 +1,28 @@
+import type { A11yParameters } from "@storybook/addon-a11y";
 import type { Preview } from "@storybook/react";
+import { Rule, getRules } from "axe-core";
 import "../node_modules/@themeless-ui/style/dist/index.css";
 
+const enabledTags = [
+  "wcag2a",
+  "wcag2aa",
+  "wcag21a",
+  "wcag21aa",
+  "wcag22aa",
+  "best-practice",
+];
+
+const enabledRules: Rule[] = getRules(enabledTags).map((ruleMetadata) => ({
+  id: ruleMetadata.ruleId,
+  enabled: true,
+}));
+
+const a11y: A11yParameters = {
+  config: {
+    rules: enabledRules,
+  },
+};
+
 const preview: Preview = {
   parameters: {
     options: {
@@ -22,6 +44,7 @@ const preview: Preview = {
         date: /Date$/,
       },
     },
+    a11y,
   },
 };
 

apps/docs/.storybook/test-runner.ts

@@ -1,14 +1,17 @@
-/* eslint-disable @typescript-eslint/no-var-requires */
-const { injectAxe, checkA11y, configureAxe } = require("axe-playwright");
-const { getStoryContext } = require("@storybook/test-runner");
+import { TestRunnerConfig, getStoryContext } from "@storybook/test-runner";
+import { checkA11y, configureAxe, injectAxe } from "axe-playwright";
 
-const config = {
-  async preRender(page) {
+const config: TestRunnerConfig = {
+  async preVisit(page) {
     await injectAxe(page);
   },
-  async postRender(page, context) {
+  async postVisit(page, context) {
     const storyContext = await getStoryContext(page, context);
 
+    if (storyContext.parameters?.a11y?.disable) {
+      return;
+    }
+
     await configureAxe(page, {
       rules: storyContext.parameters?.a11y?.config?.rules,
     });
@@ -19,8 +22,9 @@ const config = {
       detailedReportOptions: {
         html: true,
       },
+      axeOptions: storyContext.parameters?.a11y?.options,
     });
   },
 };
 
-module.exports = config;
+export default config;

apps/docs/package.json

@@ -26,11 +26,12 @@
     "preview": "serve storybook-static",
     "test": "pnpm run test:storybook:standalone",
     "test:report": "pnpm run test:storybook:standalone:report",
-    "test:storybook": "test-storybook",
-    "test:storybook:watch": "test-storybook --watch",
-    "test:storybook:report": "JEST_JUNIT_OUTPUT_FILE=./reports/test-report-storybook.xml test-storybook --junit",
-    "test:storybook:standalone": "concurrently -k -s first -n SB,TEST -c magenta,blue \"pnpm run build --quiet && npx serve -Lp 6006 storybook-static\" \"wait-on tcp:6006 && pnpm run test:storybook\"",
-    "test:storybook:standalone:report": "concurrently -k -s first -n SB,TEST -c magenta,blue \"pnpm run build --quiet && npx serve -Lp 6006 storybook-static\" \"wait-on tcp:6006 && pnpm run test:storybook:report\"",
+    "test:storybook:prepare": "pnpm exec playwright install --with-deps",
+    "test:storybook": "pnpm run test:storybook:prepare && test-storybook",
+    "test:storybook:watch": "pnpm run test:storybook:prepare && test-storybook --watch",
+    "test:storybook:report": "pnpm run test:storybook:prepare && JEST_JUNIT_OUTPUT_FILE=./reports/test-report-storybook.xml test-storybook --junit",
+    "test:storybook:standalone": "pnpm run test:storybook:prepare && concurrently -k -s first -n SB,TEST -c magenta,blue \"pnpm run build --quiet && pnpm exec serve -Lp 6006 storybook-static\" \"wait-on tcp:6006 && pnpm run test:storybook\"",
+    "test:storybook:standalone:report": "pnpm run test:storybook:prepare && concurrently -k -s first -n SB,TEST -c magenta,blue \"pnpm run build --quiet && pnpm exec serve -Lp 6006 storybook-static\" \"wait-on tcp:6006 && pnpm run test:storybook:report\"",
     "lint": "pnpm run lint:tsc && pnpm run lint:eslint",
     "lint:report": "pnpm run lint:tsc:report && pnpm run lint:eslint:report",
     "lint:fix": "pnpm run lint:eslint:fix",
@@ -49,25 +50,26 @@
     "react-dom": "18.2.0"
   },
   "devDependencies": {
-    "@storybook/addon-a11y": "7.5.2",
-    "@storybook/addon-essentials": "7.5.2",
-    "@storybook/addon-interactions": "7.5.2",
-    "@storybook/addon-links": "7.5.2",
-    "@storybook/blocks": "7.5.2",
-    "@storybook/react-vite": "7.5.2",
-    "@storybook/react": "7.5.2",
-    "@storybook/test-runner": "0.13.0",
-    "@storybook/testing-library": "0.2.2",
+    "@storybook/addon-a11y": "7.5.3",
+    "@storybook/addon-essentials": "7.5.3",
+    "@storybook/addon-interactions": "7.5.3",
+    "@storybook/addon-links": "7.5.3",
+    "@storybook/blocks": "7.5.3",
+    "@storybook/react": "7.5.3",
+    "@storybook/react-vite": "7.5.3",
+    "@storybook/test-runner": "0.15.2",
     "@themeless-ui/eslint-config": "workspace:*",
     "@themeless-ui/typescript-config": "workspace:*",
-    "@types/react-dom": "18.2.14",
     "@types/react": "18.2.33",
+    "@types/react-dom": "18.2.14",
+    "axe-core": "4.8.2",
     "axe-playwright": "1.2.3",
     "concurrently": "8.2.2",
     "eslint": "8.52.0",
     "serve": "14.2.1",
-    "storybook": "7.5.2",
+    "storybook": "7.5.3",
     "typescript": "5.2.2",
-    "vite": "4.5.0"
+    "vite": "4.5.0",
+    "wait-on": "7.2.0"
   }
 }

apps/nextjs-example/package.json

@@ -27,10 +27,11 @@
     "preview": "next start -p 3011",
     "test": "pnpm run test:playwright",
     "test:report": "pnpm run test:playwright:report",
-    "test:playwright": "PLAYWRIGHT_HTML_REPORT=./reports/test-report-playwright playwright test --reporter=html",
-    "test:playwright:ui": "playwright test --ui",
-    "test:playwright:show": "playwright show-report ./reports/test-report-playwright",
-    "test:playwright:report": "PLAYWRIGHT_JUNIT_OUTPUT_NAME=./reports/test-report-playwright.xml playwright test --reporter junit",
+    "test:playwright:prepare": "pnpm exec playwright install --with-deps",
+    "test:playwright": "pnpm run test:playwright:prepare && PLAYWRIGHT_HTML_REPORT=./reports/test-report-playwright playwright test --reporter=html",
+    "test:playwright:ui": "pnpm run test:playwright:prepare && playwright test --ui",
+    "test:playwright:show": "pnpm run test:playwright:prepare && playwright show-report ./reports/test-report-playwright",
+    "test:playwright:report": "pnpm run test:playwright:prepare && PLAYWRIGHT_JUNIT_OUTPUT_NAME=./reports/test-report-playwright.xml playwright test --reporter junit",
     "lint": "pnpm run lint:tsc && pnpm run lint:eslint && pnpm run lint:stylelint",
     "lint:report": "pnpm run lint:tsc:report && pnpm run lint:eslint:report && pnpm run lint:stylelint:report",
     "lint:fix": "pnpm run lint:eslint:fix && pnpm run lint:stylelint:fix",