From ce25ba70df5e3f045a7f31f1d5c93ec294f11ec0 Mon Sep 17 00:00:00 2001
From: Chhavi Mishra <chhavimishra.1729@gmail.com>
Date: Fri, 5 Jun 2026 10:58:15 +0530
Subject: [PATCH] feat(a11y): add keyboard navigation support

- autoFocus on GitHub Username input on page load
- Escape key clears username input and returns focus
- focus-visible ring on all navbar buttons
- focus-visible ring on Hero CTA link
- Global :focus-visible CSS for consistent focus indicators
- aria-labels on Tabs for screen reader support

Closes #631
---
 src/components/Hero.tsx       |  2 +-
 src/components/Navbar.tsx     |  6 +++---
 src/index.css                 | 10 ++++++++++
 src/pages/Tracker/Tracker.tsx | 19 ++++++++++++++++---
 4 files changed, 30 insertions(+), 7 deletions(-)

diff --git a/src/components/Hero.tsx b/src/components/Hero.tsx
index a606d777..46a05b59 100644
--- a/src/components/Hero.tsx
+++ b/src/components/Hero.tsx
@@ -34,7 +34,7 @@ const Hero = () => {
 
             <div className="pt-4 flex flex-wrap gap-4">
               {/* Interactive Primary Link Button */}
-              <Link to='/track' className="group relative inline-flex items-center justify-center p-0.5 overflow-hidden text-sm font-semibold rounded-xl bg-gradient-to-br from-blue-600 via-cyan-500 to-teal-500 dark:from-blue-500 dark:via-cyan-400 dark:to-teal-400 text-slate-900 dark:text-white transition-all shadow-md dark:shadow-[0_0_20px_rgba(59,130,246,0.3)] hover:shadow-lg dark:hover:shadow-[0_0_35px_rgba(34,211,238,0.5)] transform hover:-translate-y-0.5">
+              <Link to='/track' className="group relative inline-flex items-center justify-center p-0.5 overflow-hidden text-sm font-semibold rounded-xl bg-gradient-to-br from-blue-600 via-cyan-500 to-teal-500 dark:from-blue-500 dark:via-cyan-400 dark:to-teal-400 text-slate-900 dark:text-white transition-all shadow-md dark:shadow-[0_0_20px_rgba(59,130,246,0.3)] hover:shadow-lg dark:hover:shadow-[0_0_35px_rgba(34,211,238,0.5)] transform hover:-translate-y-0.5 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-500 focus-visible:ring-offset-2">
                 <span className="relative px-7 py-3.5 transition-all ease-in duration-75 bg-white dark:bg-[#030712] rounded-[10px] group-hover:bg-opacity-0 flex items-center space-x-2">
                   <Search className="h-5 w-5 text-blue-600 dark:text-cyan-400 group-hover:text-white transition-colors" />
                   <span className="text-slate-900 dark:text-white group-hover:text-white">Start Tracking</span>
diff --git a/src/components/Navbar.tsx b/src/components/Navbar.tsx
index fd5eac86..881028f1 100644
--- a/src/components/Navbar.tsx
+++ b/src/components/Navbar.tsx
@@ -60,7 +60,7 @@ const Navbar: React.FC = () => {
           {/* Theme Toggle */}
           <button
             onClick={toggleTheme}
-            className="ml-2 p-2 rounded-xl border border-gray-300 dark:border-gray-700 hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors"
+            className="ml-2 p-2 rounded-xl border border-gray-300 dark:border-gray-700 hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-500 focus-visible:ring-offset-2"
             aria-label="Toggle Theme"
           >
             {mode === "dark" ? (
@@ -77,7 +77,7 @@ const Navbar: React.FC = () => {
           {/* Theme Toggle */}
           <button
             onClick={toggleTheme}
-            className="p-2 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors"
+            className="p-2 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-500 focus-visible:ring-offset-2"
             aria-label="Toggle Theme"
           >
             {mode === "dark" ? (
@@ -90,7 +90,7 @@ const Navbar: React.FC = () => {
           {/* Menu Toggle */}
           <button
             onClick={() => setIsOpen(!isOpen)}
-            className="p-2 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors"
+            className="p-2 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-500 focus-visible:ring-offset-2"
             aria-label="Toggle Menu"
           >
             {isOpen ? (
diff --git a/src/index.css b/src/index.css
index 3f5943c5..c7080aab 100644
--- a/src/index.css
+++ b/src/index.css
@@ -89,3 +89,13 @@
 .icon-issue-closed {
   color: #cf222e;
 }
+
+/* Keyboard navigation: suppress focus ring for mouse, show for keyboard */
+:focus:not(:focus-visible) {
+  outline: none;
+}
+:focus-visible {
+  outline: 2px solid #3b82f6;
+  outline-offset: 2px;
+  border-radius: 4px;
+}
\ No newline at end of file
diff --git a/src/pages/Tracker/Tracker.tsx b/src/pages/Tracker/Tracker.tsx
index 576f39bf..beb61280 100644
--- a/src/pages/Tracker/Tracker.tsx
+++ b/src/pages/Tracker/Tracker.tsx
@@ -1,4 +1,4 @@
-import React, { useState, useEffect } from "react"
+import React, { useState, useEffect, useRef, useCallback } from "react"
 import {
   IssueOpenedIcon,
   IssueClosedIcon,
@@ -78,6 +78,14 @@ const Home: React.FC = () => {
   const [selectedRepo, setSelectedRepo] = useState("");
   const [startDate, setStartDate] = useState("");
   const [endDate, setEndDate] = useState("");
+  const usernameInputRef = useRef<HTMLInputElement>(null);
+
+  const handleUsernameKeyDown = useCallback((e: React.KeyboardEvent<HTMLDivElement>) => {
+   if (e.key === "Escape") {
+    setUsername("");
+    usernameInputRef.current?.querySelector("input")?.focus();
+   }
+}, [setUsername]);
 
   // Fetch data when username, tab, or page changes
   useEffect(() => {
@@ -173,7 +181,11 @@ const Home: React.FC = () => {
               label="GitHub Username"
               value={username}
               onChange={(e) => setUsername(e.target.value)}
+              onKeyDown={handleUsernameKeyDown}
               required
+              autoFocus
+              inputRef={usernameInputRef}
+              inputProps={{ "aria-label": "GitHub Username" }}
               sx={{ flex: 1, minWidth: 150 }}
             />
             <TextField
@@ -292,9 +304,10 @@ const Home: React.FC = () => {
             setPage(0);
           }}
           sx={{ flex: 1 }}
+          aria-label="Data view tabs"
         >
-          <Tab label={`Issues (${totalIssues})`} />
-          <Tab label={`Pull Requests (${totalPrs})`} />
+          <Tab label={`Issues (${totalIssues})`} aria-label={`Issues tab, ${totalIssues} total`}/>
+          <Tab label={`Pull Requests (${totalPrs})`} aria-label={`Pull Requests tab, ${totalPrs} total`} />
         </Tabs>
         <FormControl sx={{ minWidth: 150 }}>
           <InputLabel sx={{ fontSize: "14px" }}>State</InputLabel>