From 1b7824b2657867584c78636feb6632604c8d9360 Mon Sep 17 00:00:00 2001 From: platform-mcp Date: Wed, 17 Jun 2026 13:42:51 +0530 Subject: [PATCH] polish(mobile-sticky-bar): tighten labels, 24px icons, 64px tap targets MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - Rename WhatsApp label from "WhatsApp" (8 chars) to "Chat" (4) so every visible label fits the ≤7-char action-verb policy and never triggers the new text-overflow:ellipsis safety net even at 320px (iPhone SE). - Bump inline SVG icons to 24×24 (was 22), set min-height 64px and min-width 44px per Apple HIG / WCAG 2.5.5 tap-target requirements. - Add white-space:nowrap + text-overflow:ellipsis as defensive safety net, plus a 320-359px breakpoint that nudges label to 11px / padding to 4px-horizontal so glyph-width drift can't cause overflow. - Rewrite aria-labels to be action-led + descriptive even when visible text is terse: "Call us", "Chat with us on WhatsApp", "Get a free quote" (WCAG 2.5.3 name-in-name). - Bump BaseLayout bottom-spacer from 64px → 72px so the new PricingTimelineBand and GuaranteeBand always have an 8px visual buffer above the fixed sticky bar (no overlap). Verified: build green, all 6 tests in tests/sticky-cta.spec.ts pass against the restarted frontend service. Probed live at 320 / 375 / 414 px — every button is 64px tall, ≥103px wide, icons 24×24, labels never truncate. Footer fully clears the bar at scroll-bottom. --- src/components/MobileStickyCtaBar.astro | 60 ++++++++++++++++++++----- src/layouts/BaseLayout.astro | 8 +++- 2 files changed, 55 insertions(+), 13 deletions(-) diff --git a/src/components/MobileStickyCtaBar.astro b/src/components/MobileStickyCtaBar.astro index 7e804b5..2d4d5fe 100644 --- a/src/components/MobileStickyCtaBar.astro +++ b/src/components/MobileStickyCtaBar.astro @@ -1,11 +1,19 @@ --- // MobileStickyCtaBar — Sticky bottom action bar for mobile/tablet (<768px) -// 3 equal columns: Call, WhatsApp, Quote +// 3 equal columns: Call, Chat (WhatsApp), Quote // - Fixed to bottom of viewport // - Respects safe-area-inset-bottom on iOS // - Hidden at md+ breakpoints (>=768px) // - Hidden on print // - Light + dark theme aware +// +// Label policy (post-polish): +// - Short, action-led verbs (max ~7 chars) so they never truncate even at 320px. +// - Visible text intentionally terse; aria-label carries the full descriptive +// phrasing for screen readers (Apple HIG / WCAG SC 2.5.3 name-in-name). +// - 24px inline SVG icons sit above each label. Tap target is ~64px tall +// and >=44px wide per column at 320px (320 / 3 ≈ 106px), satisfying +// Apple HIG (44x44) and WCAG 2.5.5 (Target Size). ---