From a36f98d1fc38a0a05e9fbdc2faf5922094f6193e Mon Sep 17 00:00:00 2001
From: Sami Mazouz <sychocouldy@gmail.com>
Date: Thu, 16 Dec 2021 09:30:34 +0100
Subject: [PATCH] fix: Add a11y labels to auth modal inputs (#3207)

---
 js/src/forum/components/ForgotPasswordModal.tsx |  5 ++++-
 js/src/forum/components/LogInModal.tsx          |  9 +++++++--
 js/src/forum/components/SignUpModal.tsx         | 13 ++++++++++---
 3 files changed, 21 insertions(+), 6 deletions(-)

diff --git a/js/src/forum/components/ForgotPasswordModal.tsx b/js/src/forum/components/ForgotPasswordModal.tsx
index 4c11d478ea..d3da52a9bb 100644
--- 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
index cbbe3c7236..976cec7add 100644
--- a/js/src/forum/components/LogInModal.tsx
+++ b/js/src/forum/components/LogInModal.tsx
@@ -57,6 +57,9 @@ 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">
@@ -64,7 +67,8 @@ export default class LogInModal<CustomAttrs extends ILoginModalAttrs = ILoginMod
           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
index 95fdd9b642..02524afbfd 100644
--- a/js/src/forum/components/SignUpModal.tsx
+++ b/js/src/forum/components/SignUpModal.tsx
@@ -68,6 +68,10 @@ 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">
@@ -75,7 +79,8 @@ export default class SignUpModal<CustomAttrs extends ISignupModalAttrs = ISignup
           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}
           />