Просмотр исходного кода

fix(password-input): improve accessibility

- Add screen reader text for password visibility status
satnaing 2 месяцев назад
Родитель
Сommit
9d990c1c76
1 измененных файлов с 4 добавлено и 1 удалено
  1. 4 1
      src/components/password-input.tsx

+ 4 - 1
src/components/password-input.tsx

@@ -32,10 +32,13 @@ export function PasswordInput({
         size='icon'
         variant='ghost'
         disabled={disabled}
-        className='absolute end-1 top-1/2 h-6 w-6 -translate-y-1/2 rounded-md text-muted-foreground'
+        className='absolute inset-e-1 top-1/2 h-6 w-6 -translate-y-1/2 rounded-md text-muted-foreground'
         onClick={() => setShowPassword((prev) => !prev)}
       >
         {showPassword ? <Eye size={18} /> : <EyeOff size={18} />}
+        <span className='sr-only'>
+          {showPassword ? 'Hide password' : 'Show password'}
+        </span>
       </Button>
     </div>
   )