A11y enhancements

Author: jsoningram

src/app/globals.css

@@ -236,3 +236,16 @@ a {
   color: inherit;
   text-decoration: none;
 }
+
+/* Visually hidden but available to screen readers */
+.sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border-width: 0;
+}

src/app/layout.module.css

@@ -10,7 +10,7 @@
   border-radius: 4px;
 }
 
-.skipLink:focus {
+.skipLink:focus-visible {
   top: 0;
   outline: 2px solid white;
   outline-offset: 2px;

src/app/page.tsx

@@ -121,10 +121,14 @@ export default function Home() {
   }, []);
 
   const handleBurnComplete = useCallback(() => {
+    const prefersReducedMotion = window.matchMedia(
+      '(prefers-reduced-motion: reduce)',
+    ).matches;
+
     window.scrollTo({
       top: 0,
       left: 0,
-      behavior: 'smooth',
+      behavior: prefersReducedMotion ? 'auto' : 'smooth',
     });
 
     window.location.reload();

src/components/chat-navigation/chat-navigation.tsx

@@ -1,5 +1,6 @@
 import { MAIN_SITE_URL } from '@/config/common';
 import styles from './chat-navigation.module.css';
+import NewTabLabel from '@/components/new-tab-label/new-tab-label';
 
 /**
  * ChatNavigation component displays help links at the bottom of the chat widget.
@@ -18,6 +19,7 @@ export default function ChatNavigation() {
           className={styles.link}
         >
           FAQs and Support
+          <NewTabLabel />
         </a>
         <a
           href={`${MAIN_SITE_URL}/feedback`}
@@ -26,6 +28,7 @@ export default function ChatNavigation() {
           className={styles.link}
         >
           Send Feedback
+          <NewTabLabel />
         </a>
       </div>
     </nav>

src/components/confirm-dialog/confirm-dialog.tsx

@@ -10,6 +10,15 @@ import {
   CONFIRM_DELETE_DATA_BUTTON_TEST_ID,
 } from '@/constants/test-ids';
 
+const FOCUSABLE_SELECTORS = [
+  'a[href]',
+  'button:not([disabled])',
+  'input:not([disabled])',
+  'select:not([disabled])',
+  'textarea:not([disabled])',
+  '[tabindex]:not([tabindex="-1"])',
+].join(', ');
+
 interface ConfirmDialogProps {
   isOpen: boolean;
   onConfirm: () => void;
@@ -39,34 +48,57 @@ export default function ConfirmDialog({
 }: ConfirmDialogProps) {
   const dialogRef = useRef<HTMLDivElement>(null);
   const confirmButtonRef = useRef<HTMLButtonElement>(null);
+  const triggerRef = useRef<HTMLElement | null>(null);
 
-  // Focus the confirm button when dialog opens
+  // Capture the trigger element, move focus into dialog on open,
+  // and restore focus to the trigger on close.
   useEffect(() => {
-    if (isOpen && confirmButtonRef.current) {
-      confirmButtonRef.current.focus();
+    if (isOpen) {
+      triggerRef.current = document.activeElement as HTMLElement;
+      confirmButtonRef.current?.focus();
+    } else {
+      triggerRef.current?.focus();
+      triggerRef.current = null;
     }
   }, [isOpen]);
 
-  // Handle escape key
+  // Focus trap + Escape key (only active while open)
   useEffect(() => {
-    const handleEscape = (e: KeyboardEvent) => {
-      if (e.key === 'Escape' && isOpen) {
+    if (!isOpen) return;
+
+    const handleKeyDown = (e: KeyboardEvent) => {
+      if (e.key === 'Escape') {
         onCancel();
+        return;
+      }
+
+      if (e.key !== 'Tab' || !dialogRef.current) return;
+
+      const focusable = Array.from(
+        dialogRef.current.querySelectorAll<HTMLElement>(FOCUSABLE_SELECTORS),
+      );
+
+      if (focusable.length === 0) return;
+
+      const first = focusable[0];
+      const last = focusable[focusable.length - 1];
+
+      if (e.shiftKey && document.activeElement === first) {
+        e.preventDefault();
+        last.focus();
+      } else if (!e.shiftKey && document.activeElement === last) {
+        e.preventDefault();
+        first.focus();
       }
     };
 
-    document.addEventListener('keydown', handleEscape);
-    return () => document.removeEventListener('keydown', handleEscape);
+    document.addEventListener('keydown', handleKeyDown);
+    return () => document.removeEventListener('keydown', handleKeyDown);
   }, [isOpen, onCancel]);
 
   // Prevent body scroll when dialog is open
   useEffect(() => {
-    if (isOpen) {
-      document.body.style.overflow = 'hidden';
-    } else {
-      document.body.style.overflow = '';
-    }
-
+    document.body.style.overflow = isOpen ? 'hidden' : '';
     return () => {
       document.body.style.overflow = '';
     };
@@ -101,6 +133,7 @@ export default function ConfirmDialog({
           type="button"
         >
           <svg
+            aria-hidden="true"
             width="24"
             height="24"
             viewBox="0 0 24 24"

src/components/consent-form/consent-form.tsx

@@ -2,6 +2,7 @@
 
 import { Button } from '@/components/button/button';
 import { MAIN_SITE_URL } from '@/config/common';
+import NewTabLabel from '@/components/new-tab-label/new-tab-label';
 import { LOAD_ZD_BUTTON_TEST_ID } from '@/constants/test-ids';
 import { REDIRECT_DELAY_MS } from '@/constants/zendesk-timing';
 import { DECLINE_BUTTON_TEXT, CONSENT_BUTTON_TEXT } from '@/config/zendesk';
@@ -27,6 +28,7 @@ export default function ConsentForm({ onContinue }: ConsentFormProps) {
             className={styles.link}
           >
             contact us
+            <NewTabLabel />
           </a>
           . We try to answer questions within 2 business days.
           <span>

src/components/footer/footer.tsx

@@ -3,6 +3,7 @@
 import styles from './footer.module.css';
 import { learnMoreLinks, otherResourcesLinks } from '@/constants/footerLinks';
 import { MAIN_SITE_URL } from '@/config/common';
+import NewTabLabel from '@/components/new-tab-label/new-tab-label';
 
 export default function Footer() {
   const buildHref = (href: string): string => {
@@ -33,6 +34,7 @@ export default function Footer() {
                 {link.badge && (
                   <span className={styles.badge}>{link.badge}</span>
                 )}
+                <NewTabLabel />
               </a>
             ))}
           </div>
@@ -50,6 +52,7 @@ export default function Footer() {
                 rel={link.rel ?? undefined}
               >
                 {link.text}
+                <NewTabLabel />
               </a>
             ))}
           </div>
@@ -69,6 +72,7 @@ export default function Footer() {
               href={`${MAIN_SITE_URL}/compare-privacy`}
             >
               choose DuckDuckGo over Chrome and other browsers
+              <NewTabLabel />
             </a>{' '}
             to search and browse online. Our built-in search engine is like
             Google but never tracks your searches. And our browsing protections,
@@ -82,6 +86,7 @@ export default function Footer() {
               href={`${MAIN_SITE_URL}/duckduckgo-help-pages/company/how-duckduckgo-makes-money`}
             >
               privacy-respecting search ads
+              <NewTabLabel />
             </a>
             , not by exploiting your data. Take back control of your personal
             information with the browser designed for data protection, not data
@@ -93,6 +98,7 @@ export default function Footer() {
               href={`${MAIN_SITE_URL}/mac`}
             >
               Mac
+              <NewTabLabel />
             </a>
             ,{' '}
             <a
@@ -102,6 +108,7 @@ export default function Footer() {
               href={`${MAIN_SITE_URL}/windows`}
             >
               Windows
+              <NewTabLabel />
             </a>
             ,{' '}
             <a
@@ -111,6 +118,7 @@ export default function Footer() {
               href="https://apps.apple.com/app/duckduckgo-privacy-browser/id663592361?platform=iphone"
             >
               iOS
+              <NewTabLabel />
             </a>
             , and{' '}
             <a
@@ -120,6 +128,7 @@ export default function Footer() {
               href="https://play.google.com/store/apps/details?id=com.duckduckgo.mobile.android"
             >
               Android
+              <NewTabLabel />
             </a>
             .
           </p>

src/components/new-tab-label/new-tab-label.tsx

@@ -0,0 +1,3 @@
+export default function NewTabLabel() {
+  return <span className="sr-only">(opens in new tab)</span>;
+}