🎨 Palette: Improve accessibility for password visibility toggles

- Added `aria-label` and `aria-pressed` to password visibility toggle buttons in Login, Register, and Reset Password pages.
- Added missing `showPassword` and `hidePassword` translations in English and Chinese.
- This ensures screen reader users can understand and interact with the password toggle functionality.

Co-authored-by: tinkle-community <240652709+tinkle-community@users.noreply.github.com>

.Jules/palette.md

@@ -0,0 +1,3 @@
+## 2025-05-14 - Password Visibility Toggle Accessibility
+**Learning:** Icon-only buttons for toggling password visibility are often missing `aria-label` and `aria-pressed` states, making them unusable for screen reader users who need to verify their input.
+**Action:** Always include dynamic `aria-label` (Switching between "Show password" and "Hide password") and `aria-pressed` state for password toggles.

web/src/components/LoginPage.tsx

@@ -334,6 +334,12 @@ export function LoginPage() {
                         type="button"
                         onClick={() => setShowPassword(!showPassword)}
                         className="absolute right-3 top-1/2 -translate-y-1/2 text-zinc-600 hover:text-zinc-400 transition-colors"
+                        aria-label={
+                          showPassword
+                            ? t('hidePassword', language)
+                            : t('showPassword', language)
+                        }
+                        aria-pressed={showPassword}
                       >
                         {showPassword ? <EyeOff size={16} /> : <Eye size={16} />}
                       </button>

web/src/components/RegisterPage.tsx

@@ -248,6 +248,12 @@ export function RegisterPage() {
                         type="button"
                         onClick={() => setShowPassword(!showPassword)}
                         className="absolute right-3 top-1/2 -translate-y-1/2 text-zinc-600 hover:text-zinc-400 transition-colors"
+                        aria-label={
+                          showPassword
+                            ? t('hidePassword', language)
+                            : t('showPassword', language)
+                        }
+                        aria-pressed={showPassword}
                       >
                         {showPassword ? <EyeOff size={16} /> : <Eye size={16} />}
                       </button>
@@ -269,6 +275,12 @@ export function RegisterPage() {
                         type="button"
                         onClick={() => setShowConfirmPassword(!showConfirmPassword)}
                         className="absolute right-3 top-1/2 -translate-y-1/2 text-zinc-600 hover:text-zinc-400 transition-colors"
+                        aria-label={
+                          showConfirmPassword
+                            ? t('hidePassword', language)
+                            : t('showPassword', language)
+                        }
+                        aria-pressed={showConfirmPassword}
                       >
                         {showConfirmPassword ? <EyeOff size={16} /> : <Eye size={16} />}
                       </button>

web/src/components/ResetPasswordPage.tsx

@@ -150,6 +150,12 @@ export function ResetPasswordPage() {
                       onClick={() => setShowPassword(!showPassword)}
                       className="absolute inset-y-0 right-2 w-8 h-10 flex items-center justify-center btn-icon"
                       style={{ color: 'var(--text-secondary)' }}
+                      aria-label={
+                        showPassword
+                          ? t('hidePassword', language)
+                          : t('showPassword', language)
+                      }
+                      aria-pressed={showPassword}
                     >
                       {showPassword ? (
                         <EyeOff className="w-5 h-5" />
@@ -184,6 +190,12 @@ export function ResetPasswordPage() {
                       }
                       className="absolute inset-y-0 right-2 w-8 h-10 flex items-center justify-center btn-icon"
                       style={{ color: 'var(--text-secondary)' }}
+                      aria-label={
+                        showConfirmPassword
+                          ? t('hidePassword', language)
+                          : t('showPassword', language)
+                      }
+                      aria-pressed={showConfirmPassword}
                     >
                       {showConfirmPassword ? (
                         <EyeOff className="w-5 h-5" />

web/src/i18n/translations.ts

@@ -667,6 +667,8 @@ export const translations = {
     passwordRequired: 'Password is required',
     invalidEmail: 'Invalid email format',
     passwordTooShort: 'Password must be at least 6 characters',
+    showPassword: 'Show password',
+    hidePassword: 'Hide password',
 
     // Landing Page
     features: 'Features',
@@ -1834,6 +1836,8 @@ export const translations = {
     passwordRequired: '请输入密码',
     invalidEmail: '邮箱格式不正确',
     passwordTooShort: '密码至少需要6个字符',
+    showPassword: '显示密码',
+    hidePassword: '隐藏密码',
 
     // Landing Page
     features: '功能',