From dcaf9c4472a06c95bb77f6fcb143406416850b52 Mon Sep 17 00:00:00 2001
From: RandomGamingDev <randomgamingdev@gmail.com>
Date: Sat, 10 Aug 2024 03:30:51 -0400
Subject: [PATCH 1/2] made it so that the password input becomes before the eye
 button so that tab navigation navigates to it before the button

---
 client/modules/User/components/LoginForm.jsx | 16 ++++++++--------
 1 file changed, 8 insertions(+), 8 deletions(-)

diff --git a/client/modules/User/components/LoginForm.jsx b/client/modules/User/components/LoginForm.jsx
index c44b531b4c..becf411376 100644
--- a/client/modules/User/components/LoginForm.jsx
+++ b/client/modules/User/components/LoginForm.jsx
@@ -57,6 +57,14 @@ function LoginForm() {
                   {t('LoginForm.Password')}
                 </label>
                 <div className="form__field__password">
+                  <input
+                    className="form__input"
+                    aria-label={t('LoginForm.PasswordARIA')}
+                    type={showPassword ? 'text' : 'password'}
+                    id="password"
+                    autoComplete="current-password"
+                    {...field.input}
+                  />
                   <button
                     className="form__eye__icon"
                     type="button"
@@ -69,14 +77,6 @@ function LoginForm() {
                       <AiOutlineEye />
                     )}
                   </button>
-                  <input
-                    className="form__input"
-                    aria-label={t('LoginForm.PasswordARIA')}
-                    type={showPassword ? 'text' : 'password'}
-                    id="password"
-                    autoComplete="current-password"
-                    {...field.input}
-                  />
                 </div>
                 {field.meta.touched && field.meta.error && (
                   <span className="form-error" aria-live="polite">

From 71a41fca0066fe2d2728df10cf5f4b1f44c6e0fe Mon Sep 17 00:00:00 2001
From: raclim <raclim@nyu.edu>
Date: Mon, 12 Aug 2024 08:18:08 -0400
Subject: [PATCH 2/2] apply tab layout to signup form

---
 client/modules/User/components/SignupForm.jsx | 32 +++++++++----------
 1 file changed, 16 insertions(+), 16 deletions(-)

diff --git a/client/modules/User/components/SignupForm.jsx b/client/modules/User/components/SignupForm.jsx
index 60c093b3e5..75ab6910ef 100644
--- a/client/modules/User/components/SignupForm.jsx
+++ b/client/modules/User/components/SignupForm.jsx
@@ -113,6 +113,14 @@ function SignupForm() {
                   {t('SignupForm.Password')}
                 </label>
                 <div className="form__field__password">
+                  <input
+                    className="form__input"
+                    aria-label={t('SignupForm.PasswordARIA')}
+                    type={showPassword ? 'text' : 'password'}
+                    id="password"
+                    autoComplete="new-password"
+                    {...field.input}
+                  />
                   <button
                     className="form__eye__icon"
                     type="button"
@@ -125,14 +133,6 @@ function SignupForm() {
                       <AiOutlineEye />
                     )}
                   </button>
-                  <input
-                    className="form__input"
-                    aria-label={t('SignupForm.PasswordARIA')}
-                    type={showPassword ? 'text' : 'password'}
-                    id="password"
-                    autoComplete="new-password"
-                    {...field.input}
-                  />
                 </div>
                 {field.meta.touched && field.meta.error && (
                   <span className="form-error" aria-live="polite">
@@ -149,6 +149,14 @@ function SignupForm() {
                   {t('SignupForm.ConfirmPassword')}
                 </label>
                 <div className="form__field__password">
+                  <input
+                    className="form__input"
+                    type={showConfirmPassword ? 'text' : 'password'}
+                    aria-label={t('SignupForm.ConfirmPasswordARIA')}
+                    id="confirmPassword" // Match the id with htmlFor
+                    autoComplete="new-password"
+                    {...field.input}
+                  />
                   <button
                     className="form__eye__icon"
                     type="button"
@@ -161,14 +169,6 @@ function SignupForm() {
                       <AiOutlineEye />
                     )}
                   </button>
-                  <input
-                    className="form__input"
-                    type={showConfirmPassword ? 'text' : 'password'}
-                    aria-label={t('SignupForm.ConfirmPasswordARIA')}
-                    id="confirmPassword" // Match the id with htmlFor
-                    autoComplete="new-password"
-                    {...field.input}
-                  />
                 </div>
                 {field.meta.touched && field.meta.error && (
                   <span className="form-error" aria-live="polite">