test: axe-coreアクセシビリティE2Eを追加#589
Conversation
Co-authored-by: Codex <noreply@openai.com>
Co-authored-by: Codex <noreply@openai.com>
Co-authored-by: Codex <noreply@openai.com>
Co-authored-by: Codex <noreply@openai.com>
Co-authored-by: Codex <noreply@openai.com>
Co-authored-by: Codex <noreply@openai.com>
Co-authored-by: Codex <noreply@openai.com>
Co-authored-by: Codex <noreply@openai.com>
Co-authored-by: Codex <noreply@openai.com>
Co-authored-by: Codex <noreply@openai.com>
Co-authored-by: Codex <noreply@openai.com>
|
No actionable comments were generated in the recent review. 🎉 ℹ️ Recent review info⚙️ Run configurationConfiguration used: Organization UI Review profile: CHILL Plan: Pro Run ID: 📒 Files selected for processing (2)
✅ Files skipped from review due to trivial changes (2)
📝 WalkthroughWalkthroughAdds axe-core Playwright accessibility scans for three pages across light and dark themes, limited to supported browser projects, and fails only on serious or critical violations. Updates the mobile menu helper, dark-mode styles, and E2E docs to match the new workflow. Changesaxe-core Accessibility E2E
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~20 minutes Possibly related PRs
Poem
🚥 Pre-merge checks | ✅ 4 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (4 passed)
✨ 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 |
Deploying with
|
| Status | Name | Latest Commit | Preview URL | Updated (UTC) |
|---|---|---|---|---|
| ✅ Deployment successful! View logs |
blog | 921785c | Commit Preview URL Branch Preview URL |
Jun 30 2026, 12:47 PM |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Warning
CodeRabbit couldn't request changes on this pull request because it doesn't have sufficient GitHub permissions.
Please grant CodeRabbit Pull requests: Read and write permission and re-run the review.
Actionable comments posted: 2
🧹 Nitpick comments (1)
docs/superpowers/specs/2026-06-30-axe-core-accessibility-e2e-design.md (1)
141-146: 📐 Maintainability & Code Quality | 🔵 Trivial | 💤 Low valueConsider clarifying the root cause of the nondeterministic failures.
The document states that transition-related
color-contrastviolations "only reproduce on light-to-dark continuous checks, not independent dark theme starts." While thegetAnimationswait is the correct fix regardless, this specific claim may be an overgeneralization from observed symptoms rather than the actual root cause. The race condition fundamentally exists wheneveropenMobileMenu()returns before CSS transitions complete, independent of theme sequence. Consider rephrasing to emphasize that the issue was diagnosed from light-to-dark runs but the fix addresses the underlying synchronization gap for all cases.🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@docs/superpowers/specs/2026-06-30-axe-core-accessibility-e2e-design.md` around lines 141 - 146, The mobile menu timing section overstates the root cause by tying the nondeterministic `color-contrast` failures too specifically to light-to-dark runs. Rephrase the explanation around the actual synchronization gap in `Header.openMobileMenu()`—it returns before the CSS transitions finish and axe can sample intermediate colors—while noting that the light-to-dark sequence was just how the issue was observed. Keep the fix description centered on waiting for `Element.getAnimations({ subtree: true })`/animation completion after `aria-expanded` changes.
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In `@docs/superpowers/plans/2026-06-30-axe-core-accessibility-e2e.md`:
- Around line 64-204: The verification step assumes testInfo.attach() writes
loose JSON files under test-results, but Playwright stores attachments in the
report output instead. Update the Step 3 instructions for accessibility.spec.ts
to verify axe-results attachments via the HTML report or configured report
directory (for example with playwright show-report), and note that CI should
inspect the reporter artifacts rather than searching test-results directly.
- Around line 19-63: The Step 3 verification for importing AxeBuilder is using a
pnpm-wrapped Node invocation that can break ESM flag handling; update the check
in the plan to use a direct Node ESM import path or a temporary .mjs script
instead. Also align the dependency version claim in the `@axe-core/playwright`
add step with the stack’s `4.12` version, and keep the guidance consistent
across `Step 2` and `Step 3` in this plan document.
---
Nitpick comments:
In `@docs/superpowers/specs/2026-06-30-axe-core-accessibility-e2e-design.md`:
- Around line 141-146: The mobile menu timing section overstates the root cause
by tying the nondeterministic `color-contrast` failures too specifically to
light-to-dark runs. Rephrase the explanation around the actual synchronization
gap in `Header.openMobileMenu()`—it returns before the CSS transitions finish
and axe can sample intermediate colors—while noting that the light-to-dark
sequence was just how the issue was observed. Keep the fix description centered
on waiting for `Element.getAnimations({ subtree: true })`/animation completion
after `aria-expanded` changes.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: Organization UI
Review profile: CHILL
Plan: Pro
Run ID: 9a9b8259-ad4b-4426-9b22-de94362d96b6
⛔ Files ignored due to path filters (1)
pnpm-lock.yamlis excluded by!**/pnpm-lock.yaml
📒 Files selected for processing (8)
docs/e2e-testing.mddocs/superpowers/plans/2026-06-30-axe-core-accessibility-e2e.mddocs/superpowers/specs/2026-06-30-axe-core-accessibility-e2e-design.mdpackage.jsonsrc/components/PostMetadata.astrosrc/pages/about.astrotests/e2e/components/header.tstests/e2e/specs/accessibility.spec.ts
Co-authored-by: Codex <noreply@openai.com>
1 participant
概要
@axe-core/playwrightを追加し、ホーム・About・代表記事をデスクトップ／モバイル、ライト／ダークで検査serious/criticalの違反だけを失敗条件とし、全12スキャンの完全なaxe結果をJSON添付背景・影響
axe-coreが機械的に判定できる重大なアクセシビリティ問題の再混入を、既存のE2E CIで検出できるようになります。
minor/moderateやincompleteもレポートへ残しつつ、CIノイズを抑えるためブロッキング対象はserious/criticalに限定しています。初回実行では、ダークテーマのメタデータ文字色が背景に対して4.17:1だったため、既存のデザイントークン
dark:text-neutral-400へ揃えて7.66:1を確保しました。また、モバイルメニューは固定sleepではなく、ヘッダー配下のanimation/transition完了を待ってから解析します。表示プレビュー
About（ダークテーマ）
記事メタデータ（ダークテーマ）
検証
pnpm exec prettier --check package.json tests/e2e/specs/accessibility.spec.ts tests/e2e/components/header.ts src/pages/about.astro src/components/PostMetadata.astro docs/e2e-testing.mdpnpm run lintpnpm exec playwright test tests/e2e/specs/accessibility.spec.ts— 6 passed / 12 skipped、JSON添付12件、serious 0 / critical 0pnpm run test:e2e— 152 passed / 28 skippedgit diff --checkCloses #566
Summary by CodeRabbit
New Features
Bug Fixes
Documentation