From 7cf3876694c6e54c48ae1269ebcf6fb1e2daec32 Mon Sep 17 00:00:00 2001
From: victorEdeh <quickpickconcepts@gmail.com>
Date: Sat, 25 Apr 2026 10:56:54 -0700
Subject: [PATCH] feat: add aria-live status regions and dynamic aria-labels
 for copy-to-clipboard actions (#123)

- TruncatedAddress: sr-only live region announces 'Address copied to clipboard'; aria-label toggles between 'Copy address' / 'Address copied'
- TransactionHashRow: same pattern for transaction hash copy button
- TransactionFailureDrawer: per-field copied state with Check icon feedback, dynamic aria-labels, and sr-only live regions for error code and tx hash copy buttons
- App: Toaster explicitly configured with role=status and aria-live=polite via toastOptions.ariaProps
- All decorative icons marked aria-hidden=true
---
 src/App.tsx                                   |  9 +++-
 .../common/TransactionFailureDrawer.tsx       | 46 +++++++++++++++----
 src/components/common/TransactionHashRow.tsx  | 14 ++++--
 src/components/common/TruncatedAddress.tsx    | 32 ++++++++-----
 4 files changed, 77 insertions(+), 24 deletions(-)

diff --git a/src/App.tsx b/src/App.tsx
index 8687a45..c9f902d 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -12,7 +12,14 @@ const router = createBrowserRouter([
 function App() {
 	return (
 		<>
-			<Toaster />
+			<Toaster
+				toastOptions={{
+					ariaProps: {
+						role: 'status',
+						'aria-live': 'polite',
+					},
+				}}
+			/>
 			<RouterProvider router={router} />
 		</>
 	);
diff --git a/src/components/common/TransactionFailureDrawer.tsx b/src/components/common/TransactionFailureDrawer.tsx
index 80dff8e..4896a14 100644
--- a/src/components/common/TransactionFailureDrawer.tsx
+++ b/src/components/common/TransactionFailureDrawer.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useState } from 'react';
 import {
 	Dialog,
 	DialogContent,
@@ -7,7 +7,7 @@ import {
 	DialogFooter,
 } from '@/components/ui/dialog';
 import { Button } from '@/components/ui/button';
-import { AlertCircle, Copy } from 'lucide-react';
+import { AlertCircle, Copy, Check } from 'lucide-react';
 import toast from 'react-hot-toast';
 import { formatAbsoluteDateTime, formatRelativeTime } from '@/utils/time.utils';
 
@@ -34,9 +34,13 @@ const TransactionFailureDrawer: React.FC<TransactionFailureDrawerProps> = ({
 	onRetry,
 	onDismiss,
 }) => {
-	const copyToClipboard = (text: string) => {
+	const [copiedField, setCopiedField] = useState<'errorCode' | 'txHash' | null>(null);
+
+	const copyToClipboard = (text: string, field: 'errorCode' | 'txHash') => {
 		navigator.clipboard.writeText(text);
 		toast.success('Copied to clipboard');
+		setCopiedField(field);
+		setTimeout(() => setCopiedField(null), 2000);
 	};
 
 	const handleClose = () => {
@@ -100,14 +104,26 @@ const TransactionFailureDrawer: React.FC<TransactionFailureDrawerProps> = ({
 								</code>
 								<button
 									onClick={() =>
-										copyToClipboard(failureDetails.errorCode!)
+										copyToClipboard(failureDetails.errorCode!, 'errorCode')
 									}
 									className="shrink-0 p-2 hover:bg-white/10 rounded transition-colors"
-									aria-label="Copy error code"
+									aria-label={copiedField === 'errorCode' ? 'Error code copied' : 'Copy error code'}
 								>
-									<Copy className="size-4 text-white/60" />
+									{copiedField === 'errorCode' ? (
+										<Check className="size-4 text-emerald-400" aria-hidden="true" />
+									) : (
+										<Copy className="size-4 text-white/60" aria-hidden="true" />
+									)}
 								</button>
 							</div>
+							<span
+								role="status"
+								aria-live="polite"
+								aria-atomic="true"
+								className="sr-only"
+							>
+								{copiedField === 'errorCode' ? 'Error code copied to clipboard' : ''}
+							</span>
 						</div>
 					)}
 
@@ -122,14 +138,26 @@ const TransactionFailureDrawer: React.FC<TransactionFailureDrawerProps> = ({
 								</code>
 								<button
 									onClick={() =>
-										copyToClipboard(failureDetails.txHash!)
+										copyToClipboard(failureDetails.txHash!, 'txHash')
 									}
 									className="shrink-0 p-2 hover:bg-white/10 rounded transition-colors"
-									aria-label="Copy transaction hash"
+									aria-label={copiedField === 'txHash' ? 'Transaction hash copied' : 'Copy transaction hash'}
 								>
-									<Copy className="size-4 text-white/60" />
+									{copiedField === 'txHash' ? (
+										<Check className="size-4 text-emerald-400" aria-hidden="true" />
+									) : (
+										<Copy className="size-4 text-white/60" aria-hidden="true" />
+									)}
 								</button>
 							</div>
+							<span
+								role="status"
+								aria-live="polite"
+								aria-atomic="true"
+								className="sr-only"
+							>
+								{copiedField === 'txHash' ? 'Transaction hash copied to clipboard' : ''}
+							</span>
 						</div>
 					)}
 
diff --git a/src/components/common/TransactionHashRow.tsx b/src/components/common/TransactionHashRow.tsx
index d51a12d..c4d67c0 100644
--- a/src/components/common/TransactionHashRow.tsx
+++ b/src/components/common/TransactionHashRow.tsx
@@ -46,14 +46,22 @@ const TransactionHashRow: React.FC<TransactionHashRowProps> = ({
 					<button
 						onClick={handleCopy}
 						className="inline-flex size-6 items-center justify-center rounded-md bg-white/5 text-white/40 transition-colors hover:bg-white/10 hover:text-white"
-						aria-label="Copy transaction hash"
+						aria-label={copied ? 'Transaction hash copied' : 'Copy transaction hash'}
 					>
 						{copied ? (
-							<Check className="size-3 text-emerald-400" />
+							<Check className="size-3 text-emerald-400" aria-hidden="true" />
 						) : (
-							<Copy className="size-3" />
+							<Copy className="size-3" aria-hidden="true" />
 						)}
 					</button>
+					<span
+						role="status"
+						aria-live="polite"
+						aria-atomic="true"
+						className="sr-only"
+					>
+						{copied ? 'Transaction hash copied to clipboard' : ''}
+					</span>
 					{explorerUrl && (
 						<a
 							href={explorerUrl}
diff --git a/src/components/common/TruncatedAddress.tsx b/src/components/common/TruncatedAddress.tsx
index b8727c3..7d05c81 100644
--- a/src/components/common/TruncatedAddress.tsx
+++ b/src/components/common/TruncatedAddress.tsx
@@ -42,17 +42,27 @@ const TruncatedAddress: React.FC<TruncatedAddressProps> = ({
 		>
 			<span>{truncate(address, prefixChars, suffixChars)}</span>
 			{copyable && (
-				<button
-					onClick={handleCopy}
-					aria-label="Copy address"
-					className="text-white/40 transition-colors hover:text-amber-500"
-				>
-					{copied ? (
-						<Check className="size-3" />
-					) : (
-						<Copy className="size-3" />
-					)}
-				</button>
+				<>
+					<button
+						onClick={handleCopy}
+						aria-label={copied ? 'Address copied' : 'Copy address'}
+						className="text-white/40 transition-colors hover:text-amber-500"
+					>
+						{copied ? (
+							<Check className="size-3" aria-hidden="true" />
+						) : (
+							<Copy className="size-3" aria-hidden="true" />
+						)}
+					</button>
+					<span
+						role="status"
+						aria-live="polite"
+						aria-atomic="true"
+						className="sr-only"
+					>
+						{copied ? 'Address copied to clipboard' : ''}
+					</span>
+				</>
 			)}
 		</span>
 	);