[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

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