From 62657bdf3ac7988f66dd898fbd219aa027c568c2 Mon Sep 17 00:00:00 2001
From: SakethSumanBathini <sakethsumanbathini@gmail.com>
Date: Thu, 6 Aug 2026 11:22:49 +0530
Subject: [PATCH] fix(a11y): add visible focus rings to footer links (Closes
 #122)

---
 frontend/src/components/LandingPage.tsx | 19 +++++++++++++++----
 frontend/src/components/LegalPage.tsx   |  6 +++---
 2 files changed, 18 insertions(+), 7 deletions(-)

diff --git a/frontend/src/components/LandingPage.tsx b/frontend/src/components/LandingPage.tsx
index 313a517..2b2f541 100644
--- a/frontend/src/components/LandingPage.tsx
+++ b/frontend/src/components/LandingPage.tsx
@@ -406,11 +406,22 @@ const LandingPage: React.FC<LandingPageProps> = ({ hasWorkspaceAccess, entryNoti
             <span>© 2026</span>
           </div>
           <div className="flex items-center gap-6">
-            <a href="https://github.com/harsharajkumar/proofdesk" target="_blank" rel="noopener noreferrer" className="flex items-center gap-1.5 hover:text-zinc-700 dark:hover:text-zinc-300 transition-colors">
-              <Github className="w-4 h-4" /> GitHub
+            {/* A visible focus ring on every footer link.
+                 Keyboard users previously had only the browser default, which
+                 is nearly invisible against these muted greys. Matches the
+                 convention already used in EditorImportPane. */}
+            <a
+              href="https://github.com/harsharajkumar/proofdesk"
+              target="_blank"
+              rel="noopener noreferrer"
+              title="View Proofdesk on GitHub (opens in a new tab)"
+              className="flex items-center gap-1.5 hover:text-zinc-700 dark:hover:text-zinc-300 transition-colors outline-none focus-visible:ring-2 focus-visible:ring-indigo-500 focus-visible:ring-offset-2 dark:focus-visible:ring-offset-zinc-950 rounded-sm"
+            >
+              <Github className="w-4 h-4" aria-hidden="true" /> GitHub
+              <span className="sr-only">(opens in a new tab)</span>
             </a>
-            <Link to="/terms" className="hover:text-zinc-700 dark:hover:text-zinc-300 transition-colors">Terms</Link>
-            <Link to="/privacy" className="hover:text-zinc-700 dark:hover:text-zinc-300 transition-colors">Privacy</Link>
+            <Link to="/terms" className="hover:text-zinc-700 dark:hover:text-zinc-300 transition-colors outline-none focus-visible:ring-2 focus-visible:ring-indigo-500 focus-visible:ring-offset-2 dark:focus-visible:ring-offset-zinc-950 rounded-sm">Terms</Link>
+            <Link to="/privacy" className="hover:text-zinc-700 dark:hover:text-zinc-300 transition-colors outline-none focus-visible:ring-2 focus-visible:ring-indigo-500 focus-visible:ring-offset-2 dark:focus-visible:ring-offset-zinc-950 rounded-sm">Privacy</Link>
           </div>
         </div>
       </footer>
diff --git a/frontend/src/components/LegalPage.tsx b/frontend/src/components/LegalPage.tsx
index aee8733..424aa3b 100644
--- a/frontend/src/components/LegalPage.tsx
+++ b/frontend/src/components/LegalPage.tsx
@@ -55,9 +55,9 @@ const LegalPage: React.FC<LegalPageProps> = ({ title, lastUpdated, sections }) =
       <div className="max-w-4xl mx-auto flex items-center justify-between text-sm text-zinc-400">
         <span>© 2026 {PRODUCT_NAME}</span>
         <div className="flex gap-5">
-          <Link to="/terms" className="hover:text-zinc-600 dark:hover:text-zinc-300 transition-colors">Terms</Link>
-          <Link to="/privacy" className="hover:text-zinc-600 dark:hover:text-zinc-300 transition-colors">Privacy</Link>
-          <Link to="/" className="hover:text-zinc-600 dark:hover:text-zinc-300 transition-colors">Home</Link>
+          <Link to="/terms" className="hover:text-zinc-600 dark:hover:text-zinc-300 transition-colors outline-none focus-visible:ring-2 focus-visible:ring-indigo-500 focus-visible:ring-offset-2 dark:focus-visible:ring-offset-zinc-950 rounded-sm">Terms</Link>
+          <Link to="/privacy" className="hover:text-zinc-600 dark:hover:text-zinc-300 transition-colors outline-none focus-visible:ring-2 focus-visible:ring-indigo-500 focus-visible:ring-offset-2 dark:focus-visible:ring-offset-zinc-950 rounded-sm">Privacy</Link>
+          <Link to="/" className="hover:text-zinc-600 dark:hover:text-zinc-300 transition-colors outline-none focus-visible:ring-2 focus-visible:ring-indigo-500 focus-visible:ring-offset-2 dark:focus-visible:ring-offset-zinc-950 rounded-sm">Home</Link>
         </div>
       </div>
     </footer>