docs: アクセシビリティテストとバンドルサイズ監視を追加 - #528
Conversation
## アクセシビリティテスト (web-app-nextjs.md) - @axe-core/playwright: E2E での WCAG 違反検出、ページ単位のテスト例を追加 - jest-axe: ユニットテストでのコンポーネント単位 a11y チェック例を追加 - E2E とユニットの責務の使い分けを明記 ## バンドルサイズ監視 (web-app-nextjs.md) - @next/bundle-analyzer: next.config.ts の設定例を追加 - ANALYZE=true でブラウザにバンドルツリーを表示するスクリプトを追加 - CI でのアーティファクト保存パターンを追加 ## CI/CD パイプライン (web-app-nextjs.md) - フロー図に a11y と bundle チェックを追記 ## ツールカタログ (tool-catalog.md) - Web アプリ (Next.js) の依存リストに両ツールを追加 Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
|
Warning Rate limit exceeded
⌛ How to resolve this issue?After the wait time has elapsed, a review can be triggered using the We recommend that you space out your commits to avoid hitting the rate limit. 🚦 How do rate limits work?CodeRabbit enforces hourly rate limits for each developer per organization. Our paid plans have higher rate limits than the trial, open-source and free plans. In all cases, we re-allow further reviews after a brief timeout. Please see our FAQ for further information. ⚙️ Run configurationConfiguration used: defaults Review profile: CHILL Plan: Pro Run ID: 📒 Files selected for processing (2)
✨ Finishing Touches🧪 Generate unit tests (beta)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
![chatgpt-codex-connector[bot]](https://avatars.githubusercontent.com/in/1144995?s=60&v=4){kind=small}
There was a problem hiding this comment.
💡 Codex Review
Here are some automated review suggestions for this pull request.
Reviewed commit: 8d8877ca69
ℹ️ About Codex in GitHub
Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you
- Open a pull request for review
- Mark a draft as ready
- Comment "@codex review".
If Codex has suggestions, it will comment; otherwise it will react with 👍.
Codex can also answer questions or update the PR. Try commenting "@codex address that feedback".
|
|
||
| test.describe('アクセシビリティ', () => { | ||
| test('トップページに WCAG 違反がないこと', async ({ page }) => { | ||
| await page.goto('/'); |
There was a problem hiding this comment.
The new accessibility example navigates with page.goto('/'), but this guide’s playwright.config.ts snippet does not set use.baseURL, so copying this as-is causes the test to fail with an invalid URL instead of running axe checks. This breaks the documented a11y workflow for any project that follows the provided config verbatim.
Useful? React with 👍 / 👎.
| - name: Build and check bundle size | ||
| run: npm run build | ||
| env: | ||
| NEXT_TELEMETRY_DISABLED: 1 |
There was a problem hiding this comment.
This CI snippet runs npm run build without enabling ANALYZE, even though the preceding config enables @next/bundle-analyzer only when process.env.ANALYZE === 'true'. In that case .next/analyze/ is not generated, so the artifact upload does not provide the promised bundle report and the “bundle check” step is effectively a normal build.
Useful? React with 👍 / 👎.
Claude Code レビューPRをレビューしました。以下にフィードバックをまとめます。 全体評価ドキュメント品質の向上という観点で価値ある変更です。アクセシビリティテストとバンドルサイズ監視の両方を実践的なコード例付きで解説しており、開発者がすぐに導入できる形になっています。 良い点
改善提案1. トップページのA11yテストで withTags を省略している2つのテストで withTags の有無が異なります。意図的な差異なら理由を補足コメントで説明すると読者の混乱を防げます。推奨は .withTags(['wcag2a', 'wcag2aa']) で統一することです。 2. jest-axe の expect.extend はセットアップファイルで行うサンプルコードでは各テストファイルに expect.extend(toHaveNoViolations) を記載しています。実際のプロジェクトでは jest.setup.ts などのセットアップファイルで1度だけ呼ぶパターンが一般的です。ドキュメントにその推奨パターンも補足すると実用度が上がります。 3. バンドルアナライザーのCIアーティファクトパスが不正確な可能性path: .next/analyze/ と記載されていますが、@next/bundle-analyzer のデフォルト出力先は .next/analyze/ ではなく .next/ 直下の client.html / server.html です。enabled 時に生成されるパスを確認し、正確なパスを記載することを推奨します。 4. Windows環境でのenvコマンド非互換ANALYZE=true npm run build の形式はWindows上では動作しません。クロスプラットフォーム対応として cross-env の使用を推奨するか、その限界を明示するとよいです。 セキュリティ・品質ゲート観点特筆すべき問題はありません。サンプルコードに認証情報や機密値も含まれていません。 総括ドキュメントとして実用的な内容で、マージに値する品質です。上記の改善提案は次のPR or Issue で対応いただければ十分です。 🤖 Reviewed with Claude Code |
|
🎉 This PR is included in version 1.83.0 🎉 The release is available on GitHub release Your semantic-release bot 📦🚀 |
1 participant
概要
品質保証の観点から、アクセシビリティテストとバンドルサイズ監視をNext.jsセットアップガイドに追加します。
変更内容
アクセシビリティテスト（E2E + ユニット）
@axe-core/playwright: 既存の Playwright テストに数行追加するだけで WCAG 違反を検出tests/e2e/accessibility.spec.tsの実装例を追加wcag2a/wcag2aaタグでの絞り込みパターンを記載jest-axe: Testing Library と組み合わせてコンポーネント単位で a11y チェックバンドルサイズ監視
@next/bundle-analyzer:next.config.tsの設定例を追加ANALYZE=true npm run buildでブラウザにバンドルツリーを表示CI/CD パイプライン
a11yとbundle checkを追記ツールカタログ
@axe-core/playwright・jest-axe・@next/bundle-analyzerを追加テスト
🤖 Generated with Claude Code