From 0ff867b3f811384fbf8b8e83dfba1e6e8afbb066 Mon Sep 17 00:00:00 2001
From: Your Actual Name <your-actual-email@gmail.com>
Date: Fri, 22 May 2026 14:05:50 +0530
Subject: [PATCH] fix: add id/name attributes and labels to form fields for
 accessibility (#388)

---
 src/components/Footer.tsx     | 41 ++++++++++++++++++++---------------
 src/pages/Contact/Contact.tsx | 14 +++++++++++-
 src/pages/Login/Login.tsx     |  4 ++++
 src/pages/Signup/Signup.tsx   | 36 ++++++++++++++++++++++++++----
 src/pages/Tracker/Tracker.tsx |  5 ++++-
 5 files changed, 76 insertions(+), 24 deletions(-)

diff --git a/src/components/Footer.tsx b/src/components/Footer.tsx
index 411bf2f..4c5da37 100644
--- a/src/components/Footer.tsx
+++ b/src/components/Footer.tsx
@@ -93,24 +93,29 @@ function Footer() {
               onSubmit={handleSubscribe}
               className="flex flex-col sm:flex-row items-stretch gap-2"
             >
-              <input
-                type="email"
-                required
-                placeholder="Enter email address"
-                value={email}
-                onChange={(e) => setEmail(e.target.value)}
-                className="
-                  flex-grow text-sm px-4 py-3
-                  bg-zinc-50 dark:bg-zinc-800/40
-                  border border-zinc-200 dark:border-zinc-700/50
-                  rounded-xl
-                  focus:outline-none focus:ring-2
-                  focus:ring-blue-500/20 focus:border-blue-500
-                  text-zinc-900 dark:text-white
-                  placeholder-zinc-400 dark:placeholder-zinc-500
-                  transition-all
-                "
-              />
+              <div className="relative flex-grow">
+                <label htmlFor="newsletter-email" className="sr-only">Email address</label>
+                <input
+                  id="newsletter-email"
+                  type="email"
+                  name="email"
+                  required
+                  placeholder="Enter email address"
+                  value={email}
+                  onChange={(e) => setEmail(e.target.value)}
+                  className="
+                    w-full text-sm px-4 py-3
+                    bg-zinc-50 dark:bg-zinc-800/40
+                    border border-zinc-200 dark:border-zinc-700/50
+                    rounded-xl
+                    focus:outline-none focus:ring-2
+                    focus:ring-blue-500/20 focus:border-blue-500
+                    text-zinc-900 dark:text-white
+                    placeholder-zinc-400 dark:placeholder-zinc-500
+                    transition-all
+                  "
+                />
+              </div>
 
               <button
                 type="submit"
diff --git a/src/pages/Contact/Contact.tsx b/src/pages/Contact/Contact.tsx
index a0bfccb..40b3bb9 100644
--- a/src/pages/Contact/Contact.tsx
+++ b/src/pages/Contact/Contact.tsx
@@ -208,6 +208,7 @@ function Contact() {
                 {/* Full Name */}
                 <div>
                   <label
+                    htmlFor="fullname"
                     className={`block text-xs font-medium mb-1 ${
                       mode === "dark"
                         ? "text-gray-300"
@@ -217,6 +218,8 @@ function Contact() {
                     Full Name
                   </label>
                   <input
+                    id="fullname"
+                    name="fullname"
                     type="text"
                     placeholder="Enter your full name"
                     required
@@ -231,6 +234,7 @@ function Contact() {
                 {/* Email */}
                 <div>
                   <label
+                    htmlFor="email"
                     className={`block text-xs font-medium mb-1 ${
                       mode === "dark"
                         ? "text-gray-300"
@@ -240,6 +244,8 @@ function Contact() {
                     Email Address
                   </label>
                   <input
+                    id="email"
+                    name="email"
                     type="email"
                     placeholder="your.email@example.com"
                     required
@@ -254,6 +260,7 @@ function Contact() {
                 {/* Subject */}
                 <div>
                   <label
+                    htmlFor="subject"
                     className={`block text-xs font-medium mb-1 ${
                       mode === "dark"
                         ? "text-gray-300"
@@ -263,6 +270,8 @@ function Contact() {
                     Subject
                   </label>
                   <select
+                    id="subject"
+                    name="subject"
                     className={`w-full p-2 sm:p-3 rounded-lg sm:rounded-xl text-sm sm:text-base transition-all duration-300 focus:outline-none focus:ring-2 focus:ring-purple-500 ${
                       mode === "dark"
                         ? "bg-white/5 border border-white/20 text-white placeholder-gray-400"
@@ -284,6 +293,7 @@ function Contact() {
                 {/* Message */}
                 <div className="relative">
                   <label
+                    htmlFor="message"
                     className={`block text-xs font-medium mb-1 ${
                       mode === "dark"
                         ? "text-gray-300"
@@ -293,6 +303,8 @@ function Contact() {
                     Message
                   </label>
                   <textarea
+                    id="message"
+                    name="message"
                     placeholder="Type your message here..."
                     required
                     rows={4}
@@ -348,4 +360,4 @@ function Contact() {
   );
 }
 
-export default Contact;
+export default Contact;
\ No newline at end of file
diff --git a/src/pages/Login/Login.tsx b/src/pages/Login/Login.tsx
index 92b7073..7146db8 100644
--- a/src/pages/Login/Login.tsx
+++ b/src/pages/Login/Login.tsx
@@ -90,7 +90,9 @@ const Login: React.FC = () => {
 
           <form onSubmit={handleSubmit} className="space-y-6">
             <div className="relative">
+              <label htmlFor="email" className="sr-only">Email address</label>
               <input
+                id="email"
                 type="email"
                 name="email"
                 placeholder="Enter your email"
@@ -107,7 +109,9 @@ const Login: React.FC = () => {
             </div>
 
             <div className="relative">
+              <label htmlFor="password" className="sr-only">Password</label>
               <input
+                id="password"
                 type="password"
                 name="password"
                 autoComplete="current-password"
diff --git a/src/pages/Signup/Signup.tsx b/src/pages/Signup/Signup.tsx
index 2ac51dc..c7f345b 100644
--- a/src/pages/Signup/Signup.tsx
+++ b/src/pages/Signup/Signup.tsx
@@ -166,10 +166,18 @@ const SignUp: React.FC = () => {
           <form onSubmit={handleSubmit} className="space-y-6">
             <div>
               <div className="relative">
+                <label htmlFor="username" className="sr-only">Username</label>
                 <div className="absolute inset-y-0 left-0 pl-4 flex items-center pointer-events-none">
                   <User className="h-5 w-5 text-gray-400" />
                 </div>
-                <input type="text" name="username" placeholder="Enter your username" value={formData.username} onChange={handleChange} required
+                <input 
+                  id="username"
+                  type="text" 
+                  name="username" 
+                  placeholder="Enter your username" 
+                  value={formData.username} 
+                  onChange={handleChange} 
+                  required
                   className={`w-full pl-12 pr-4 py-4 rounded-2xl border focus:outline-none focus:ring-2 focus:ring-gray-400 focus:border-transparent transition-all duration-300 ${mode === "dark" ? "bg-white/10 border-white/20 text-white placeholder-gray-400" : "bg-gray-100 border-gray-300 text-black placeholder-gray-400"}`}
                 />
               </div>
@@ -178,10 +186,18 @@ const SignUp: React.FC = () => {
 
             <div>
               <div className="relative">
+                <label htmlFor="email" className="sr-only">Email</label>
                 <div className="absolute inset-y-0 left-0 pl-4 flex items-center pointer-events-none">
                   <Mail className="h-5 w-5 text-gray-400" />
                 </div>
-                <input type="email" name="email" placeholder="Enter your email" value={formData.email} onChange={handleChange} required
+                <input 
+                  id="email"
+                  type="email" 
+                  name="email" 
+                  placeholder="Enter your email" 
+                  value={formData.email} 
+                  onChange={handleChange} 
+                  required
                   className={`w-full pl-12 pr-4 py-4 rounded-2xl border focus:outline-none focus:ring-2 focus:ring-gray-400 focus:border-transparent transition-all duration-300 ${mode === "dark" ? "bg-white/10 border-white/20 text-white placeholder-gray-400" : "bg-gray-100 border-gray-300 text-black placeholder-gray-400"}`}
                 />
               </div>
@@ -190,13 +206,25 @@ const SignUp: React.FC = () => {
 
             <div>
               <div className="relative">
+                <label htmlFor="password" className="sr-only">Password</label>
                 <div className="absolute inset-y-0 left-0 pl-4 flex items-center pointer-events-none">
                   <Lock className="h-5 w-5 text-gray-400" />
                 </div>
-                <input type={showPassword ? "text" : "password"} name="password" placeholder="Enter your password" value={formData.password} onChange={handleChange} required
+                <input 
+                  id="password"
+                  type={showPassword ? "text" : "password"} 
+                  name="password" 
+                  placeholder="Enter your password" 
+                  value={formData.password} 
+                  onChange={handleChange} 
+                  required
                   className={`w-full pl-12 pr-12 py-4 rounded-2xl border focus:outline-none focus:ring-2 focus:ring-gray-400 focus:border-transparent transition-all duration-300 ${mode === "dark" ? "bg-white/10 border-white/20 text-white placeholder-gray-400" : "bg-gray-100 border-gray-300 text-black placeholder-gray-400"}`}
                 />
-                <button type="button" onClick={() => setShowPassword(!showPassword)} aria-label={showPassword ? "Hide password" : "Show password"} aria-pressed={showPassword}
+                <button 
+                  type="button" 
+                  onClick={() => setShowPassword(!showPassword)} 
+                  aria-label={showPassword ? "Hide password" : "Show password"} 
+                  aria-pressed={showPassword}
                   className={`absolute inset-y-0 right-0 pr-4 flex items-center transition-colors duration-200 ${mode === "dark" ? "text-slate-400 hover:text-white" : "text-gray-500 hover:text-gray-800"}`}>
                   {showPassword ? <EyeOff className="h-5 w-5" /> : <Eye className="h-5 w-5" />}
                 </button>
diff --git a/src/pages/Tracker/Tracker.tsx b/src/pages/Tracker/Tracker.tsx
index 576f39b..d6e189a 100644
--- a/src/pages/Tracker/Tracker.tsx
+++ b/src/pages/Tracker/Tracker.tsx
@@ -299,6 +299,9 @@ const Home: React.FC = () => {
         <FormControl sx={{ minWidth: 150 }}>
           <InputLabel sx={{ fontSize: "14px" }}>State</InputLabel>
           <Select
+            id="state-select"
+            name="state-select"
+            autoComplete="off"
             value={tab === 0 ? issueFilter : prFilter}
             onChange={(e) =>
               tab === 0
@@ -320,7 +323,7 @@ const Home: React.FC = () => {
             <MenuItem value="open">Open</MenuItem>
             <MenuItem value="closed">Closed</MenuItem>
             {tab === 1 && <MenuItem value="merged">Merged</MenuItem>}
-          </Select>
+          </Select> 
         </FormControl>
       </Box>