fix(frontend): WCAG-AA secondary-text contrast + FilterDrawer chip touch target#356
Merged
Conversation
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
…uch target $impeccable critique re-run follow-up. Normalize the too-light secondary-text token text-slate-400 dark:text-slate-500 (fails WCAG AA in both modes: ~2.6:1 light / ~3.75:1 dark) to the project standard text-slate-500 dark:text-slate-400 (~4.8:1 / ~7:1) across 16 components/pages. Add min-h-[44px] lg:min-h-0 to the FilterDrawer selection chips (the touch target #355 missed). Flip the detail-page price-chart placeholder text to the standard token. Verified: tsc --noEmit clean + next build 506 routes. slate-* is outside the globals.css soft-override allowlist so contrast is on raw hex; disabled controls + decorative aria-hidden icons correctly left faint. No compute/schema/scoring change. https://claude.ai/code/session_012xxKfyR939bZDmbxxqMFZi
… decorative-icon aria-hidden frontend-design-reviewer follow-up on the secondary-text contrast PR. RawMetricsTable hint + missing-value text on the even:bg-slate-100 stripe was 4.34:1 (slate-500) — bumped to slate-600 (~6.85:1) to clear WCAG AA on the darker row; white/odd rows already passed. Added aria-hidden="true" to the two decorative search-icon SVGs (RankingTable + FilterDrawer). Verified tsc clean + next build 506 routes. https://claude.ai/code/session_012xxKfyR939bZDmbxxqMFZi
dackclup
force-pushed
the
claude/sharp-newton-8pj6p
branch
from
09146ac to
33e8e2a
Compare
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
2 participants
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.
What
Follow-up from a fresh
$impeccable critiquere-run (two independent assessments: design-director review + real-browser persona pass + the bundled detector). The re-critique held at 27/40 Nielsen + 16/20 audit — the #355 P1 blockers (FilterDrawer focus-trap + primary touch targets) are confirmed CLOSED in a real browser (15-Tab focus-trap with restore-to-trigger, 21/21 on-screen-vs-JSON, 0 console errors). The score plateau is the IA / help / power-user-flexibility ceiling, not a11y.This PR ships the user-chosen "a11y residuals + verify dark contrast" thread:
text-slate-400 dark:text-slate-500→ the project's own standardtext-slate-500 dark:text-slate-400across 16 components/pages. The inverted token fails WCAG AA in both modes (slate-400#94a3b8on white ≈ 2.6:1 light; slate-500#64748bon slate-900#0f172a≈ 3.75:1 dark); the standard clears both (≈ 4.8:1 / ≈ 7:1).slate-*is outside theglobals.cssOKLCH soft-override allowlist, so contrast is on the raw Tailwind hex.min-h-[44px] lg:min-h-0(44px tap target on touch viewports, compact ~24px desktop) — the one touch target the fix(frontend): a11y + clarity punch-down (focus-trap · 44px targets · MoS labels · warning hierarchy) #355 sweep missed.Verify-before-fix
The real-browser agent's a11y list had 4 false positives (declined, not changed):
aria-disabledalready present (PriceTimePeriodSelector).aria-sortis right ARIA.aria-sort="none"is correct (Rank is the active default sort).Disclaimer"more" button is deliberatelymin-h-[24px](documented WCAG 2.5.8 AA floor).The agent also mis-named the contrast token (reported
slate-400@ 4.2:1) — the real failing token wasslate-500, and the failure spanned both modes, not dark-only. Verifying caught both.Correctly left faint (do NOT re-fix): disabled controls (WCAG 1.4.3 inactive exemption) + decorative
aria-hiddenicons.Verification
tsc --noEmitclean ·next build506/506 routesfrontend-design-reviewercontrast/regression review in progress (verdict to follow)min-h) + the committed critique snapshotPHASE_STATUS_INFLIGHT.mdentry addedhttps://claude.ai/code/session_012xxKfyR939bZDmbxxqMFZi
Generated by Claude Code