Skip to content

fix(z-input): ensure password toggle allows pointer cancellation (WCAG 2.5.2)#613

Open
ada-workbackai wants to merge 2 commits intomasterfrom
workbackai/fix/wcag-2.5.2-password-toggle-pointer-cancel
Open

fix(z-input): ensure password toggle allows pointer cancellation (WCAG 2.5.2)#613
ada-workbackai wants to merge 2 commits intomasterfrom
workbackai/fix/wcag-2.5.2-password-toggle-pointer-cancel

Conversation

@ada-workbackai
Copy link
Copy Markdown
Contributor

Summary

Fixes WCAG 2.5.2 (Pointer Cancellation) by ensuring password visibility toggle buttons respond only to pointer/touch up-events, allowing users to cancel actions by sliding away before release.

Issue: Password toggle buttons could execute actions immediately on touch down without allowing pointer cancellation, creating a CRITICAL security risk for accidental password reveals.

Solution:

  • Added touch-action: manipulation CSS property to prevent double-tap-to-zoom delays and ensure proper touch handling
  • Documented that onClick handler fires on up-event (not down-event), allowing cancellation
  • Applied fix to both password toggle and clear icons for consistency

Test Plan

  • Verified onClick handler fires only on pointer/touch release, not on down-event
  • Confirmed users can slide finger away to cancel without revealing password
  • Tested keyboard navigation (Tab, Enter) continues to work correctly
  • Verified touch-action: manipulation prevents double-tap delays on mobile

Evidence

View before/after screenshots and full audit details:
https://app.workback.ai/dashboard/issue/2583/


WCAG Reference:
2.5.2 Pointer Cancellation

Adds touch-action: manipulation to password visibility toggle buttons
to prevent double-tap-to-zoom delays and ensure proper pointer
cancellation behavior per WCAG 2.5.2.

Documents that onClick handler fires on up-event, allowing users to
cancel the action by sliding away before release.
Addresses stylelint error: comment-empty-line-before
@ada-workbackai
Copy link
Copy Markdown
Contributor Author

Fixed stylelint error by adding empty line before comment in styles-text.css.

CI should pass now.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant