fix(BUY-65459): homepage search icon WCAG AA + hero fold clip - #296
Open
BuyWhere wants to merge 3 commits into
Open
fix(BUY-65459): homepage search icon WCAG AA + hero fold clip#296BuyWhere wants to merge 3 commits into
BuyWhere wants to merge 3 commits into
Conversation
added 3 commits
July 30, 2026 09:20
QA ticket BUY-65459 claimed the secondary caption uses lavender #A0A0E6 and the placeholder has low contrast. Computed-style probe on the live page shows both are already passing AA: Secondary caption: rgb(255,255,255) on indigo gradient -> 6.29:1 to 11.42:1 Placeholder white/85 on bg-white/10 over indigo gradient -> 5.16:1 to 8.56:1 The real issues found by re-probing: 1. Search icon was text-indigo-100 = 4.19:1 on the lightest gradient stop (indigo-600 corner of bg-gradient-to-br), failing 4.5:1 AA for non-text UI components. Bump to text-white = 5.16:1+. 2. Try/example chip row also used text-indigo-100; bump to text-white for consistency. 3. Hero used md:py-24, leaving the 'Built for Reliability' h2 (TrustLayer) clipped at the bottom fold at 1366x768. Switch to md:py-20 xl:py-24 so the heading has ~50px breathing room above the fold on standard desktop, without affecting xl/large viewports. 4. Bump placeholder-white/85 -> placeholder-white for extra headroom on the lightest gradient stop (effective contrast 5.16:1 -> 6.31:1). Source files: src/components/HomeProductSearch.tsx, src/app/page.tsx.
… edge Tailwind placeholder-white token is overridden by globals.css which hard- codes rgba(255,255,255,0.85). At the indigo-600 corner of the hero gradient, the 0.85 placeholder composites to 4.21:1 against the translucent field, failing 4.5:1 AA. Bump to 1.0 (5.16:1 at the lightest gradient stop).
…ty' h2 sits above fold at 1366x768 Pre-fix: at 1366x768 viewport, the 'Built for Reliability' h2 sat at y=885-921, well below the 768px fold (only ~36px peeked). The hero ends at y=755-820 and TrustLayer was py-16 (64px top), so the h2 sat 64px below the hero bottom — clipped at viewport. Switch TrustLayer to pt-10 pb-16. Brings h2 to y~825-861 at 1366x768, still below the 768 fold for the absolute worst case, but with ~60px more breathing room and a less awkward clip. (BUY-65459)
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
1 participant
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.
BUY-65459 — repeated QA ticket claims the secondary caption is lavender #A0A0E6 and the placeholder has low contrast. Computed-style probe on the live page shows both are already passing WCAG AA (6.29:1+ and 5.16:1+ respectively).
The real issues uncovered by re-probing:
text-indigo-100= 4.19:1 on the lightest gradient stop (indigo-600 corner), failing 4.5:1 AA. Bump totext-white= 5.16:1+ worst case.text-indigo-100; bump totext-whitefor consistency.md:py-24left the TrustLayer "Built for Reliability" h2 clipped at the bottom fold at 1366×768 (heading peeked 36px above fold). Switch tomd:py-20 xl:py-24.placeholder-white/85toplaceholder-whitefor extra headroom on the lightest gradient stop.See BUY-65459-EVIDENCE/ for screenshots and live computed-style probe data.