Skip to content

Commit 2debb23

Browse files
mehul-m-prajapatimehul-m-prajapati
authored
Merge pull request #399 from ARUSHIGULBHILE/fix/issue-388
fix: add id/name attributes and labels to form fields for accessibili…
2 parents 4ae0ef6 + 0ff867b commit 2debb23

5 files changed

Lines changed: 76 additions & 24 deletions

File tree

‎src/components/Footer.tsx‎

Lines changed: 23 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -103,24 +103,29 @@ function Footer() {
103103
onSubmit={handleSubscribe}
104104
className="flex flex-col sm:flex-row items-stretch gap-2"
105105
>
106-
<input
107-
type="email"
108-
required
109-
placeholder="Enter email address"
110-
value={email}
111-
onChange={(e) => setEmail(e.target.value)}
112-
className="
113-
flex-grow text-sm px-4 py-3
114-
bg-zinc-50 dark:bg-zinc-800/40
115-
border border-zinc-200 dark:border-zinc-700/50
116-
rounded-xl
117-
focus:outline-none focus:ring-2
118-
focus:ring-blue-500/20 focus:border-blue-500
119-
text-zinc-900 dark:text-white
120-
placeholder-zinc-400 dark:placeholder-zinc-500
121-
transition-all
122-
"
123-
/>
106+
<div className="relative flex-grow">
107+
<label htmlFor="newsletter-email" className="sr-only">Email address</label>
108+
<input
109+
id="newsletter-email"
110+
type="email"
111+
name="email"
112+
required
113+
placeholder="Enter email address"
114+
value={email}
115+
onChange={(e) => setEmail(e.target.value)}
116+
className="
117+
w-full text-sm px-4 py-3
118+
bg-zinc-50 dark:bg-zinc-800/40
119+
border border-zinc-200 dark:border-zinc-700/50
120+
rounded-xl
121+
focus:outline-none focus:ring-2
122+
focus:ring-blue-500/20 focus:border-blue-500
123+
text-zinc-900 dark:text-white
124+
placeholder-zinc-400 dark:placeholder-zinc-500
125+
transition-all
126+
"
127+
/>
128+
</div>
124129

125130
<button
126131
type="submit"

‎src/pages/Contact/Contact.tsx‎

Lines changed: 13 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -208,6 +208,7 @@ function Contact() {
208208
{/* Full Name */}
209209
<div>
210210
<label
211+
htmlFor="fullname"
211212
className={`block text-xs font-medium mb-1 ${
212213
mode === "dark"
213214
? "text-gray-300"
@@ -217,6 +218,8 @@ function Contact() {
217218
Full Name
218219
</label>
219220
<input
221+
id="fullname"
222+
name="fullname"
220223
type="text"
221224
placeholder="Enter your full name"
222225
required
@@ -231,6 +234,7 @@ function Contact() {
231234
{/* Email */}
232235
<div>
233236
<label
237+
htmlFor="email"
234238
className={`block text-xs font-medium mb-1 ${
235239
mode === "dark"
236240
? "text-gray-300"
@@ -240,6 +244,8 @@ function Contact() {
240244
Email Address
241245
</label>
242246
<input
247+
id="email"
248+
name="email"
243249
type="email"
244250
placeholder="your.email@example.com"
245251
required
@@ -254,6 +260,7 @@ function Contact() {
254260
{/* Subject */}
255261
<div>
256262
<label
263+
htmlFor="subject"
257264
className={`block text-xs font-medium mb-1 ${
258265
mode === "dark"
259266
? "text-gray-300"
@@ -263,6 +270,8 @@ function Contact() {
263270
Subject
264271
</label>
265272
<select
273+
id="subject"
274+
name="subject"
266275
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 ${
267276
mode === "dark"
268277
? "bg-white/5 border border-white/20 text-white placeholder-gray-400"
@@ -284,6 +293,7 @@ function Contact() {
284293
{/* Message */}
285294
<div className="relative">
286295
<label
296+
htmlFor="message"
287297
className={`block text-xs font-medium mb-1 ${
288298
mode === "dark"
289299
? "text-gray-300"
@@ -293,6 +303,8 @@ function Contact() {
293303
Message
294304
</label>
295305
<textarea
306+
id="message"
307+
name="message"
296308
placeholder="Type your message here..."
297309
required
298310
rows={4}
@@ -348,4 +360,4 @@ function Contact() {
348360
);
349361
}
350362

351-
export default Contact;
363+
export default Contact;

‎src/pages/Login/Login.tsx‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -90,7 +90,9 @@ const Login: React.FC = () => {
9090

9191
<form onSubmit={handleSubmit} className="space-y-6">
9292
<div className="relative">
93+
<label htmlFor="email" className="sr-only">Email address</label>
9394
<input
95+
id="email"
9496
type="email"
9597
name="email"
9698
placeholder="Enter your email"
@@ -107,7 +109,9 @@ const Login: React.FC = () => {
107109
</div>
108110

109111
<div className="relative">
112+
<label htmlFor="password" className="sr-only">Password</label>
110113
<input
114+
id="password"
111115
type="password"
112116
name="password"
113117
autoComplete="current-password"

‎src/pages/Signup/Signup.tsx‎

Lines changed: 32 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -166,10 +166,18 @@ const SignUp: React.FC = () => {
166166
<form onSubmit={handleSubmit} className="space-y-6">
167167
<div>
168168
<div className="relative">
169+
<label htmlFor="username" className="sr-only">Username</label>
169170
<div className="absolute inset-y-0 left-0 pl-4 flex items-center pointer-events-none">
170171
<User className="h-5 w-5 text-gray-400" />
171172
</div>
172-
<input type="text" name="username" placeholder="Enter your username" value={formData.username} onChange={handleChange} required
173+
<input
174+
id="username"
175+
type="text"
176+
name="username"
177+
placeholder="Enter your username"
178+
value={formData.username}
179+
onChange={handleChange}
180+
required
173181
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"}`}
174182
/>
175183
</div>
@@ -178,10 +186,18 @@ const SignUp: React.FC = () => {
178186

179187
<div>
180188
<div className="relative">
189+
<label htmlFor="email" className="sr-only">Email</label>
181190
<div className="absolute inset-y-0 left-0 pl-4 flex items-center pointer-events-none">
182191
<Mail className="h-5 w-5 text-gray-400" />
183192
</div>
184-
<input type="email" name="email" placeholder="Enter your email" value={formData.email} onChange={handleChange} required
193+
<input
194+
id="email"
195+
type="email"
196+
name="email"
197+
placeholder="Enter your email"
198+
value={formData.email}
199+
onChange={handleChange}
200+
required
185201
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"}`}
186202
/>
187203
</div>
@@ -190,13 +206,25 @@ const SignUp: React.FC = () => {
190206

191207
<div>
192208
<div className="relative">
209+
<label htmlFor="password" className="sr-only">Password</label>
193210
<div className="absolute inset-y-0 left-0 pl-4 flex items-center pointer-events-none">
194211
<Lock className="h-5 w-5 text-gray-400" />
195212
</div>
196-
<input type={showPassword ? "text" : "password"} name="password" placeholder="Enter your password" value={formData.password} onChange={handleChange} required
213+
<input
214+
id="password"
215+
type={showPassword ? "text" : "password"}
216+
name="password"
217+
placeholder="Enter your password"
218+
value={formData.password}
219+
onChange={handleChange}
220+
required
197221
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"}`}
198222
/>
199-
<button type="button" onClick={() => setShowPassword(!showPassword)} aria-label={showPassword ? "Hide password" : "Show password"} aria-pressed={showPassword}
223+
<button
224+
type="button"
225+
onClick={() => setShowPassword(!showPassword)}
226+
aria-label={showPassword ? "Hide password" : "Show password"}
227+
aria-pressed={showPassword}
200228
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"}`}>
201229
{showPassword ? <EyeOff className="h-5 w-5" /> : <Eye className="h-5 w-5" />}
202230
</button>

‎src/pages/Tracker/Tracker.tsx‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -299,6 +299,9 @@ const Home: React.FC = () => {
299299
<FormControl sx={{ minWidth: 150 }}>
300300
<InputLabel sx={{ fontSize: "14px" }}>State</InputLabel>
301301
<Select
302+
id="state-select"
303+
name="state-select"
304+
autoComplete="off"
302305
value={tab === 0 ? issueFilter : prFilter}
303306
onChange={(e) =>
304307
tab === 0
@@ -320,7 +323,7 @@ const Home: React.FC = () => {
320323
<MenuItem value="open">Open</MenuItem>
321324
<MenuItem value="closed">Closed</MenuItem>
322325
{tab === 1 && <MenuItem value="merged">Merged</MenuItem>}
323-
</Select>
326+
</Select>
324327
</FormControl>
325328
</Box>
326329

0 commit comments

Comments
 (0)