From f602307b5fe862783567d47507361856986c9b3a Mon Sep 17 00:00:00 2001
From: Brian Love <brian@liveloveapp.com>
Date: Sun, 30 Aug 2026 13:08:44 -0700
Subject: [PATCH] fix(website): AnnouncementToast mobile presentation and a11y
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The remaining two toast items from the polish-arc deferred list:

- Mobile width (findings §6): below 480px the 360px right-hugging card
  covered 327px of a 375px screen; it now presents as a centered bottom
  sheet with even 16px margins and tighter padding.
- A11y: the root was role=alert + aria-live on interactive content (CTA
  button and email form) — now a non-modal role=dialog labelled by the
  title, which never steals focus on entry. Escape dismisses once focus
  is inside. The close button gets a hover state, a focus-visible ring,
  and a 44px hit target via ::after (findings §7). The 'sent' success
  message is role=status so the step swap is still announced.

Verified in-browser at 375: 16px margins, close hit 46x50, Escape
dismisses and persists the dismissal. nx test green, lint 0 errors,
production build green.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
---
 .../components/shared/AnnouncementToast.tsx   | 16 ++++++++---
 apps/website/src/styles/chrome.css            | 27 +++++++++++++++++++
 2 files changed, 39 insertions(+), 4 deletions(-)

diff --git a/apps/website/src/components/shared/AnnouncementToast.tsx b/apps/website/src/components/shared/AnnouncementToast.tsx
index ba86f79e2..1d1743673 100644
--- a/apps/website/src/components/shared/AnnouncementToast.tsx
+++ b/apps/website/src/components/shared/AnnouncementToast.tsx
@@ -85,11 +85,18 @@ export function AnnouncementToast() {
   if (!visible) return null;
 
   return (
+    // Non-modal dialog, not role="alert": an alert/live region must not hold
+    // interactive content (the CTA button and email form live here), and
+    // assertive announcement of a marketing prompt is hostile. Focus is never
+    // stolen on entry; Escape dismisses once focus is inside.
     <div
-      role="alert"
-      aria-live="polite"
+      role="dialog"
+      aria-labelledby="toast-title"
       className="toast-root"
       data-mounted={mounted || undefined}
+      onKeyDown={(e) => {
+        if (e.key === 'Escape') dismiss();
+      }}
     >
       {/* Dismiss button */}
       <button
@@ -106,7 +113,7 @@ export function AnnouncementToast() {
       </p>
 
       {/* Title */}
-      <p className="toast-title">
+      <p id="toast-title" className="toast-title">
         From Prototype to Production
       </p>
 
@@ -184,7 +191,8 @@ export function AnnouncementToast() {
 
       {step === 'sent' && (
         <div className="toast-mt-section">
-          <p className="toast-success-text">
+          {/* role=status: the step swap is announced without stealing focus. */}
+          <p role="status" className="toast-success-text">
             ✓ Check your inbox — the guide is on its way!
           </p>
         </div>
diff --git a/apps/website/src/styles/chrome.css b/apps/website/src/styles/chrome.css
index 15f6ec560..c2f66dba0 100644
--- a/apps/website/src/styles/chrome.css
+++ b/apps/website/src/styles/chrome.css
@@ -335,6 +335,19 @@
   opacity: 1;
   transform: translateY(0);
 }
+/* On phones the 360px right-hugging card read as a wall (327px of a
+ * 375px screen, findings §6): present it as a centered bottom sheet
+ * with even margins instead. */
+@media (max-width: 480px) {
+  .toast-root {
+    left: 16px;
+    right: 16px;
+    bottom: 16px;
+    width: auto;
+    max-width: none;
+    padding: 16px 18px;
+  }
+}
 .toast-close {
   position: absolute;
   top: 10px;
@@ -346,6 +359,20 @@
   font-size: 18px;
   line-height: 1;
   padding: 4px;
+  border-radius: var(--radius-sm);
+}
+.toast-close:hover {
+  color: var(--color-text-primary);
+}
+/* 44px touch target without visual growth (findings §7). */
+.toast-close::after {
+  content: '';
+  position: absolute;
+  inset: -12px -13px;
+}
+.toast-close:focus-visible {
+  outline: none;
+  box-shadow: var(--shadow-focus);
 }
 .toast-eyebrow {
   font-family: var(--font-mono);