fix: Add a11y labels to auth modal inputs (#3207)

flarum · Dec 16, 2021 · a36f98d · a36f98d
1 parent 5befaa6
commit a36f98d
Show file tree

Hide file tree

Showing 3 changed files with 21 additions and 6 deletions.
diff --git a/js/src/forum/components/ForgotPasswordModal.tsx b/js/src/forum/components/ForgotPasswordModal.tsx
@@ -52,6 +52,8 @@ export default class ForgotPasswordModal<CustomAttrs extends IForgotPasswordModa
       );
     }
 
+    const emailLabel = extractText(app.translator.trans('core.forum.forgot_password.email_placeholder'));
+
     return (
       <div className="Modal-body">
         <div className="Form Form--centered">
@@ -61,7 +63,8 @@ export default class ForgotPasswordModal<CustomAttrs extends IForgotPasswordModa
               className="FormControl"
               name="email"
               type="email"
-              placeholder={extractText(app.translator.trans('core.forum.forgot_password.email_placeholder'))}
+              placeholder={emailLabel}
+              aria-label={emailLabel}
               bidi={this.email}
               disabled={this.loading}
             />

diff --git a/js/src/forum/components/LogInModal.tsx b/js/src/forum/components/LogInModal.tsx
@@ -57,14 +57,18 @@ export default class LogInModal<CustomAttrs extends ILoginModalAttrs = ILoginMod
   fields() {
     const items = new ItemList();
 
+    const identificationLabel = extractText(app.translator.trans('core.forum.log_in.username_or_email_placeholder'));
+    const passwordLabel = extractText(app.translator.trans('core.forum.log_in.password_placeholder'));
+
     items.add(
       'identification',
       <div className="Form-group">
         <input
           className="FormControl"
           name="identification"
           type="text"
-          placeholder={extractText(app.translator.trans('core.forum.log_in.username_or_email_placeholder'))}
+          placeholder={identificationLabel}
+          aria-label={identificationLabel}
           bidi={this.identification}
           disabled={this.loading}
         />
@@ -80,7 +84,8 @@ export default class LogInModal<CustomAttrs extends ILoginModalAttrs = ILoginMod
           name="password"
           type="password"
           autocomplete="current-password"
-          placeholder={extractText(app.translator.trans('core.forum.log_in.password_placeholder'))}
+          placeholder={passwordLabel}
+          aria-label={passwordLabel}
           bidi={this.password}
           disabled={this.loading}
         />

diff --git a/js/src/forum/components/SignUpModal.tsx b/js/src/forum/components/SignUpModal.tsx
@@ -68,14 +68,19 @@ export default class SignUpModal<CustomAttrs extends ISignupModalAttrs = ISignup
   fields() {
     const items = new ItemList();
 
+    const usernameLabel = extractText(app.translator.trans('core.forum.sign_up.username_placeholder'));
+    const emailLabel = extractText(app.translator.trans('core.forum.sign_up.email_placeholder'));
+    const passwordLabel = extractText(app.translator.trans('core.forum.sign_up.password_placeholder'));
+
     items.add(
       'username',
       <div className="Form-group">
         <input
           className="FormControl"
           name="username"
           type="text"
-          placeholder={extractText(app.translator.trans('core.forum.sign_up.username_placeholder'))}
+          placeholder={usernameLabel}
+          aria-label={usernameLabel}
           bidi={this.username}
           disabled={this.loading || this.isProvided('username')}
         />
@@ -90,7 +95,8 @@ export default class SignUpModal<CustomAttrs extends ISignupModalAttrs = ISignup
           className="FormControl"
           name="email"
           type="email"
-          placeholder={extractText(app.translator.trans('core.forum.sign_up.email_placeholder'))}
+          placeholder={emailLabel}
+          aria-label={emailLabel}
           bidi={this.email}
           disabled={this.loading || this.isProvided('email')}
         />
@@ -107,7 +113,8 @@ export default class SignUpModal<CustomAttrs extends ISignupModalAttrs = ISignup
             name="password"
             type="password"
             autocomplete="new-password"
-            placeholder={extractText(app.translator.trans('core.forum.sign_up.password_placeholder'))}
+            placeholder={passwordLabel}
+            aria-label={passwordLabel}
             bidi={this.password}
             disabled={this.loading}
           />