Skip to content

Commit 8e75fd8

Browse files
raclimraclim
committed
add aria labels to login and signup forms
1 parent 6f08d44 commit 8e75fd8

File tree

2 files changed

+108
-99
lines changed

2 files changed

+108
-99
lines changed

‎client/modules/User/components/LoginForm.jsx

Lines changed: 36 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -29,7 +29,7 @@ function LoginForm() {
2929
<form className="form" onSubmit={handleSubmit}>
3030
<Field name="email">
3131
{(field) => (
32-
<p className="form__field">
32+
<div className="form__field">
3333
<label htmlFor="email" className="form__label">
3434
{t('LoginForm.UsernameOrEmail')}
3535
</label>
@@ -43,43 +43,46 @@ function LoginForm() {
4343
{...field.input}
4444
/>
4545
{field.meta.touched && field.meta.error && (
46-
<span className="form-error">{field.meta.error}</span>
46+
<span className="form-error" aria-live="polite">
47+
{field.meta.error}
48+
</span>
4749
)}
48-
</p>
50+
</div>
4951
)}
5052
</Field>
5153
<Field name="password">
5254
{(field) => (
53-
<div>
54-
<p className="form__field">
55-
<label htmlFor="password" className="form__label">
56-
{t('LoginForm.Password')}
57-
</label>
58-
<div className="form__field__password">
59-
<button
60-
className="form__eye__icon"
61-
type="button"
62-
onClick={handleVisibility}
63-
>
64-
{showPassword ? (
65-
<AiOutlineEyeInvisible />
66-
) : (
67-
<AiOutlineEye />
68-
)}
69-
</button>
70-
<input
71-
className="form__input"
72-
aria-label={t('LoginForm.PasswordARIA')}
73-
type={showPassword ? 'text' : 'password'}
74-
id="password"
75-
autoComplete="current-password"
76-
{...field.input}
77-
/>
78-
</div>
79-
{field.meta.touched && field.meta.error && (
80-
<span className="form-error">{field.meta.error}</span>
81-
)}
82-
</p>
55+
<div className="form__field">
56+
<label htmlFor="password" className="form__label">
57+
{t('LoginForm.Password')}
58+
</label>
59+
<div className="form__field__password">
60+
<button
61+
className="form__eye__icon"
62+
type="button"
63+
onClick={handleVisibility}
64+
aria-hidden="true"
65+
>
66+
{showPassword ? (
67+
<AiOutlineEyeInvisible />
68+
) : (
69+
<AiOutlineEye />
70+
)}
71+
</button>
72+
<input
73+
className="form__input"
74+
aria-label={t('LoginForm.PasswordARIA')}
75+
type={showPassword ? 'text' : 'password'}
76+
id="password"
77+
autoComplete="current-password"
78+
{...field.input}
79+
/>
80+
</div>
81+
{field.meta.touched && field.meta.error && (
82+
<span className="form-error" aria-live="polite">
83+
{field.meta.error}
84+
</span>
85+
)}
8386
</div>
8487
)}
8588
</Field>

‎client/modules/User/components/SignupForm.jsx

Lines changed: 72 additions & 66 deletions
Original file line numberDiff line numberDiff line change
@@ -63,7 +63,7 @@ function SignupForm() {
6363
validateFields={[]}
6464
>
6565
{(field) => (
66-
<p className="form__field">
66+
<div className="form__field">
6767
<label htmlFor="username" className="form__label">
6868
{t('SignupForm.Title')}
6969
</label>
@@ -77,14 +77,16 @@ function SignupForm() {
7777
{...field.input}
7878
/>
7979
{field.meta.touched && field.meta.error && (
80-
<span className="form-error">{field.meta.error}</span>
80+
<span className="form-error" aria-live="polite">
81+
{field.meta.error}
82+
</span>
8183
)}
82-
</p>
84+
</div>
8385
)}
8486
</Field>
8587
<Field name="email" validate={validateEmail} validateFields={[]}>
8688
{(field) => (
87-
<p className="form__field">
89+
<div className="form__field">
8890
<label htmlFor="email" className="form__label">
8991
{t('SignupForm.Email')}
9092
</label>
@@ -97,78 +99,82 @@ function SignupForm() {
9799
{...field.input}
98100
/>
99101
{field.meta.touched && field.meta.error && (
100-
<span className="form-error">{field.meta.error}</span>
102+
<span className="form-error" aria-live="polite">
103+
{field.meta.error}
104+
</span>
101105
)}
102-
</p>
106+
</div>
103107
)}
104108
</Field>
105109
<Field name="password">
106110
{(field) => (
107-
<div>
108-
<p className="form__field">
109-
<label htmlFor="password" className="form__label">
110-
{t('SignupForm.Password')}
111-
</label>
112-
<div className="form__field__password">
113-
<button
114-
className="form__eye__icon"
115-
type="button"
116-
onClick={handleVisibility}
117-
>
118-
{showPassword ? (
119-
<AiOutlineEyeInvisible />
120-
) : (
121-
<AiOutlineEye />
122-
)}
123-
</button>
124-
<input
125-
className="form__input"
126-
aria-label={t('SignupForm.PasswordARIA')}
127-
type={showPassword ? 'text' : 'password'}
128-
id="password"
129-
autoComplete="new-password"
130-
{...field.input}
131-
/>
132-
</div>
133-
{field.meta.touched && field.meta.error && (
134-
<span className="form-error">{field.meta.error}</span>
135-
)}
136-
</p>
111+
<div className="form__field">
112+
<label htmlFor="password" className="form__label">
113+
{t('SignupForm.Password')}
114+
</label>
115+
<div className="form__field__password">
116+
<button
117+
className="form__eye__icon"
118+
type="button"
119+
onClick={handleVisibility}
120+
aria-hidden="true"
121+
>
122+
{showPassword ? (
123+
<AiOutlineEyeInvisible />
124+
) : (
125+
<AiOutlineEye />
126+
)}
127+
</button>
128+
<input
129+
className="form__input"
130+
aria-label={t('SignupForm.PasswordARIA')}
131+
type={showPassword ? 'text' : 'password'}
132+
id="password"
133+
autoComplete="new-password"
134+
{...field.input}
135+
/>
136+
</div>
137+
{field.meta.touched && field.meta.error && (
138+
<span className="form-error" aria-live="polite">
139+
{field.meta.error}
140+
</span>
141+
)}
137142
</div>
138143
)}
139144
</Field>
140145
<Field name="confirmPassword">
141146
{(field) => (
142-
<div>
143-
<p className="form__field">
144-
<label htmlFor="confirmPassword" className="form__label">
145-
{t('SignupForm.ConfirmPassword')}
146-
</label>
147-
<div className="form__field__password">
148-
<button
149-
className="form__eye__icon"
150-
type="button"
151-
onClick={handleConfirmVisibility}
152-
>
153-
{showConfirmPassword ? (
154-
<AiOutlineEyeInvisible />
155-
) : (
156-
<AiOutlineEye />
157-
)}
158-
</button>
159-
<input
160-
className="form__input"
161-
type={showConfirmPassword ? 'text' : 'password'}
162-
aria-label={t('SignupForm.ConfirmPasswordARIA')}
163-
id="confirmPassword" // Match the id with htmlFor
164-
autoComplete="new-password"
165-
{...field.input}
166-
/>
167-
</div>
168-
{field.meta.touched && field.meta.error && (
169-
<span className="form-error">{field.meta.error}</span>
170-
)}
171-
</p>
147+
<div className="form__field">
148+
<label htmlFor="confirmPassword" className="form__label">
149+
{t('SignupForm.ConfirmPassword')}
150+
</label>
151+
<div className="form__field__password">
152+
<button
153+
className="form__eye__icon"
154+
type="button"
155+
onClick={handleConfirmVisibility}
156+
aria-hidden="true"
157+
>
158+
{showConfirmPassword ? (
159+
<AiOutlineEyeInvisible />
160+
) : (
161+
<AiOutlineEye />
162+
)}
163+
</button>
164+
<input
165+
className="form__input"
166+
type={showConfirmPassword ? 'text' : 'password'}
167+
aria-label={t('SignupForm.ConfirmPasswordARIA')}
168+
id="confirmPassword" // Match the id with htmlFor
169+
autoComplete="new-password"
170+
{...field.input}
171+
/>
172+
</div>
173+
{field.meta.touched && field.meta.error && (
174+
<span className="form-error" aria-live="polite">
175+
{field.meta.error}
176+
</span>
177+
)}
172178
</div>
173179
)}
174180
</Field>

0 commit comments

Comments
 (0)