fix(frontend): a11y + clarity punch-down (focus-trap · 44px targets · MoS labels · warning hierarchy)#355
Merged
Merged
Conversation
Implements the full P1+P2+P3 punch-down from the whole-app audit+critique (read-only review; this PR is the fixes). Placeholder hero tiles kept as reserved per the user's PR #344 decision. P1: - FilterDrawer: trap Tab/Shift+Tab within the dialog, move focus in on open, restore to the trigger on close (WCAG 2.4.3); + type="button" on close X. - Touch targets >= 44px (min-h-[44px] / h-11 w-11): Sidebar nav + mobile-close + brand link, AppShell hamburger, ThemeToggle, FilterDrawer buttons + search, RankingTable Filters/search/pagination, PriceTimePeriodSelector, DualRange (44px grab zone + h-5 thumbs), detail back-link. P2: - MoS-anchor labels: FairPriceCard "Margin of safety (vs fair value)" + FairPriceBarChart "vs today's price" -- the two %s on one page no longer read as a contradiction. - Warning-card hierarchy: Tier2EventCard + RiskSummaryCard <h2> take a severity tone (rose veto / amber annotate, else neutral) so they outweigh the neutral data-section eyebrows. P3: - DualRange min/max aria-label; Disclaimer role=alert -> role=note + aria-expanded on more/less; price-chart section aria-label + sr-only latest-price summary (the Recharts SVG is opaque to AT). Skipped as verified false positives: dark loss-chance (the !important text-red-700 remap wins in dark -> already soft); period aria-pressed (already role=radio+aria-checked); sort first-click (chevron moves); StockLogo alt (alt="" aria-hidden); loss-chance color-only (badge aria-label carries the band). Verified: tsc --noEmit clean + next build 506 routes. Also commits the critique snapshot so $impeccable polish can read it next session. No compute / schema / scoring / valuation change. https://claude.ai/code/session_012xxKfyR939bZDmbxxqMFZi
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
…px targets Two touch-target gaps the design + browser review caught on the punch-down: - stock-detail happy-path back-link (page.tsx) was missing min-h-[44px] (the earlier replace_all only caught the not-found branch — the two were not byte-identical); the primary back-link was ~20px. - PriceTimePeriodSelector period buttons (1M/6M/YTD/1Y/5Y) were 24px; added min-h-[44px] to the base class (items-center already centers the label, so the visual chip height is unchanged, only the hit area grows). tsc --noEmit clean + next build 506 routes. https://claude.ai/code/session_012xxKfyR939bZDmbxxqMFZi
dackclup
pushed a commit
that referenced
this pull request
Jun 1, 2026
…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
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.
A11y + clarity punch-down (from
$impeccable audit+critique)Implements the full P1+P2+P3 punch-down the user chose from the whole-app audit + critique (read-only review; this PR is the fixes). Placeholder hero tiles kept as reserved per the PR #344 decision. The critique snapshot is committed (
.impeccable/critique/…) so$impeccable polishcan read it next session.P1
type="button"on the close X.min-h-[44px]/h-11 w-11) — Sidebar nav + mobile-close + brand link, AppShell hamburger, ThemeToggle, FilterDrawer buttons + search, RankingTable Filters/search/pagination,PriceTimePeriodSelector,DualRange(44px grab zone + larger thumbs), detail back-link.P2
FairPriceCard"Margin of safety (vs fair value)";FairPriceBarChart"vs today's price" — the two different %s on one page no longer read as a contradiction.Tier2EventCard+RiskSummaryCard<h2>take a severity tone (rose veto / amber annotate, else neutral) so they outweigh the flat neutral data-section eyebrows.P3
DualRangemin/maxaria-label;Disclaimerrole="alert"→role="note"+aria-expandedon the more/less toggle; price-chart<section>aria-label+ an sr-only latest-price summary (the Recharts SVG is opaque to AT).Skipped as verified false positives
dark loss-chance "pink-salmon" (the
!importanttext-red-700remap wins in dark → already soft) · periodaria-pressed(already the correctrole="radio"+aria-checked) · sort first-click (the chevron does move) · StockLogo alt (alt="" aria-hidden, correct decorative) · loss-chance "color-only" (the badgearia-labelcarries the band + mobile prints it as text).Verified:
tsc --noEmitclean +next build506 routes. 11 component/page files + the committed snapshot; no compute / schema / scoring / valuation change. CLAUDE.md §Gotchas + AGENTS.md record the touch-target / focus-trap / warning-heading standards. Design + browser review gate running.https://claude.ai/code/session_012xxKfyR939bZDmbxxqMFZi
Generated by Claude Code