Merge pull request #19 from DaleStudy/18-storybook-a11y

스토리북 접근성 테스트 설정

.github/workflows/storybook-tests.yml

@@ -0,0 +1,17 @@
+name: Storybook Tests
+
+on: deployment_status
+
+jobs:
+  test-storybook:
+    runs-on: ubuntu-latest
+    timeout-minutes: 60
+    if: github.event.deployment_status.environment == 'chromatic' && github.event.deployment_status.state == 'success'
+    steps:
+      - uses: actions/checkout@v4
+      - uses: oven-sh/setup-bun@v2
+      - run: bun install
+      - run: bunx playwright install --with-deps
+      - run: bun run test-storybook
+        env:
+          TARGET_URL: "${{ github.event.deployment_status.environment_url }}"

.storybook/main.ts

@@ -7,6 +7,7 @@ const config: StorybookConfig = {
     "@storybook/addon-essentials",
     "@chromatic-com/storybook",
     "@storybook/addon-interactions",
+    "@storybook/addon-a11y"
   ],
   framework: {
     name: "@storybook/react-vite",

.storybook/test-runner.ts

@@ -0,0 +1,33 @@
+import type { TestRunnerConfig } from "@storybook/test-runner";
+import { getStoryContext } from "@storybook/test-runner";
+
+import { injectAxe, checkA11y, configureAxe } 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, context) {
+    // Get the entire context of a story, including parameters, args, argTypes, etc.
+    const storyContext = await getStoryContext(page, context);
+
+    // Apply story-level a11y rules
+    await configureAxe(page, {
+      rules: storyContext.parameters?.a11y?.config?.rules,
+    });
+
+    const element = storyContext.parameters?.a11y?.element ?? "#storybook-root";
+    await checkA11y(page, element, {
+      detailedReport: true,
+      detailedReportOptions: {
+        html: true,
+      },
+    });
+  },
+};
+
+export default config;