mirror of
https://github.com/NoFxAiOS/nofx.git
synced 2026-07-12 07:16:56 +08:00
🎨 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:
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user