primevue icon indicating copy to clipboard operation
primevue copied to clipboard

Password Component: toggleMask Not Keyboard-Operable (WCAG 2.1.1 Failure)

Open daniel-hitchins opened this issue 3 months ago • 0 comments

Describe the bug

The toggleMask control in the PrimeVue Password component is not operable via keyboard. Pressing Tab does not move focus to the toggle button, and it cannot be activated with Enter or Space.

This appears to be a failure of WCAG 2.1.1 (Keyboard). As a result:

Keyboard-only users cannot reveal or hide their password.

Screen reader users, who typically rely on keyboard navigation, are also unable to toggle password visibility.

This makes the password visibility control inaccessible for multiple user groups.

Pull Request Link

No response

Reason for not contributing a PR

  • [ ] Lack of time
  • [x] Unsure how to implement the fix/feature
  • [ ] Difficulty understanding the codebase
  • [ ] Other

Other Reason

No response

Reproducer

https://stackblitz.com/edit/primevue-4-vite-issue-template-3vmnnxck?file=src%2FApp.vue

Environment

  • OS: Windows 11
  • Browser: Chrome 142
  • Screen Reader: NVDA 2025.3.1

Vue version

3.5.18

PrimeVue version

4.3.9

Node version

22.14

Browser(s)

Chrome 142

Steps to reproduce the behavior

  1. Go to a page using the PrimeVue Password component with toggleMask enabled.
  2. Navigate through the form using the Tab key.
  3. Observe that the focus moves to the password input field, but never reaches the toggle mask button.
  4. Attempt to activate the toggle using Enter or Space — it cannot be triggered.
  5. (Optional) Turn on NVDA and repeat the steps. NVDA users also cannot reach or activate the toggle via keyboard.

Expected behavior

The password visibility toggle (toggleMask) should be fully operable using a keyboard. Specifically:

  • The toggle button should be focusable via the Tab key.
  • Users should be able to activate it using Enter or Space, just like any standard button.
  • Screen reader users should receive an appropriate label (e.g., “Show password” / “Hide password”) that updates when toggled.

This would ensure compliance with WCAG 2.1.1 (Keyboard) and make the feature usable for both keyboard-only and screen-reader users.

daniel-hitchins avatar Nov 21 '25 16:11 daniel-hitchins