Merge pull request #3861 from avinxshKD/fix/password-toggle-accessibility-3850

fix: make password visibility toggle buttons accessible

Author: raclim

client/modules/User/components/LoginForm.tsx

@@ -87,7 +87,11 @@ export function LoginForm() {
                       className="form__eye__icon"
                       type="button"
                       onClick={handleVisibility}
-                      aria-hidden="true"
+                      aria-label={t(
+                        showPassword
+                          ? 'LoginForm.HidePasswordARIA'
+                          : 'LoginForm.ShowPasswordARIA'
+                      )}
                     >
                       {showPassword ? (
                         <AiOutlineEyeInvisible />

client/modules/User/components/LoginForm.unit.test.jsx

@@ -47,7 +47,7 @@ describe('<LoginForm/>', () => {
     const passwordTextElement = screen.getByText(/password/i);
     expect(passwordTextElement).toBeInTheDocument();
 
-    const passwordInputElement = screen.getByLabelText(/password/i);
+    const passwordInputElement = screen.getByLabelText(/^password$/i);
     expect(passwordInputElement).toBeInTheDocument();
 
     const loginButtonElement = screen.getByRole('button', {
@@ -67,7 +67,7 @@ describe('<LoginForm/>', () => {
       }
     });
 
-    const passwordElement = screen.getByLabelText(/password/i);
+    const passwordElement = screen.getByLabelText(/^password$/i);
 
     fireEvent.change(passwordElement, {
       target: {

client/modules/User/components/SignupForm.tsx

@@ -158,7 +158,11 @@ export function SignupForm() {
                       className="form__eye__icon"
                       type="button"
                       onClick={handleVisibility}
-                      aria-hidden="true"
+                      aria-label={t(
+                        showPassword
+                          ? 'SignupForm.HidePasswordARIA'
+                          : 'SignupForm.ShowPasswordARIA'
+                      )}
                     >
                       {showPassword ? (
                         <AiOutlineEyeInvisible />
@@ -194,7 +198,11 @@ export function SignupForm() {
                       className="form__eye__icon"
                       type="button"
                       onClick={handleConfirmVisibility}
-                      aria-hidden="true"
+                      aria-label={t(
+                        showConfirmPassword
+                          ? 'SignupForm.HideConfirmPasswordARIA'
+                          : 'SignupForm.ShowConfirmPasswordARIA'
+                      )}
                     >
                       {showConfirmPassword ? (
                         <AiOutlineEyeInvisible />

translations/locales/en-US/translations.json

@@ -78,6 +78,8 @@
     "UsernameOrEmailARIA": "Email or Username",
     "Password": "Password",
     "PasswordARIA": "Password",
+    "ShowPasswordARIA": "Show password as plain text",
+    "HidePasswordARIA": "Hide password",
     "Submit": "Log In",
     "Errors": {
       "invalidCredentials": "Invalid email or password."
@@ -427,8 +429,12 @@
     "EmailARIA": "email",
     "Password": "Password",
     "PasswordARIA": "password",
+    "ShowPasswordARIA": "Show password as plain text",
+    "HidePasswordARIA": "Hide password",
     "ConfirmPassword": "Confirm Password",
     "ConfirmPasswordARIA": "Confirm password",
+    "ShowConfirmPasswordARIA": "Show confirm password as plain text",
+    "HideConfirmPasswordARIA": "Hide confirm password",
     "SubmitSignup": "Sign Up"
   },
   "SignupView": {