From d862be7a3e64919cb15777fa731c09807d39409f Mon Sep 17 00:00:00 2001 From: Reed Date: Wed, 29 Jul 2026 00:19:07 +0000 Subject: [PATCH 1/2] fix(BUY-64574): bump placeholder to white/95 to pass WCAG AA on indigo-600 edge MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit The previous fix (white/85 from rgba(255,255,255,0.85)) shipped but failed QA re-verification on the lightest gradient edge. When alpha-composited: field: bg-white/10 over indigo-600 (#4F46E5) = #6158E8 placeholder: white/85 over field = #E7E6FC contrast = 4.21:1 ✗ (< 4.5 AA) For the gradient's full range (indigo-600 → indigo-900): indigo-600: 4.21:1 ✗ indigo-700: 5.05:1 ✓ indigo-900: 6.72:1 ✓ Bumping placeholder opacity to white/95 gives: indigo-600: 4.84:1 ✓ (above AA 4.5:1) indigo-700: 5.83:1 ✓ indigo-900: 7.92:1 ✓ Both the explicit .search-input::placeholder rule (globals.css) and the Tailwind utility class (HomeProductSearch.tsx) are bumped to 0.95 to keep them in lockstep. Reference VidMee evidence: vidmee://asset/vidmee_ss_f2811a4f4c6db34363ad9a96 --- src/app/globals.css | 12 ++++++++---- src/components/HomeProductSearch.tsx | 2 +- 2 files changed, 9 insertions(+), 5 deletions(-) diff --git a/src/app/globals.css b/src/app/globals.css index 5a0fe441c..35070fe23 100644 --- a/src/app/globals.css +++ b/src/app/globals.css @@ -16,15 +16,19 @@ body { } } -/* Search input placeholder — WCAG AA contrast on dark indigo hero background */ +/* Search input placeholder — WCAG AA contrast on indigo-600→indigo-900 gradient. + * placeholder-white/95 (and InheritedTailwind .placeholder-white/95) gives >=4.5:1 + * contrast once alpha-composited over the bg-white/10 field tint. The previously + * shipped 0.85 white failed AA on the lightest gradient edge (indigo-600 ≈ 4.21:1). + */ .search-input::placeholder { - color: rgba(255, 255, 255, 0.85); + color: rgba(255, 255, 255, 0.95); } .search-input::-webkit-input-placeholder { - color: rgba(255, 255, 255, 0.85); + color: rgba(255, 255, 255, 0.95); } .search-input::-moz-placeholder { - color: rgba(255, 255, 255, 0.85); + color: rgba(255, 255, 255, 0.95); } diff --git a/src/components/HomeProductSearch.tsx b/src/components/HomeProductSearch.tsx index 81648f123..012c0ab7d 100644 --- a/src/components/HomeProductSearch.tsx +++ b/src/components/HomeProductSearch.tsx @@ -75,7 +75,7 @@ export function HomeProductSearch() { } }} placeholder="Search products..." - className="search-input w-full rounded-xl border-2 border-white/20 bg-white/10 py-5 pl-14 pr-4 text-lg text-white placeholder-white/85 transition-all focus:border-white focus:bg-white/20 focus:outline-none focus:ring-4 focus:ring-white/20" + className="search-input w-full rounded-xl border-2 border-white/20 bg-white/10 py-5 pl-14 pr-4 text-lg text-white placeholder-white/95 transition-all focus:border-white focus:bg-white/20 focus:outline-none focus:ring-4 focus:ring-white/20" aria-label="Search products" aria-invalid={Boolean(error)} aria-describedby={error ? errorId : undefined} From 043bb037778d78d741eba72a0fa18a72f576ed3c Mon Sep 17 00:00:00 2001 From: Reed Date: Wed, 29 Jul 2026 02:23:58 +0000 Subject: [PATCH 2/2] fix(BUY-64574): raise results search placeholder contrast Co-Authored-By: Claude --- src/app/search/SearchResultsClient.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/app/search/SearchResultsClient.tsx b/src/app/search/SearchResultsClient.tsx index dcff10214..63eeef02d 100644 --- a/src/app/search/SearchResultsClient.tsx +++ b/src/app/search/SearchResultsClient.tsx @@ -730,7 +730,7 @@ export default function SearchResultsClient({ } }} placeholder="Search sneakers, laptops, espresso machines..." - className="h-14 w-full rounded-2xl border border-slate-200 bg-white pl-12 pr-4 text-base text-slate-900 shadow-sm outline-none transition focus:border-amber-400 focus:ring-4 focus:ring-amber-100" + className="h-14 w-full rounded-2xl border border-slate-200 bg-white pl-12 pr-4 text-base text-slate-900 placeholder:text-slate-600 shadow-sm outline-none transition focus:border-amber-400 focus:ring-4 focus:ring-amber-100" aria-label="Search products" role="combobox" aria-autocomplete="list"