웹 접근성 테스트

.github/workflows/ui-test.yml

@@ -0,0 +1,44 @@
+name: 'UI-test'
+
+on:
+  pull_request:
+    branches:
+      - develop
+
+jobs:
+  accessibility-test:
+    timeout-minutes: 60
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+      - uses: actions/setup-node@v4
+        with:
+          node-version-file: '.nvmrc'
+      - name: Install dependencies
+        run: yarn
+      - name: Install Playwright
+        run: npx playwright install --with-deps
+      - name: Build Storybook
+        run: yarn build-storybook --quiet
+      - name: Serve Storybook and run tests
+        run: npx concurrently -k -s first -n "SB,TEST" -c "magenta,blue" \
+          "npx http-server storybook-static --port 6006 --silent" \
+          "npx wait-on tcp:127.0.0.1:6006 && yarn test-storybook"
+  chromatic:
+    needs: accessibility-test
+    name: Run Chromatic
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v4
+        with:
+          fetch-depth: 0
+      - uses: actions/setup-node@v4
+        with:
+          node-version: 20
+      - name: Install dependencies
+        run: npm ci
+      - name: Run Chromatic
+        uses: chromaui/action@latest
+        with:
+          projectToken: ${{ secrets.CHROMATIC_PROJECT_TOKEN }}

.nvmrc

@@ -0,0 +1 @@
+20.18.1

.storybook/main.ts

@@ -8,7 +8,8 @@ const config: StorybookConfig = {
     '@storybook/addon-essentials',
     '@chromatic-com/storybook',
     '@storybook/addon-interactions',
-    '@storybook/addon-mdx-gfm'
+    '@storybook/addon-mdx-gfm',
+    '@storybook/addon-a11y'
   ],
 
   framework: {

.storybook/preview.tsx

@@ -1,6 +1,8 @@
 import type { Preview } from '@storybook/react';
 import { ThemeProvider } from 'styled-components';
 import { defaultTheme } from '../src/style/theme';
+import { GlobalStyle } from '../src/style/global';
+
 import React from 'react';
 
 const preview: Preview = {
@@ -18,6 +20,7 @@ const preview: Preview = {
     (Story) => {
       return (
         <ThemeProvider theme={defaultTheme}>
+          <GlobalStyle />
           <Story />
         </ThemeProvider>
       );

.storybook/test-runner.ts

@@ -0,0 +1,19 @@
+import type { TestRunnerConfig } from '@storybook/test-runner';
+import { injectAxe, checkA11y } from 'axe-playwright';
+
+const config: TestRunnerConfig = {
+  async preVisit(page) {
+    await injectAxe(page);
+  },
+
+  async postVisit(page) {
+    await checkA11y(page, '#storybook-root', {
+      detailedReport: true,
+      detailedReportOptions: {
+        html: true,
+      },
+    });
+  },
+};
+
+export default config;