🎨 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>
This commit is contained in:
google-labs-jules[bot]
2026-01-29 15:53:25 +00:00
parent 9dbc861cdf
commit b7a0cb589b
5 changed files with 37 additions and 0 deletions

View File

@@ -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>