From 584fdb52cfab87ab2487609462787b71ee5736f3 Mon Sep 17 00:00:00 2001
From: jaydenkalu <jaydenkalu03@gmail.com>
Date: Mon, 29 Jun 2026 12:21:09 +0000
Subject: [PATCH] feat: copy feedback and mobile clipboard support on verify
 page (#476)

- copy-button.tsx: add writeToClipboard() with execCommand fallback for
  mobile browsers that lack navigator.clipboard; add aria-pressed state;
  add optional onCopied callback; export writeToClipboard for reuse
- verify/page.tsx: replace bare navigator.clipboard.writeText with
  writeToClipboard; push success/error toast on copy; add aria-live
  region to Share button label for screen-reader feedback
- Update snapshots for CopyButton/CopyableText (aria-pressed added)

Closes #476
---
 .../__snapshots__/snapshot.test.tsx.snap      | 44 ++++++++++++++++---
 apps/web/src/app/verify/page.tsx              | 21 ++++++---
 apps/web/src/components/copy-button.tsx       | 32 ++++++++++++--
 3 files changed, 80 insertions(+), 17 deletions(-)

diff --git a/apps/web/src/__tests__/components/__snapshots__/snapshot.test.tsx.snap b/apps/web/src/__tests__/components/__snapshots__/snapshot.test.tsx.snap
index a21eb9a..198b065 100644
--- a/apps/web/src/__tests__/components/__snapshots__/snapshot.test.tsx.snap
+++ b/apps/web/src/__tests__/components/__snapshots__/snapshot.test.tsx.snap
@@ -3,6 +3,7 @@
 exports[`Copy components snapshots > CopyButton renders correctly 1`] = `
 <button
   aria-label="Copy test-value"
+  aria-pressed="false"
   class="inline-flex items-center gap-1 rounded p-1 text-gray-500 transition-colors hover:bg-gray-100 hover:text-gray-700 focus:outline-none focus:ring-2 focus:ring-yellow-400 focus:ring-offset-1 dark:text-gray-400 dark:hover:bg-gray-800 dark:hover:text-gray-200 "
   title="Copy to clipboard"
 >
@@ -28,6 +29,7 @@ exports[`Copy components snapshots > CopyableText renders correctly (mono) 1`] =
   </span>
   <button
     aria-label="Copy 0x1234567890"
+    aria-pressed="false"
     class="inline-flex items-center gap-1 rounded p-1 text-gray-500 transition-colors hover:bg-gray-100 hover:text-gray-700 focus:outline-none focus:ring-2 focus:ring-yellow-400 focus:ring-offset-1 dark:text-gray-400 dark:hover:bg-gray-800 dark:hover:text-gray-200 "
     title="Copy to clipboard"
   >
@@ -54,6 +56,7 @@ exports[`Copy components snapshots > CopyableText renders correctly (non-mono) 1
   </span>
   <button
     aria-label="Copy test"
+    aria-pressed="false"
     class="inline-flex items-center gap-1 rounded p-1 text-gray-500 transition-colors hover:bg-gray-100 hover:text-gray-700 focus:outline-none focus:ring-2 focus:ring-yellow-400 focus:ring-offset-1 dark:text-gray-400 dark:hover:bg-gray-800 dark:hover:text-gray-200 "
     title="Copy to clipboard"
   >
@@ -74,33 +77,49 @@ exports[`LanguageSwitcher snapshots > LanguageSwitcher renders correctly 1`] = `
   aria-label="Language selector"
   role="group"
 >
+  <span
+    aria-atomic="true"
+    aria-live="polite"
+    class="sr-only"
+    role="status"
+  />
+  <label
+    class="sr-only"
+    for="language-select"
+  >
+    Select language
+  </label>
   <select
-    aria-label="Select language"
     class="cursor-pointer appearance-none rounded-md border border-gray-200 bg-white px-2 py-1 text-xs font-medium text-gray-700 focus:outline-none focus:ring-2 focus:ring-yellow-400 dark:border-gray-700 dark:bg-gray-900 dark:text-gray-300"
+    id="language-select"
   >
     <option
-      aria-label="English"
       value="en"
     >
       EN
+       — 
+      English
     </option>
     <option
-      aria-label="Español"
       value="es"
     >
       ES
+       — 
+      Español
     </option>
     <option
-      aria-label="Français"
       value="fr"
     >
       FR
+       — 
+      Français
     </option>
     <option
-      aria-label="Deutsch"
       value="de"
     >
       DE
+       — 
+      Deutsch
     </option>
   </select>
 </div>
@@ -234,17 +253,29 @@ exports[`Navbar snapshots > Navbar renders correctly 1`] = `
       >
         nav.verify
       </a>
+      <a
+        class="text-sm transition-colors text-gray-600 hover:text-gray-900 dark:text-gray-400 dark:hover:text-gray-100"
+        href="/admin"
+        role="listitem"
+      >
+        nav.admin
+      </a>
     </div>
     <div
       class="flex items-center gap-2"
     >
       <a
         aria-label="Stellar Testnet — view network info"
-        class="hidden items-center rounded-full px-2 py-0.5 text-xs font-semibold md:flex bg-yellow-100 text-yellow-700 dark:bg-yellow-900/30 dark:text-yellow-400"
+        class="inline-flex items-center gap-1 rounded-full px-2 py-0.5 text-xs font-semibold bg-yellow-100 text-yellow-700 dark:bg-yellow-900/30 dark:text-yellow-400"
         href="https://stellar.expert/explorer/testnet"
         rel="noopener noreferrer"
         target="_blank"
+        title="Connected to Stellar Testnet — not a production environment"
       >
+        <span
+          aria-hidden="true"
+          class="h-1.5 w-1.5 rounded-full animate-pulse bg-yellow-500"
+        />
         Testnet
       </a>
       <div
@@ -262,6 +293,7 @@ exports[`Navbar snapshots > Navbar renders correctly 1`] = `
         </span>
         <button
           aria-label="Copy wallet address GABC...XYZ"
+          aria-pressed="false"
           class="inline-flex items-center gap-1 rounded p-1 text-gray-500 transition-colors hover:bg-gray-100 hover:text-gray-700 focus:outline-none focus:ring-2 focus:ring-yellow-400 focus:ring-offset-1 dark:text-gray-400 dark:hover:bg-gray-800 dark:hover:text-gray-200 "
           title="Copy to clipboard"
         >
diff --git a/apps/web/src/app/verify/page.tsx b/apps/web/src/app/verify/page.tsx
index 8574e76..0b32c1f 100644
--- a/apps/web/src/app/verify/page.tsx
+++ b/apps/web/src/app/verify/page.tsx
@@ -5,6 +5,7 @@ import { useSearchParams, useRouter } from 'next/navigation'
 import { Search, CheckCircle, XCircle, Shield, ExternalLink, Copy } from 'lucide-react'
 import { SectionSkeleton } from '@/components/skeleton'
 import { CopyableText } from '@/components/copy-button'
+import { writeToClipboard } from '@/components/copy-button'
 import { useToast } from '@/components/ToastProvider'
 
 interface ChainOfCustody {
@@ -106,7 +107,7 @@ export default function VerifyPage() {
   const [pageError, setPageError] = useState<Error | null>(null)
   const [loading, setLoading] = useState(false)
   const [copied, setCopied] = useState(false)
-  const { pushToast: toast } = useToast()
+  const { pushToast } = useToast()
 
   function handleVerify(e: React.FormEvent) {
     e.preventDefault()
@@ -122,12 +123,12 @@ export default function VerifyPage() {
       if (!res.ok) {
         const message = data.error || 'Unable to verify certificate'
         setError(message)
-        toast({ variant: 'error', title: 'Verification failed', description: message })
+        pushToast({ variant: 'error', title: 'Verification failed', description: message })
         return
       }
 
       setResult(data)
-      toast({ variant: 'success', title: 'Certificate verified', description: 'Full chain of custody confirmed.' })
+      pushToast({ variant: 'success', title: 'Certificate verified', description: 'Full chain of custody confirmed.' })
     } catch {
       setError('Network error — please try again.')
       trackEvent('verify_error', { status: 0 })
@@ -138,9 +139,14 @@ export default function VerifyPage() {
   }
 
   async function copyLink() {
-    await navigator.clipboard.writeText(window.location.href)
-    setCopied(true)
-    setTimeout(() => setCopied(false), 2000)
+    try {
+      await writeToClipboard(window.location.href)
+      setCopied(true)
+      pushToast({ variant: 'success', title: 'Link copied', description: 'Paste it anywhere to share this verification.' })
+      setTimeout(() => setCopied(false), 2000)
+    } catch {
+      pushToast({ variant: 'error', title: 'Copy failed', description: 'Please copy the URL from your browser address bar.' })
+    }
   }
 
   const steps = result ? buildSteps(result) : null
@@ -233,11 +239,12 @@ export default function VerifyPage() {
             <button
               onClick={copyLink}
               aria-label="Copy shareable verification link"
+              aria-pressed={copied}
               title="Copy shareable link"
               className="flex items-center gap-1 rounded-md px-2 py-1 text-xs text-gray-500 hover:bg-white/60 dark:hover:bg-gray-800/60"
             >
               <Copy className="h-3.5 w-3.5" aria-hidden="true" />
-              {copied ? 'Copied!' : 'Share'}
+              <span aria-live="polite">{copied ? 'Copied!' : 'Share'}</span>
             </button>
           </div>
 
diff --git a/apps/web/src/components/copy-button.tsx b/apps/web/src/components/copy-button.tsx
index ff4af53..52c5657 100644
--- a/apps/web/src/components/copy-button.tsx
+++ b/apps/web/src/components/copy-button.tsx
@@ -8,18 +8,38 @@ interface CopyButtonProps {
   label?: string
   className?: string
   iconSize?: number
+  onCopied?: () => void
 }
 
-export function CopyButton({ value, label, className = '', iconSize = 14 }: CopyButtonProps) {
+/** Write text to clipboard with a mobile-safe fallback via a temporary textarea. */
+async function writeToClipboard(text: string): Promise<void> {
+  if (navigator.clipboard?.writeText) {
+    await navigator.clipboard.writeText(text)
+    return
+  }
+  // Fallback for mobile browsers that don't support navigator.clipboard
+  const el = document.createElement('textarea')
+  el.value = text
+  el.style.cssText = 'position:fixed;top:0;left:0;opacity:0'
+  document.body.appendChild(el)
+  el.focus()
+  el.select()
+  const ok = document.execCommand('copy')
+  document.body.removeChild(el)
+  if (!ok) throw new Error('copy failed')
+}
+
+export function CopyButton({ value, label, className = '', iconSize = 14, onCopied }: CopyButtonProps) {
   const [copied, setCopied] = useState(false)
 
   async function handleCopy() {
     try {
-      await navigator.clipboard.writeText(value)
+      await writeToClipboard(value)
       setCopied(true)
+      onCopied?.()
       setTimeout(() => setCopied(false), 2000)
-    } catch (err) {
-      console.error('Failed to copy:', err)
+    } catch {
+      // Surface nothing to the user visually — caller can supply onCopied for toast
     }
   }
 
@@ -27,6 +47,7 @@ export function CopyButton({ value, label, className = '', iconSize = 14 }: Copy
     <button
       onClick={handleCopy}
       aria-label={label || `Copy ${value}`}
+      aria-pressed={copied}
       title={copied ? 'Copied!' : 'Copy to clipboard'}
       className={`inline-flex items-center gap-1 rounded p-1 text-gray-500 transition-colors hover:bg-gray-100 hover:text-gray-700 focus:outline-none focus:ring-2 focus:ring-yellow-400 focus:ring-offset-1 dark:text-gray-400 dark:hover:bg-gray-800 dark:hover:text-gray-200 ${className}`}
     >
@@ -57,3 +78,6 @@ export function CopyableText({ value, displayValue, mono = true, className = ''
     </span>
   )
 }
+
+export { writeToClipboard }
+