chore(storybook): Restrict a11y rules on Storybook

packages/sit-onyx/.storybook/preview.ts

@@ -7,12 +7,21 @@ import { onyxThemeGlobalType, withOnyxTheme } from "./theme-switch";
 import "@fontsource-variable/source-code-pro";
 import "@fontsource-variable/source-sans-3";
 import "@sit-onyx/storybook-utils/style.css";
+import { getRules, Spec } from "axe-core";
+import { a11yTags } from "../src/a11yConfig";
 import "../src/styles/index.scss";
 import "./docs-template.scss";
 import { enhanceFormInjectedSymbol } from "./formInjected";
 import { enhanceManagedSymbol } from "./managed";
 import { withOnyxVModelDecorator } from "./vModel";
 
+const enabledRules = getRules(a11yTags).map((ruleMetadata) => ({
+  id: ruleMetadata.ruleId,
+  enabled: true,
+}));
+
+const axeConfig: Spec = { rules: enabledRules };
+
 const basePreview = createPreview({
   argTypesEnhancers: [enhanceManagedSymbol, enhanceFormInjectedSymbol],
   parameters: {
@@ -24,6 +33,9 @@ const basePreview = createPreview({
         headingSelector: ".sb-anchor > h3, #properties-events-and-slots, #examples",
       },
     },
+    a11y: {
+      config: axeConfig,
+    },
   },
   globalTypes: {
     ...onyxThemeGlobalType,

packages/sit-onyx/package.json

@@ -53,6 +53,7 @@
     "@sit-onyx/shared": "workspace:^",
     "@storybook/addon-a11y": "^8.3.5",
     "@vue/compiler-dom": "catalog:",
+    "axe-core": "^4.10.0",
     "eslint-plugin-vue-scoped-css": "^2.8.1",
     "sass-embedded": "catalog:",
     "vue": "catalog:",

packages/sit-onyx/src/a11yConfig.ts

@@ -0,0 +1 @@
+export const a11yTags = ["wcag2a", "wcag2aa", "wcag21a", "wcag21aa"];

packages/sit-onyx/src/playwright/a11y.ts

@@ -1,5 +1,6 @@
 import AxeBuilder from "@axe-core/playwright";
 import { test as base } from "@playwright/experimental-ct-vue";
+import { a11yTags } from "../a11yConfig";
 
 export { expect } from "@playwright/experimental-ct-vue";
 
@@ -17,7 +18,7 @@ type AxeFixture = {
 export const test: ReturnType<typeof base.extend<AxeFixture>> = base.extend<AxeFixture>({
   makeAxeBuilder: async ({ page }, use) => {
     const makeAxeBuilder = () => {
-      return new AxeBuilder({ page }).withTags(["wcag2a", "wcag2aa", "wcag21a", "wcag21aa"]);
+      return new AxeBuilder({ page }).withTags(a11yTags);
     };
 
     await use(makeAxeBuilder);

packages/sit-onyx/tsconfig.node.json

@@ -7,7 +7,7 @@
     "playwright.config.*",
     "package.json",
     ".storybook/*.ts",
-    "src/index.ts"
+    "src/a11yConfig.ts"
   ],
   "compilerOptions": {
     "composite": true,