[CL-301] Enable Storybook test runner. Run a11y tests also (#14646)

* Enable Storybook test runner. Run a11y tests also

* no need to return checkA11y function

* add back decorator removed in error

* add test runner to our ownership

* add axe-playwright to our ownership

.github/renovate.json5

@@ -312,6 +312,7 @@
         "@angular/platform-browser",
         "@angular/platform",
         "@angular/router",
+        "axe-playwright",
         "@compodoc/compodoc",
         "@ng-select/ng-select",
         "@storybook/addon-a11y",
@@ -320,6 +321,7 @@
         "@storybook/addon-essentials",
         "@storybook/addon-interactions",
         "@storybook/addon-links",
+        "@storybook/test-runner",
         "@storybook/addon-themes",
         "@storybook/angular",
         "@storybook/manager-api",

.storybook/preview.tsx

@@ -26,6 +26,13 @@ const preview: Preview = {
     wrapperDecorator,
   ],
   parameters: {
+    a11y: {
+      element: "#storybook-root",
+      manual: true,
+      options: {
+        runOnly: ["section508", "wcag2a", "wcag2aa", "wcag21a", "wcag21aa", "wcag22aa"],
+      },
+    },
     controls: {
       matchers: {
         color: /(background|color)$/i,

.storybook/test-runner.ts

@@ -0,0 +1,50 @@
+import {
+  //   waitForPageReady,
+  type TestRunnerConfig,
+} from "@storybook/test-runner";
+import { injectAxe, checkA11y } from "axe-playwright";
+
+const testRunnerConfig: TestRunnerConfig = {
+  setup() {},
+
+  async preVisit(page, context) {
+    return await injectAxe(page);
+  },
+
+  async postVisit(page, context) {
+    await page.waitForSelector("#storybook-root");
+    // https://github.com/abhinaba-ghosh/axe-playwright#parameters-on-checka11y-axerun
+    await checkA11y(
+      // Playwright page instance.
+      page,
+
+      // context
+      "#storybook-root",
+
+      // axeOptions, see https://www.deque.com/axe/core-documentation/api-documentation/#parameters-axerun
+      {
+        detailedReport: true,
+        detailedReportOptions: {
+          // Includes the full html for invalid nodes
+          html: true,
+        },
+        verbose: false,
+      },
+
+      // skipFailures
+      false,
+
+      // reporter "v2" is terminal reporter, "html" writes results to file
+      "v2",
+
+      // axeHtmlReporterOptions
+      // NOTE: set reporter param (above) to "html" to activate these options
+      {
+        outputDir: "reports/a11y",
+        reportFileName: `${context.id}.html`,
+      },
+    );
+  },
+};
+
+export default testRunnerConfig;

package.json

@@ -28,6 +28,8 @@
     "storybook": "ng run components:storybook",
     "build-storybook": "ng run components:build-storybook",
     "build-storybook:ci": "ng run components:build-storybook --webpack-stats-json",
+    "test-stories": "test-storybook --url http://localhost:6006",
+    "test-stories:watch": "test-stories --watch",
     "postinstall": "patch-package"
   },
   "workspaces": [
@@ -53,6 +55,7 @@
     "@storybook/addon-essentials": "8.6.12",
     "@storybook/addon-interactions": "8.6.12",
     "@storybook/addon-links": "8.6.12",
+    "@storybook/test-runner": "0.22.0",
     "@storybook/addon-themes": "8.6.12",
     "@storybook/angular": "8.6.12",
     "@storybook/manager-api": "8.6.12",
@@ -85,6 +88,7 @@
     "@yao-pkg/pkg": "5.16.1",
     "angular-eslint": "18.4.3",
     "autoprefixer": "10.4.21",
+    "axe-playwright": "2.1.0",
     "babel-loader": "9.2.1",
     "base64-loader": "1.0.0",
     "browserslist": "4.23.2",

tsconfig.eslint.json

@@ -45,6 +45,7 @@
   "files": [
     ".storybook/main.ts",
     ".storybook/manager.js",
+    ".storybook/test-runner.ts",
     "apps/browser/src/autofill/content/components/.lit-storybook/main.ts"
   ],
   "include": ["apps/**/*", "libs/**/*", "bitwarden_license/**/*", "scripts/**/*"],