diff --git a/src/components/common/CopySuccessAnnouncement.tsx b/src/components/common/CopySuccessAnnouncement.tsx
new file mode 100644
index 0000000..ada4ba2
--- /dev/null
+++ b/src/components/common/CopySuccessAnnouncement.tsx
@@ -0,0 +1,18 @@
+interface CopySuccessAnnouncementProps {
+	message: string;
+}
+
+function CopySuccessAnnouncement({ message }: CopySuccessAnnouncementProps) {
+	return (
+		<span
+			role="status"
+			aria-live="polite"
+			aria-atomic="true"
+			className="sr-only"
+		>
+			{message}
+		</span>
+	);
+}
+
+export default CopySuccessAnnouncement;
diff --git a/src/components/common/CreatorProfileHeader.tsx b/src/components/common/CreatorProfileHeader.tsx
index 886795c..6bbf0cd 100644
--- a/src/components/common/CreatorProfileHeader.tsx
+++ b/src/components/common/CreatorProfileHeader.tsx
@@ -148,4 +148,4 @@ const CreatorProfileHeader: React.FC<CreatorProfileHeaderProps> = ({
 	);
 };
 
-export default CreatorProfileHeader;
+export default CreatorProfileHeader;
\ No newline at end of file
diff --git a/src/components/common/EmptyTransactionTimelineState.tsx b/src/components/common/EmptyTransactionTimelineState.tsx
index 5d7e635..88f4c36 100644
--- a/src/components/common/EmptyTransactionTimelineState.tsx
+++ b/src/components/common/EmptyTransactionTimelineState.tsx
@@ -2,6 +2,8 @@ import { useState } from 'react';
 import { Button } from '@/components/ui/button';
 import { Check, Clock3, Copy, XCircle } from 'lucide-react';
 import { formatRecentActivityCompactTimestamp } from '@/utils/recentActivityTimestamp.utils';
+import CopySuccessAnnouncement from '@/components/common/CopySuccessAnnouncement';
+import { useCopySuccessAnnouncement } from '@/hooks/useCopySuccessAnnouncement';
 
 type CopyState = 'idle' | 'success' | 'error';
 
@@ -19,7 +21,8 @@ const DEFAULT_TIMELINE_ENTRIES: TimelineEntry[] = [
 		id: 'entry-1',
 		action: 'Buy',
 		amount: '+2 keys',
-		txHash: '0x2a43bcfdef77ca4c50ef7d38148dd5d7f0149a6e2e20f70f04ce1f4b66fe55dd',
+		txHash:
+			'0x2a43bcfdef77ca4c50ef7d38148dd5d7f0149a6e2e20f70f04ce1f4b66fe55dd',
 		compactTimestamp: '2m ago',
 		status: 'confirmed',
 	},
@@ -27,7 +30,8 @@ const DEFAULT_TIMELINE_ENTRIES: TimelineEntry[] = [
 		id: 'entry-2',
 		action: 'Sell',
 		amount: '-1 key',
-		txHash: '0x90c82ac01478b42fcbf9db73a26ed32bd8e50a8917e2408c31c95e9f6a59fc19',
+		txHash:
+			'0x90c82ac01478b42fcbf9db73a26ed32bd8e50a8917e2408c31c95e9f6a59fc19',
 		compactTimestamp: '18m ago',
 		status: 'pending',
 	},
@@ -35,23 +39,28 @@ const DEFAULT_TIMELINE_ENTRIES: TimelineEntry[] = [
 		id: 'entry-3',
 		action: 'Buy',
 		amount: '+3 keys',
-		txHash: '0x16d2ffbc4297a8c2c3086e07c16e66f47287df0d5a1ce1aef9e448e2f0f3ab51',
+		txHash:
+			'0x16d2ffbc4297a8c2c3086e07c16e66f47287df0d5a1ce1aef9e448e2f0f3ab51',
 		compactTimestamp: '51m ago',
 		status: 'failed',
 	},
 ];
 
-const shortenTxHash = (hash: string) => `${hash.slice(0, 8)}...${hash.slice(-6)}`;
+const shortenTxHash = (hash: string) =>
+	`${hash.slice(0, 8)}...${hash.slice(-6)}`;
 
 interface EmptyTransactionTimelineStateProps {
 	/** Optional transaction data. If provided and empty, the component returns null. */
 	data?: TimelineEntry[];
 }
 
-const EmptyTransactionTimelineState: React.FC<EmptyTransactionTimelineStateProps> = ({
-	data = DEFAULT_TIMELINE_ENTRIES,
-}) => {
-	const [copyStateById, setCopyStateById] = useState<Record<string, CopyState>>({});
+const EmptyTransactionTimelineState: React.FC<
+	EmptyTransactionTimelineStateProps
+> = ({ data = DEFAULT_TIMELINE_ENTRIES }) => {
+	const [copyStateById, setCopyStateById] = useState<
+		Record<string, CopyState>
+	>({});
+	const { announcement, announceCopySuccess } = useCopySuccessAnnouncement();
 
 	if (!data || data.length === 0) {
 		return null;
@@ -60,6 +69,7 @@ const EmptyTransactionTimelineState: React.FC<EmptyTransactionTimelineStateProps
 	const copyTxHash = async (entryId: string, txHash: string) => {
 		try {
 			await navigator.clipboard.writeText(txHash);
+			announceCopySuccess('Transaction hash copied.');
 			setCopyStateById(current => ({ ...current, [entryId]: 'success' }));
 		} catch {
 			setCopyStateById(current => ({ ...current, [entryId]: 'error' }));
@@ -105,7 +115,9 @@ const EmptyTransactionTimelineState: React.FC<EmptyTransactionTimelineStateProps
 								className="grid grid-cols-[auto_auto_minmax(0,1fr)_auto] items-center gap-3 rounded-lg border border-white/5 bg-white/[0.04] px-3 py-2 text-xs md:text-sm"
 							>
 								<span className="text-white/80">{entry.action}</span>
-								<span className="font-semibold text-white">{entry.amount}</span>
+								<span className="font-semibold text-white">
+									{entry.amount}
+								</span>
 								<div className="min-w-0">
 									<div className="flex items-center gap-2">
 										<span
@@ -116,7 +128,9 @@ const EmptyTransactionTimelineState: React.FC<EmptyTransactionTimelineStateProps
 										</span>
 										<button
 											type="button"
-											onClick={() => copyTxHash(entry.id, entry.txHash)}
+											onClick={() =>
+												copyTxHash(entry.id, entry.txHash)
+											}
 											className="inline-flex size-6 shrink-0 items-center justify-center rounded-md bg-white/5 text-white/55 transition-colors hover:bg-white/10 hover:text-white"
 											aria-label={
 												isSuccess
@@ -141,11 +155,7 @@ const EmptyTransactionTimelineState: React.FC<EmptyTransactionTimelineStateProps
 										aria-atomic="true"
 										className="sr-only"
 									>
-										{isSuccess
-											? 'Transaction hash copied to clipboard'
-											: isError
-												? 'Failed to copy transaction hash'
-												: ''}
+										{isError ? 'Failed to copy transaction hash' : ''}
 									</span>
 								</div>
 								<div className="text-right">
@@ -161,6 +171,8 @@ const EmptyTransactionTimelineState: React.FC<EmptyTransactionTimelineStateProps
 					})}
 				</div>
 
+				<CopySuccessAnnouncement message={announcement} />
+
 				<div className="mt-5 flex justify-center">
 					<Button className="rounded-xl">Open full history</Button>
 				</div>
diff --git a/src/components/common/TradeDialog.tsx b/src/components/common/TradeDialog.tsx
index bf1677a..6e0d5bd 100644
--- a/src/components/common/TradeDialog.tsx
+++ b/src/components/common/TradeDialog.tsx
@@ -1,5 +1,6 @@
 import { useEffect, useMemo, useRef, useState } from 'react';
 import { Button } from '@/components/ui/button';
+import { StableButtonContent } from '@/components/ui/stable-button-content';
 import {
 	Dialog,
 	DialogContent,
@@ -55,7 +56,10 @@ const TradeDialog: React.FC<TradeDialogProps> = ({
 	const confirmLabel = side === 'buy' ? 'Confirm buy' : 'Confirm sell';
 
 	return (
-		<Dialog open={open} onOpenChange={next => !isSubmitting && onOpenChange(next)}>
+		<Dialog
+			open={open}
+			onOpenChange={next => !isSubmitting && onOpenChange(next)}
+		>
 			<DialogContent
 				className="max-w-md"
 				showCloseButton={!isSubmitting}
@@ -91,14 +95,18 @@ const TradeDialog: React.FC<TradeDialogProps> = ({
 						className={cn(
 							'w-full rounded-xl border bg-white/[0.04] px-3 py-2 text-white outline-none transition-colors',
 							'border-white/10 focus:border-amber-500/50 focus:ring-2 focus:ring-amber-500/15',
-							!amountValid && amountText.trim() ? 'border-red-500/40' : ''
+							!amountValid && amountText.trim()
+								? 'border-red-500/40'
+								: ''
 						)}
 						aria-label="Trade amount"
 						data-focus-order="1"
 						data-testid="trade-dialog-amount"
 					/>
 					<div className="flex flex-wrap items-center gap-2 text-xs text-white/45">
-						<span aria-label={`Current wallet holdings: ${formatNumber(availableHoldings)} keys`}>
+						<span
+							aria-label={`Current wallet holdings: ${formatNumber(availableHoldings)} keys`}
+						>
 							Holdings: {formatNumber(availableHoldings)} keys
 						</span>
 						{side === 'sell' &&
@@ -109,7 +117,9 @@ const TradeDialog: React.FC<TradeDialogProps> = ({
 									label="of holdings"
 									value={(parsedAmount / availableHoldings) * 100}
 									tone={
-										parsedAmount > availableHoldings ? 'negative' : 'neutral'
+										parsedAmount > availableHoldings
+											? 'negative'
+											: 'neutral'
 									}
 								/>
 							)}
@@ -145,10 +155,16 @@ const TradeDialog: React.FC<TradeDialogProps> = ({
 						type="button"
 						onClick={() => onConfirm(parsedAmount)}
 						disabled={!amountValid || isSubmitting}
+						aria-busy={isSubmitting || undefined}
 						data-focus-order="3"
 						data-testid="trade-dialog-confirm"
 					>
-						{isSubmitting ? 'Submitting…' : confirmLabel}
+						<StableButtonContent
+							isLoading={isSubmitting}
+							loadingLabel="Submitting…"
+						>
+							{confirmLabel}
+						</StableButtonContent>
 					</Button>
 				</DialogFooter>
 			</DialogContent>
diff --git a/src/components/common/TransactionFailureDrawer.tsx b/src/components/common/TransactionFailureDrawer.tsx
index 21c63ec..6ccce35 100644
--- a/src/components/common/TransactionFailureDrawer.tsx
+++ b/src/components/common/TransactionFailureDrawer.tsx
@@ -11,6 +11,11 @@ import { Button } from '@/components/ui/button';
 import { AlertCircle, Copy, Check } from 'lucide-react';
 import showToast from '@/utils/toast.util';
 import { formatTimestampTooltip } from '@/utils/time.utils';
+import CopySuccessAnnouncement from '@/components/common/CopySuccessAnnouncement';
+import {
+	COPY_SUCCESS_TOAST_ARIA_PROPS,
+	useCopySuccessAnnouncement,
+} from '@/hooks/useCopySuccessAnnouncement';
 
 export interface TransactionFailureDetails {
 	txHash?: string;
@@ -38,6 +43,7 @@ const TransactionFailureDrawer: React.FC<TransactionFailureDrawerProps> = ({
 	const [copiedField, setCopiedField] = useState<
 		'errorCode' | 'txHash' | null
 	>(null);
+	const { announcement, announceCopySuccess } = useCopySuccessAnnouncement();
 
 	const copyToClipboard = async (
 		text: string,
@@ -45,7 +51,14 @@ const TransactionFailureDrawer: React.FC<TransactionFailureDrawerProps> = ({
 	) => {
 		try {
 			await navigator.clipboard.writeText(text);
-			showToast.success('Copied to clipboard');
+			showToast.success('Copied to clipboard', {
+				ariaProps: COPY_SUCCESS_TOAST_ARIA_PROPS,
+			});
+			announceCopySuccess(
+				field === 'errorCode'
+					? 'Error code copied.'
+					: 'Transaction hash copied.'
+			);
 			setCopiedField(field);
 			window.setTimeout(() => setCopiedField(null), 2000);
 		} catch {
@@ -148,16 +161,6 @@ const TransactionFailureDrawer: React.FC<TransactionFailureDrawerProps> = ({
 									)}
 								</button>
 							</div>
-							<span
-								role="status"
-								aria-live="polite"
-								aria-atomic="true"
-								className="sr-only"
-							>
-								{copiedField === 'errorCode'
-									? 'Error code copied to clipboard'
-									: ''}
-							</span>
 						</div>
 					)}
 
@@ -193,19 +196,11 @@ const TransactionFailureDrawer: React.FC<TransactionFailureDrawerProps> = ({
 									)}
 								</button>
 							</div>
-							<span
-								role="status"
-								aria-live="polite"
-								aria-atomic="true"
-								className="sr-only"
-							>
-								{copiedField === 'txHash'
-									? 'Transaction hash copied to clipboard'
-									: ''}
-							</span>
 						</div>
 					)}
 
+					<CopySuccessAnnouncement message={announcement} />
+
 					{failureDetails.developerDetails &&
 						Object.keys(failureDetails.developerDetails).length > 0 && (
 							<details className="text-sm cursor-pointer group">
diff --git a/src/components/common/TransactionHashRow.tsx b/src/components/common/TransactionHashRow.tsx
index c4d67c0..275dad7 100644
--- a/src/components/common/TransactionHashRow.tsx
+++ b/src/components/common/TransactionHashRow.tsx
@@ -2,6 +2,8 @@ import React, { useState } from 'react';
 import { Copy, Check, ExternalLink } from 'lucide-react';
 import { cn } from '@/lib/utils';
 import { shortenAddress } from '@/lib/web3/format';
+import CopySuccessAnnouncement from '@/components/common/CopySuccessAnnouncement';
+import { useCopySuccessAnnouncement } from '@/hooks/useCopySuccessAnnouncement';
 
 interface TransactionHashRowProps {
 	hash: string;
@@ -17,10 +19,12 @@ const TransactionHashRow: React.FC<TransactionHashRowProps> = ({
 	className,
 }) => {
 	const [copied, setCopied] = useState(false);
+	const { announcement, announceCopySuccess } = useCopySuccessAnnouncement();
 
 	const handleCopy = async (e: React.MouseEvent) => {
 		e.stopPropagation();
 		await navigator.clipboard.writeText(hash);
+		announceCopySuccess('Transaction hash copied.');
 		setCopied(true);
 		setTimeout(() => setCopied(false), 2000);
 	};
@@ -46,22 +50,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={copied ? 'Transaction hash copied' : 'Copy transaction hash'}
+						aria-label={
+							copied
+								? 'Transaction hash copied'
+								: 'Copy transaction hash'
+						}
 					>
 						{copied ? (
-							<Check className="size-3 text-emerald-400" aria-hidden="true" />
+							<Check
+								className="size-3 text-emerald-400"
+								aria-hidden="true"
+							/>
 						) : (
 							<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>
+					<CopySuccessAnnouncement message={announcement} />
 					{explorerUrl && (
 						<a
 							href={explorerUrl}
diff --git a/src/components/common/TruncatedAddress.tsx b/src/components/common/TruncatedAddress.tsx
index 7d05c81..896d7e6 100644
--- a/src/components/common/TruncatedAddress.tsx
+++ b/src/components/common/TruncatedAddress.tsx
@@ -1,6 +1,8 @@
 import { useState } from 'react';
 import { Copy, Check } from 'lucide-react';
 import { cn } from '@/lib/utils';
+import CopySuccessAnnouncement from '@/components/common/CopySuccessAnnouncement';
+import { useCopySuccessAnnouncement } from '@/hooks/useCopySuccessAnnouncement';
 
 interface TruncatedAddressProps {
 	address: string;
@@ -25,9 +27,11 @@ const TruncatedAddress: React.FC<TruncatedAddressProps> = ({
 	className,
 }) => {
 	const [copied, setCopied] = useState(false);
+	const { announcement, announceCopySuccess } = useCopySuccessAnnouncement();
 
 	const handleCopy = async () => {
 		await navigator.clipboard.writeText(address);
+		announceCopySuccess('Address copied.');
 		setCopied(true);
 		setTimeout(() => setCopied(false), 2000);
 	};
@@ -54,14 +58,7 @@ const TruncatedAddress: React.FC<TruncatedAddressProps> = ({
 							<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>
+					<CopySuccessAnnouncement message={announcement} />
 				</>
 			)}
 		</span>
diff --git a/src/components/common/__tests__/CreatorInitialsAvatar.test.tsx b/src/components/common/__tests__/CreatorInitialsAvatar.test.tsx
index 5157bd8..98fedf7 100644
--- a/src/components/common/__tests__/CreatorInitialsAvatar.test.tsx
+++ b/src/components/common/__tests__/CreatorInitialsAvatar.test.tsx
@@ -17,11 +17,10 @@ describe('CreatorInitialsAvatar', () => {
 	it('renders initials fallback with hashed background when image is missing', () => {
 		render(<CreatorInitialsAvatar name="Alex Rivers" creatorId="creator-123" />);
 
-		const initials = screen.getByLabelText('Alex Rivers initials avatar');
-		const avatar = initials.parentElement;
+		const avatar = screen.getByRole('img', { name: 'Alex Rivers avatar' });
 		const colors = getFallbackAvatarColors('creator-123');
 
-		expect(initials).toHaveTextContent('AR');
+		expect(avatar).toHaveTextContent('AR');
 		expect(avatar).toHaveStyle({
 			background: colors.background,
 			color: colors.textColor,
diff --git a/src/components/common/__tests__/CreatorProfileHeader.test.tsx b/src/components/common/__tests__/CreatorProfileHeader.test.tsx
new file mode 100644
index 0000000..186cd75
--- /dev/null
+++ b/src/components/common/__tests__/CreatorProfileHeader.test.tsx
@@ -0,0 +1,34 @@
+import { fireEvent, render, screen, waitFor } from '@testing-library/react';
+import { describe, expect, it } from 'vitest';
+
+import CreatorProfileHeader from '@/components/common/CreatorProfileHeader';
+
+describe('CreatorProfileHeader', () => {
+	it('closes the profile image lightbox with Escape and returns focus to the trigger', async () => {
+		render(
+			<CreatorProfileHeader
+				name="Alex Rivers"
+				handle="arivers"
+				creatorId="arivers"
+				avatarUrl="https://example.com/avatar.png"
+			/>
+		);
+
+		const avatarTrigger = screen.getByRole('button', {
+			name: 'Open Alex Rivers profile image',
+		});
+
+		fireEvent.click(avatarTrigger);
+
+		expect(
+			screen.getByRole('dialog', { name: 'Alex Rivers profile image' })
+		).toBeInTheDocument();
+
+		fireEvent.keyDown(screen.getByRole('dialog'), { key: 'Escape' });
+
+		await waitFor(() => {
+			expect(screen.queryByRole('dialog')).not.toBeInTheDocument();
+		});
+		expect(avatarTrigger).toHaveFocus();
+	});
+});
diff --git a/src/components/common/__tests__/TradeDialog.focusOrder.test.tsx b/src/components/common/__tests__/TradeDialog.focusOrder.test.tsx
index d6588aa..e5eeea2 100644
--- a/src/components/common/__tests__/TradeDialog.focusOrder.test.tsx
+++ b/src/components/common/__tests__/TradeDialog.focusOrder.test.tsx
@@ -10,7 +10,9 @@ import TradeDialog from '@/components/common/TradeDialog';
  * DOM (which would also swap them in the tab sequence) or remove markers.
  */
 describe('TradeDialog focus order', () => {
-	function renderDialog(overrides: Partial<React.ComponentProps<typeof TradeDialog>> = {}) {
+	function renderDialog(
+		overrides: Partial<React.ComponentProps<typeof TradeDialog>> = {}
+	) {
 		return render(
 			<TradeDialog
 				open={true}
@@ -45,9 +47,12 @@ describe('TradeDialog focus order', () => {
 		renderDialog();
 
 		const elements = Array.from(
-			document.querySelectorAll('[data-slot="dialog-close"], [data-focus-order]')
+			document.querySelectorAll(
+				'[data-slot="dialog-close"], [data-focus-order]'
+			)
 		).map(el => ({
-			identifier: el.getAttribute('data-testid') || el.getAttribute('data-slot'),
+			identifier:
+				el.getAttribute('data-testid') || el.getAttribute('data-slot'),
 			order: el.getAttribute('data-focus-order') || '0',
 		}));
 
@@ -76,6 +81,17 @@ describe('TradeDialog focus order', () => {
 		expect(cancel.getAttribute('tabindex')).not.toBe('-1');
 	});
 
+	it('reserves the confirm button width while showing the submitting state', () => {
+		renderDialog({ isSubmitting: true });
+
+		const confirm = screen.getByTestId('trade-dialog-confirm');
+
+		expect(confirm).toHaveAttribute('aria-busy', 'true');
+		expect(screen.getByText('Confirm buy')).toHaveClass('invisible');
+		expect(screen.getByText('Submitting…')).toBeVisible();
+		expect(confirm.querySelector('.animate-spin')).toBeInTheDocument();
+	});
+
 	it('preserves the same focus order in the sell variant', () => {
 		renderDialog({ side: 'sell' });
 
diff --git a/src/components/common/__tests__/TransactionHashRow.test.tsx b/src/components/common/__tests__/TransactionHashRow.test.tsx
new file mode 100644
index 0000000..b55b1aa
--- /dev/null
+++ b/src/components/common/__tests__/TransactionHashRow.test.tsx
@@ -0,0 +1,41 @@
+import { act, fireEvent, render, screen } from '@testing-library/react';
+import { describe, expect, it, vi } from 'vitest';
+
+import TransactionHashRow from '@/components/common/TransactionHashRow';
+
+describe('TransactionHashRow', () => {
+	it('announces copy success in a visually hidden live region', async () => {
+		vi.useFakeTimers();
+		const writeText = vi.fn().mockResolvedValue(undefined);
+		Object.defineProperty(navigator, 'clipboard', {
+			configurable: true,
+			value: { writeText },
+		});
+
+		render(<TransactionHashRow hash="0xabcdef1234567890" />);
+
+		await act(async () => {
+			fireEvent.click(
+				screen.getByRole('button', { name: 'Copy transaction hash' })
+			);
+		});
+
+		expect(writeText).toHaveBeenCalledWith('0xabcdef1234567890');
+		expect(
+			screen.getByRole('button', { name: 'Transaction hash copied' })
+		).toBeInTheDocument();
+
+		act(() => {
+			vi.advanceTimersByTime(25);
+		});
+
+		const status = screen.getByRole('status');
+		expect(status).toHaveTextContent('Transaction hash copied.');
+		expect(status).toHaveClass('sr-only');
+		expect(status).not.toHaveTextContent(
+			'Transaction hash copied to clipboard'
+		);
+
+		vi.useRealTimers();
+	});
+});
diff --git a/src/components/ui/__tests__/stable-button-content.test.tsx b/src/components/ui/__tests__/stable-button-content.test.tsx
new file mode 100644
index 0000000..0d7b411
--- /dev/null
+++ b/src/components/ui/__tests__/stable-button-content.test.tsx
@@ -0,0 +1,44 @@
+import { render, screen } from '@testing-library/react';
+import { describe, expect, it } from 'vitest';
+
+import { Button } from '@/components/ui/button';
+import { StableButtonContent } from '@/components/ui/stable-button-content';
+
+describe('StableButtonContent', () => {
+	it('keeps idle and loading content mounted so button width can be reserved', () => {
+		render(
+			<Button>
+				<StableButtonContent isLoading={false} loadingLabel="Saving…">
+					Save changes
+				</StableButtonContent>
+			</Button>
+		);
+
+		const idleContent = screen.getByText('Save changes');
+		const loadingContent = screen.getByText('Saving…');
+
+		expect(idleContent).toBeVisible();
+		expect(idleContent).not.toHaveAttribute('aria-hidden');
+		expect(loadingContent).toHaveClass('invisible');
+		expect(loadingContent).toHaveAttribute('aria-hidden', 'true');
+	});
+
+	it('reveals the loading label and spinner while reserving the idle label', () => {
+		render(
+			<Button aria-busy="true">
+				<StableButtonContent isLoading loadingLabel="Saving…">
+					Save changes
+				</StableButtonContent>
+			</Button>
+		);
+
+		const idleContent = screen.getByText('Save changes');
+		const loadingContent = screen.getByText('Saving…');
+
+		expect(idleContent).toHaveClass('invisible');
+		expect(idleContent).toHaveAttribute('aria-hidden', 'true');
+		expect(loadingContent).toBeVisible();
+		expect(loadingContent).not.toHaveAttribute('aria-hidden');
+		expect(document.querySelector('.animate-spin')).toBeInTheDocument();
+	});
+});
diff --git a/src/components/ui/stable-button-content.tsx b/src/components/ui/stable-button-content.tsx
new file mode 100644
index 0000000..b97c125
--- /dev/null
+++ b/src/components/ui/stable-button-content.tsx
@@ -0,0 +1,60 @@
+import * as React from 'react';
+import { Loader2 } from 'lucide-react';
+
+import { cn } from '@/lib/utils';
+
+export interface StableButtonContentProps {
+	/** Whether the loading slot should be visible to sighted users and assistive tech. */
+	isLoading: boolean;
+	/** Button label or content shown when the action is idle. */
+	children: React.ReactNode;
+	/** Optional loading label. Defaults to keeping only the spinner visible. */
+	loadingLabel?: React.ReactNode;
+	/** Override the default spinner. Pass null to hide it. */
+	spinner?: React.ReactNode;
+	className?: string;
+	idleClassName?: string;
+	loadingClassName?: string;
+}
+
+/**
+ * Renders idle and loading button content in the same grid cell so both states
+ * contribute to the button's intrinsic width. The inactive state stays
+ * invisible (not `display: none`), which reserves enough space before a loading
+ * transition and prevents neighboring layout from jumping.
+ */
+export function StableButtonContent({
+	isLoading,
+	children,
+	loadingLabel,
+	spinner = <Loader2 className="size-4 animate-spin" aria-hidden="true" />,
+	className,
+	idleClassName,
+	loadingClassName,
+}: StableButtonContentProps) {
+	return (
+		<span className={cn('grid items-center justify-items-center', className)}>
+			<span
+				className={cn(
+					'col-start-1 row-start-1 inline-flex items-center justify-center gap-2',
+					isLoading && 'invisible',
+					idleClassName
+				)}
+				aria-hidden={isLoading || undefined}
+			>
+				{children}
+			</span>
+			<span
+				className={cn(
+					'col-start-1 row-start-1 inline-flex items-center justify-center gap-2',
+					!isLoading && 'invisible',
+					loadingClassName
+				)}
+				aria-hidden={!isLoading || undefined}
+			>
+				{spinner}
+				{loadingLabel}
+			</span>
+		</span>
+	);
+}
diff --git a/src/hooks/__tests__/useCopySuccessAnnouncement.test.tsx b/src/hooks/__tests__/useCopySuccessAnnouncement.test.tsx
new file mode 100644
index 0000000..430b1cc
--- /dev/null
+++ b/src/hooks/__tests__/useCopySuccessAnnouncement.test.tsx
@@ -0,0 +1,45 @@
+import { act, renderHook } from '@testing-library/react';
+import { describe, expect, it, vi } from 'vitest';
+
+import {
+	COPY_SUCCESS_ANNOUNCEMENT,
+	COPY_SUCCESS_TOAST_ARIA_PROPS,
+	useCopySuccessAnnouncement,
+} from '@/hooks/useCopySuccessAnnouncement';
+
+describe('useCopySuccessAnnouncement', () => {
+	it('announces copy success through a reusable live-region message', () => {
+		vi.useFakeTimers();
+
+		const { result } = renderHook(() =>
+			useCopySuccessAnnouncement({ clearAfterMs: 100 })
+		);
+
+		act(() => {
+			result.current.announceCopySuccess();
+		});
+
+		expect(result.current.announcement).toBe('');
+
+		act(() => {
+			vi.advanceTimersByTime(25);
+		});
+
+		expect(result.current.announcement).toBe(COPY_SUCCESS_ANNOUNCEMENT);
+
+		act(() => {
+			vi.advanceTimersByTime(100);
+		});
+
+		expect(result.current.announcement).toBe('');
+
+		vi.useRealTimers();
+	});
+
+	it('provides aria-live off props for visible copy-success toasts', () => {
+		expect(COPY_SUCCESS_TOAST_ARIA_PROPS).toEqual({
+			role: 'status',
+			'aria-live': 'off',
+		});
+	});
+});
diff --git a/src/hooks/useCopySuccessAnnouncement.ts b/src/hooks/useCopySuccessAnnouncement.ts
new file mode 100644
index 0000000..3780a76
--- /dev/null
+++ b/src/hooks/useCopySuccessAnnouncement.ts
@@ -0,0 +1,63 @@
+import { useCallback, useEffect, useRef, useState } from 'react';
+import type { ToastOptions } from 'react-hot-toast';
+
+export const COPY_SUCCESS_ANNOUNCEMENT = 'Copy successful.';
+
+export const COPY_SUCCESS_TOAST_ARIA_PROPS: NonNullable<
+	ToastOptions['ariaProps']
+> = {
+	role: 'status',
+	'aria-live': 'off',
+};
+
+interface UseCopySuccessAnnouncementOptions {
+	/**
+	 * How long the live region should keep the announcement text after a copy.
+	 */
+	clearAfterMs?: number;
+}
+
+export function useCopySuccessAnnouncement({
+	clearAfterMs = 2000,
+}: UseCopySuccessAnnouncementOptions = {}) {
+	const [announcement, setAnnouncement] = useState('');
+	const announceTimerRef = useRef<number | null>(null);
+	const clearTimerRef = useRef<number | null>(null);
+
+	const clearTimers = useCallback(() => {
+		if (announceTimerRef.current !== null) {
+			window.clearTimeout(announceTimerRef.current);
+			announceTimerRef.current = null;
+		}
+
+		if (clearTimerRef.current !== null) {
+			window.clearTimeout(clearTimerRef.current);
+			clearTimerRef.current = null;
+		}
+	}, []);
+
+	const announceCopySuccess = useCallback(
+		(message = COPY_SUCCESS_ANNOUNCEMENT) => {
+			clearTimers();
+			setAnnouncement('');
+
+			announceTimerRef.current = window.setTimeout(() => {
+				setAnnouncement(message);
+				announceTimerRef.current = null;
+
+				clearTimerRef.current = window.setTimeout(() => {
+					setAnnouncement('');
+					clearTimerRef.current = null;
+				}, clearAfterMs);
+			}, 25);
+		},
+		[clearAfterMs, clearTimers]
+	);
+
+	useEffect(() => clearTimers, [clearTimers]);
+
+	return {
+		announcement,
+		announceCopySuccess,
+	};
+}
diff --git a/src/utils/toast.util.tsx b/src/utils/toast.util.tsx
index aedb0c7..29d8d64 100644
--- a/src/utils/toast.util.tsx
+++ b/src/utils/toast.util.tsx
@@ -1,22 +1,23 @@
 import toast from 'react-hot-toast';
+import type { ToastOptions } from 'react-hot-toast';
 import TransactionHashRow from '@/components/common/TransactionHashRow';
 
 const showToast = {
-	message: (message: string) => {
+	message: (message: string, options?: ToastOptions) => {
 		toast.remove();
-		toast(message);
+		toast(message, options);
 	},
-	success: (message: string) => {
+	success: (message: string, options?: ToastOptions) => {
 		toast.remove();
-		toast.success(message);
+		toast.success(message, options);
 	},
-	error: (message: string) => {
+	error: (message: string, options?: ToastOptions) => {
 		toast.remove();
-		toast.error(message);
+		toast.error(message, options);
 	},
-	loading: (message: string) => {
+	loading: (message: string, options?: ToastOptions) => {
 		toast.remove();
-		toast.loading(message);
+		toast.loading(message, options);
 	},
 	transactionSuccess: (
 		title: string,