Skip to content

Commit 28a2096

Browse files
lakhansamanilakhansamani
committed
fix: accessibility
Ref: authorizerdev/authorizer#337
1 parent 034037d commit 28a2096

7 files changed

Lines changed: 51 additions & 14 deletions

‎.github/FUNDING.yaml‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
# These are supported funding model platforms
2+
3+
github: authorizerdev

‎src/components/AuthorizerBasicAuthLogin.tsx‎

Lines changed: 10 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -131,11 +131,15 @@ export const AuthorizerBasicAuthLogin: FC<{
131131
<>
132132
<form onSubmit={onSubmit} name="authorizer-login-form">
133133
<div className={styles['styled-form-group']}>
134-
<label className={styles['form-input-label']} htmlFor="email">
134+
<label
135+
className={styles['form-input-label']}
136+
htmlFor="authorizer-login-email"
137+
>
135138
<span>* </span>Email
136139
</label>
137140
<input
138141
name="email"
142+
id="authorizer-login-email"
139143
className={`${styles['form-input-field']} ${
140144
errorData.email ? styles['input-error-content'] : null
141145
}`}
@@ -151,11 +155,15 @@ export const AuthorizerBasicAuthLogin: FC<{
151155
)}
152156
</div>
153157
<div className={styles['styled-form-group']}>
154-
<label className={styles['form-input-label']} htmlFor="password">
158+
<label
159+
className={styles['form-input-label']}
160+
htmlFor="authorizer-login-password"
161+
>
155162
<span>* </span>Password
156163
</label>
157164
<input
158165
name="password"
166+
id="authorizer-login-password"
159167
className={`${styles['form-input-field']} ${
160168
errorData.password ? styles['input-error-content'] : null
161169
}`}

‎src/components/AuthorizerForgotPassword.tsx‎

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -91,11 +91,15 @@ export const AuthorizerForgotPassword: FC<{
9191
<br />
9292
<form onSubmit={onSubmit} name="authorizer-forgot-password-form">
9393
<div className={styles['styled-form-group']}>
94-
<label className={styles['form-input-label']} htmlFor="email">
94+
<label
95+
className={styles['form-input-label']}
96+
htmlFor="authorizer-forgot-password-email"
97+
>
9598
<span>* </span>Email
9699
</label>
97100
<input
98101
name="email"
102+
id="authorizer-forgot-password-email"
99103
className={`${styles['form-input-field']} ${
100104
errorData.email ? styles['input-error-content'] : null
101105
}`}

‎src/components/AuthorizerMagicLinkLogin.tsx‎

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -95,11 +95,15 @@ export const AuthorizerMagicLinkLogin: FC<{
9595
)}
9696
<form onSubmit={onSubmit} name="authorizer-magic-login-form">
9797
<div className={styles['styled-form-group']}>
98-
<label className={styles['form-input-label']} htmlFor="email">
98+
<label
99+
className={styles['form-input-label']}
100+
htmlFor="authorizer-magic-link-login-email"
101+
>
99102
<span>* </span>Email
100103
</label>
101104
<input
102105
name="email"
106+
id="authorizer-magic-link-login-email"
103107
className={`${styles['form-input-field']} ${
104108
errorData.email ? styles['input-error-content'] : null
105109
}`}

‎src/components/AuthorizerResetPassword.tsx‎

Lines changed: 13 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -108,18 +108,22 @@ export const AuthorizerResetPassword: FC<Props> = ({ onReset }) => {
108108
)}
109109
<form onSubmit={onSubmit} name="authorizer-reset-password-form">
110110
<div className={styles['styled-form-group']}>
111-
<label className={styles['form-input-label']} htmlFor="password">
111+
<label
112+
className={styles['form-input-label']}
113+
htmlFor="authorizer-reset-password"
114+
>
112115
<span>* </span>Password
113116
</label>
114117
<input
115118
name="password"
119+
id="authorizer-reset-password"
116120
className={`${styles['form-input-field']} ${
117121
errorData.password ? styles['input-error-content'] : null
118122
}`}
119123
placeholder="********"
120124
type="password"
121125
value={formData.password || ''}
122-
onChange={e => onInputChange('password', e.target.value)}
126+
onChange={(e) => onInputChange('password', e.target.value)}
123127
/>
124128
{errorData.password && (
125129
<div className={styles['form-input-error']}>
@@ -128,18 +132,22 @@ export const AuthorizerResetPassword: FC<Props> = ({ onReset }) => {
128132
)}
129133
</div>
130134
<div className={styles['styled-form-group']}>
131-
<label className={styles['form-input-label']} htmlFor="password">
135+
<label
136+
className={styles['form-input-label']}
137+
htmlFor="authorizer-reset-confirm-password"
138+
>
132139
<span>* </span>Confirm Password
133140
</label>
134141
<input
135-
name="password"
142+
name="confirmPassword"
143+
id="authorizer-reset-confirm-password"
136144
className={`${styles['form-input-field']} ${
137145
errorData.confirmPassword ? styles['input-error-content'] : null
138146
}`}
139147
placeholder="********"
140148
type="password"
141149
value={formData.confirmPassword || ''}
142-
onChange={e => onInputChange('confirmPassword', e.target.value)}
150+
onChange={(e) => onInputChange('confirmPassword', e.target.value)}
143151
/>
144152
{errorData.confirmPassword && (
145153
<div className={styles['form-input-error']}>

‎src/components/AuthorizerSignup.tsx‎

Lines changed: 10 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -163,11 +163,15 @@ export const AuthorizerSignup: FC<{
163163
<>
164164
<form onSubmit={onSubmit} name="authorizer-signup-form">
165165
<div className={styles['styled-form-group']}>
166-
<label className={styles['form-input-label']} htmlFor="email">
166+
<label
167+
className={styles['form-input-label']}
168+
htmlFor="authorizer-sign-up-email"
169+
>
167170
<span>* </span>Email
168171
</label>
169172
<input
170173
name="email"
174+
id="authorizer-sign-up-email"
171175
className={`${styles['form-input-field']} ${
172176
errorData.email ? styles['input-error-content'] : null
173177
}`}
@@ -185,12 +189,13 @@ export const AuthorizerSignup: FC<{
185189
<div className={styles['styled-form-group']}>
186190
<label
187191
className={styles['form-input-label']}
188-
htmlFor="password"
192+
htmlFor="authorizer-sign-up-password"
189193
>
190194
<span>* </span>Password
191195
</label>
192196
<input
193197
name="password"
198+
id="authorizer-sign-up-password"
194199
className={`${styles['form-input-field']} ${
195200
errorData.password ? styles['input-error-content'] : null
196201
}`}
@@ -208,12 +213,13 @@ export const AuthorizerSignup: FC<{
208213
<div className={styles['styled-form-group']}>
209214
<label
210215
className={styles['form-input-label']}
211-
htmlFor="password"
216+
htmlFor="authorizer-sign-up-confirm-password"
212217
>
213218
<span>* </span>Confirm Password
214219
</label>
215220
<input
216-
name="password"
221+
name="confirmPassword"
222+
id="authorizer-sign-up-confirm-password"
217223
className={`${styles['form-input-field']} ${
218224
errorData.confirmPassword
219225
? styles['input-error-content']

‎src/components/AuthorizerVerifyOtp.tsx‎

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -134,11 +134,15 @@ export const AuthorizerVerifyOtp: FC<{
134134
<br />
135135
<form onSubmit={onSubmit} name="authorizer-mfa-otp-form">
136136
<div className={styles['styled-form-group']}>
137-
<label className={styles['form-input-label']} htmlFor="otp">
137+
<label
138+
className={styles['form-input-label']}
139+
htmlFor="authorizer-verify-otp"
140+
>
138141
<span>* </span>OTP (One Time Password)
139142
</label>
140143
<input
141144
name="otp"
145+
id="authorizer-verify-otp"
142146
className={`${styles['form-input-field']} ${
143147
errorData.otp ? styles['input-error-content'] : null
144148
}`}

0 commit comments

Comments
 (0)