fix(a11y): resolve Lighthouse accessibility failures on /pricing#30
Merged
Conversation
Three of four axe findings weren't addressed by the earlier color- contrast fix (PR #23): the skip link's target (#main-content) didn't exist on this page, and the tier cards' h3 titles followed the page h1 directly with no h2 in between. Add the missing id and an accessible (visually-hidden) h2 so heading order stays sequential without a redundant on-page label. Verified with the same tool CI uses (lhci autorun against .lighthouserc.json, 3 runs x 4 URLs): all assertions pass, including a perfect 1.0 accessibility score on /pricing (up from 0.92). Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_013kiWYYyCeGgYrKhD8prjqa
|
No actionable comments were generated in the recent review. 🎉 ℹ️ Recent review info⚙️ Run configurationConfiguration used: defaults Review profile: CHILL Plan: Pro Plus Run ID: 📒 Files selected for processing (1)
🚧 Files skipped from review as they are similar to previous changes (1)
📝 WalkthroughWalkthroughThe Pricing page now has an explicit ChangesPricing accessibility
Estimated code review effort: 1 (Trivial) | ~3 minutes 🚥 Pre-merge checks | ✅ 5✅ Passed checks (5 passed)
✨ Finishing Touches🧪 Generate unit tests (beta)
Comment |
There was a problem hiding this comment.
Actionable comments posted: 1
🤖 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 `@src/styles/globals.css`:
- Around line 286-298: Update the .visually-hidden rule by replacing the
deprecated clip declaration with clip-path: inset(50%), preserving the existing
visually hidden and screen-reader-accessible behavior while satisfying
Stylelint.
🪄 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: defaults
Review profile: CHILL
Plan: Pro Plus
Run ID: 6ea569ed-9c99-457b-8303-057d993fba1b
📒 Files selected for processing (2)
src/app/(public)/pricing/page.tsxsrc/styles/globals.css
Stylelint flags clip: rect() as deprecated (property-no-deprecated). clip-path: inset(50%) is the modern equivalent — same visual/screen- reader behavior, no lint warning. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_013kiWYYyCeGgYrKhD8prjqa
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
/pricingscored 0.92 accessibility against a 0.95 threshold..tierEyebrow/.bulletLiveswitched from low-contrastvar(--accent)tovar(--ink-700)/var(--ink-900)), but two more axe findings on the same page were still unaddressed:#main-contentdidn't exist anywhere on/pricing, so keyboard users' "Skip to main content" link had nothing to focus.<h1>was followed directly by the tier cards'<h3>(via the sharedCardTitlecomponent), skipping<h2>.id="main-content"to the page's<main>(matches the pattern already used on every other route), and insert a visually-hidden<h2>before the tier grid so heading levels stay sequential without a redundant on-page label. Added a reusable.visually-hiddenutility toglobals.cssfor this.Test plan
pnpm install+prisma generate+tsc --noEmit— zero errorseslint .— zero errors (pre-existing warnings unrelated to this change)pnpm test:coverage— 200/200 tests, all coverage thresholds passlhci autorunagainst.lighthouserc.json(same tool/config CI uses, 3 runs × 4 URLs) — all assertions pass;/pricingaccessibility is now 1.0 (was 0.92)🤖 Generated with Claude Code
https://claude.ai/code/session_013kiWYYyCeGgYrKhD8prjqa
Generated by Claude Code
Summary by CodeRabbit