a11y(customizer): add aria-live feedback for copy action (JhaSourav07#441)

Author: ManthanTerse

app/customize/components/ExportPanel.test.tsx

@@ -0,0 +1,32 @@
+import { fireEvent, render, screen } from '@testing-library/react';
+import { describe, expect, it, vi } from 'vitest';
+import { ExportPanel } from './ExportPanel';
+
+describe('ExportPanel', () => {
+  it('announces copy success through a polite live region', () => {
+    const onCopy = vi.fn();
+
+    render(
+      <ExportPanel
+        format="markdown"
+        snippet="![CommitPulse](https://commitpulse.vercel.app/api/streak?user=octocat)"
+        copied
+        copyStatusMessage="Markdown snippet copied to clipboard."
+        hasUsername
+        onFormatChange={vi.fn()}
+        onCopy={onCopy}
+      />
+    );
+
+    const copyButton = screen.getByRole('button', {
+      name: /copy markdown export snippet to clipboard/i,
+    });
+
+    fireEvent.click(copyButton);
+
+    expect(onCopy).toHaveBeenCalledTimes(1);
+    expect(copyButton.getAttribute('aria-describedby')).toBe('export-copy-status');
+    expect(screen.getByRole('status').textContent).toBe('Markdown snippet copied to clipboard.');
+    expect(screen.getByText('Copied!')).toBeDefined();
+  });
+});

app/customize/components/ExportPanel.tsx

@@ -11,19 +11,24 @@ export function ExportPanel({
   format,
   snippet,
   copied,
+  copyStatusMessage,
   hasUsername,
   onFormatChange,
   onCopy,
 }: {
   format: ExportFormat;
   snippet: string;
   copied: boolean;
+  copyStatusMessage: string;
   hasUsername: boolean;
   onFormatChange: (format: ExportFormat) => void;
-  onCopy: () => void;
+  onCopy: () => void | Promise<void>;
 }): ReactElement {
   const activeSnippet = hasUsername ? snippet : getPlaceholderSnippet(format);
   const formatLabel = format === 'markdown' ? 'Markdown' : 'HTML';
+  const copyButtonLabel = hasUsername
+    ? `Copy ${formatLabel} export snippet to clipboard`
+    : `Add a GitHub username to enable copying the ${formatLabel} export snippet`;
 
   return (
     <div className="bg-[#0a0a0a] border border-white/5 rounded-[1.75rem] p-6">
@@ -63,6 +68,8 @@ export function ExportPanel({
             id="copy-markdown-btn"
             onClick={onCopy}
             disabled={!hasUsername}
+            aria-label={copyButtonLabel}
+            aria-describedby="export-copy-status"
             className={`relative inline-flex items-center gap-2 px-4 py-2 rounded-xl text-xs font-bold transition-all duration-200 ${
               !hasUsername
                 ? 'bg-white/[0.04] border border-white/8 text-white/30'
@@ -111,6 +118,16 @@ export function ExportPanel({
         </div>
       </div>
 
+      <p
+        id="export-copy-status"
+        role="status"
+        aria-live="polite"
+        aria-atomic="true"
+        className="sr-only"
+      >
+        {copyStatusMessage}
+      </p>
+
       <div className="bg-black/60 border border-white/8 rounded-xl px-5 py-4 overflow-x-auto">
         <code className="text-emerald-300 text-xs font-mono leading-relaxed break-all whitespace-pre-wrap">
           {activeSnippet}

app/customize/page.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import { useCallback, useState, type ReactElement } from 'react';
+import { useCallback, useEffect, useRef, useState, type ReactElement } from 'react';
 import Link from 'next/link';
 import { motion } from 'framer-motion';
 import { ControlsPanel } from './components/ControlsPanel';
@@ -23,12 +23,24 @@ export default function CustomizePage(): ReactElement {
   const [size, setSize] = useState<BadgeSize>('medium');
   const [exportFormat, setExportFormat] = useState<ExportFormat>('markdown');
   const [copied, setCopied] = useState(false);
+  const [copyStatusMessage, setCopyStatusMessage] = useState('');
+  const copyResetTimeoutRef = useRef<number | null>(null);
   const trimmedUsername = username.trim();
   const hasUsername = trimmedUsername.length > 0;
   const isAutoTheme = theme === 'auto';
   const isRandomTheme = theme === 'random';
   const skipsCustomColors = isAutoTheme || isRandomTheme;
 
+  useEffect(() => {
+    return () => {
+      if (copyResetTimeoutRef.current !== null) {
+        window.clearTimeout(copyResetTimeoutRef.current);
+      }
+    };
+  }, []);
+
+  // Clear custom hex overrides when switching to auto — fixed colors
+  // conflict with the dual-palette prefers-color-scheme switching.
   // Clear custom hex overrides when switching to virtual themes because
   // fixed colors conflict with their palette-selection behavior.
   const handleThemeChange = useCallback((newTheme: string): void => {
@@ -89,12 +101,37 @@ export default function CustomizePage(): ReactElement {
   const previewSrc = `/api/streak?${queryString}`;
   const exportSnippet = getExportSnippet(exportFormat, queryString);
 
-  const copyExportSnippet = (): void => {
+  const announceCopyStatus = useCallback((message: string): void => {
+    setCopyStatusMessage('');
+    window.setTimeout(() => {
+      setCopyStatusMessage(message);
+    }, 0);
+  }, []);
+
+  const copyExportSnippet = async (): Promise<void> => {
     if (!hasUsername) return;
 
-    navigator.clipboard.writeText(exportSnippet);
-    setCopied(true);
-    setTimeout(() => setCopied(false), 3000);
+    try {
+      await navigator.clipboard.writeText(exportSnippet);
+      setCopied(true);
+      announceCopyStatus(
+        `${exportFormat === 'markdown' ? 'Markdown' : 'HTML'} snippet copied to clipboard.`
+      );
+
+      if (copyResetTimeoutRef.current !== null) {
+        window.clearTimeout(copyResetTimeoutRef.current);
+      }
+
+      copyResetTimeoutRef.current = window.setTimeout(() => {
+        setCopied(false);
+        setCopyStatusMessage('');
+      }, 3000);
+    } catch {
+      setCopied(false);
+      announceCopyStatus(
+        `Unable to copy the ${exportFormat === 'markdown' ? 'Markdown' : 'HTML'} snippet.`
+      );
+    }
   };
 
   return (
@@ -273,6 +310,7 @@ export default function CustomizePage(): ReactElement {
               format={exportFormat}
               snippet={exportSnippet}
               copied={copied}
+              copyStatusMessage={copyStatusMessage}
               hasUsername={hasUsername}
               onFormatChange={setExportFormat}
               onCopy={copyExportSnippet}