axe-coreの検出レベルを全深刻度に引き上げ、a11yを継続的に担保できるようにしました

import {getStoryContext, type TestRunnerConfig} from '@storybook/test-runner';
import {injectAxe, checkA11y, configureAxe} from 'axe-playwright';

const config: TestRunnerConfig = {
  async preVisit(page) {
    await injectAxe(page);
  },
  async postVisit(page, context) {
    // ストーリーのコンテキストを取得
    const storyContext = await getStoryContext(page, context);

    // a11yが無効化されているストーリーはスキップ
    if (storyContext.parameters?.a11y?.disable === true) {
      return;
    }

    // ストーリーレベルのa11yルールを適用
    await configureAxe(page, {
      rules: storyContext.parameters?.a11y?.config?.rules,
    });

    await checkA11y(page, '#storybook-root', {
	    // criticalのみを対象にする
      includedImpacts: ['critical'],
      detailedReport: false,
      verbose: false,
      axeOptions: storyContext.parameters?.a11y?.options,
    });
  },
};

export default config;

 import {
  expect as baseExpect,
  type Page,
} from '@playwright/test';
import AxeBuilder from '@axe-core/playwright';

 export const expect = baseExpect.extend({
    async toPassA11y(page: Page) {
      const results = await new AxeBuilder({page})
        .analyze();

      // エラーメッセージのフォーマット処理（30-40行）
      // ...
    },
  });

// .storybook/main.ts
export default {
  addons: [
    '@storybook/addon-a11y',  // a11y addonを追加
  ],
};

// .storybook/preview.tsx
export const parameters = {
  a11y: {
    config: {
      rules: [
        {
          id: 'color-contrast',
          enabled: false, // デザイナーとの調整が必要なため一時的に無効化
        },
      ],
    },
    test: 'error', // a11yエラーをテスト失敗として扱う
  },
};

# .github/workflows/prtimes-ci.yaml（抜粋）
storybook:
  timeout-minutes: 20
  steps:
    - name: Checkout
      uses: actions/checkout@v5

    # 変更の影響があるstoriesを検出
    - name: Detect affected stories
      id: affected
      run: # 影響範囲検出ロジック

    - name: Build Storybook
      if: steps.affected.outputs.tests != ''
      run: pnpm sb:build

    - name: Install Playwright
      if: steps.affected.outputs.tests != ''
      run: pnpm exec playwright install --with-deps chromium

    # Vitest Addonでa11yテスト実行
    - name: Test Storybook
      if: steps.affected.outputs.tests != ''
      run: pnpm run sb:vitest:ci

export const SkipA11y: Story = {
  parameters: {
    a11y: {
      disable: true,
    },
  },
};

export const SkipColorContrast: Story = {
  parameters: {
    a11y: {
      config: {
        rules: [
          { id: 'color-contrast', enabled: false },
        ],
      },
    },
  },
};

  // 修正前
  <div className={styles.catalog}>
    <header className={styles.header}>
      <span className={styles.planGroupName}>定額制</span>
      <span className={styles.unit}>30配信 / 月</span>
    </header>
    <div className={styles.body}>
      {/* プランカード */}
    </div>
  </div>

 // 修正後
  <div className={styles.catalog}>
    <div className={styles.header}>
      <span className={styles.planGroupName}>定額制</span>
      <span className={styles.unit}>30配信 / 月</span>
    </div>
    <div className={styles.body}>
      {/* プランカード */}
    </div>
  </div>

 // 修正前
  <img
    src={getIconUrl(menu, isItemHeighlight(menu))}
    alt={sideMenus[menu].name}
    width={44}
    height={44}
  />
  <span className={styles.itemName}>
    {sideMenus[menu].name}
  </span>

 // 修正後
  <img
    src={getIconUrl(menu, isItemHeighlight(menu))}
    alt=""
    width={44}
    height={44}
  />
  <span className={styles.itemName}>
    {sideMenus[menu].name}
  </span>

  // 修正前
  <button
    type='button'
    {...getRootProps()}  // react-dropzoneのprops
    className={styles.root}
    onClick={open}
  >
    {/* コンテンツ */}
  </button>

 // 修正後
  <div
    {...getRootProps()}  // react-dropzoneのrole="presentation"と競合しない
    className={styles.root}
    onClick={open}
    }}
  >
    {/* コンテンツ */}
  </div>