fix(web): name the webapp password visibility action (#40225)

web/app/(shareLayout)/webapp-signin/components/__tests__/mail-and-password-auth.spec.tsx

@@ -83,4 +83,18 @@ describe('MailAndPasswordAuth', () => {
     )
     expect(screen.getByRole('link', { name: 'login.forget' })).toBeInTheDocument()
   })
+
+  it('names the password visibility action for its current state', async () => {
+    const user = userEvent.setup()
+    render(<MailAndPasswordAuth isEmailSetup />)
+
+    const passwordInput = screen.getByLabelText('login.password')
+    expect(passwordInput).toHaveAttribute('type', 'password')
+
+    await user.click(screen.getByRole('button', { name: 'login.showPassword' }))
+    expect(passwordInput).toHaveAttribute('type', 'text')
+
+    await user.click(screen.getByRole('button', { name: 'login.hidePassword' }))
+    expect(passwordInput).toHaveAttribute('type', 'password')
+  })
 })

web/app/(shareLayout)/webapp-signin/components/mail-and-password-auth.tsx

@@ -148,8 +148,15 @@ export default function MailAndPasswordAuth({ isEmailSetup }: MailAndPasswordAut
             placeholder={t(($) => $.passwordPlaceholder, { ns: 'login' }) || ''}
           />
           <div className="absolute inset-y-0 right-0 flex items-center">
-            <Button type="button" variant="ghost" onClick={() => setShowPassword(!showPassword)}>
-              {showPassword ? '👀' : '😝'}
+            <Button
+              type="button"
+              variant="ghost"
+              aria-label={t(($) => $[showPassword ? 'hidePassword' : 'showPassword'], {
+                ns: 'login',
+              })}
+              onClick={() => setShowPassword(!showPassword)}
+            >
+              <span aria-hidden="true">{showPassword ? '👀' : '😝'}</span>
             </Button>
           </div>
         </div>