Toggle Password Visibility While Typing
Many peer mentors are not highly technical users and may mistype their password while it is hidden. A password visibility toggle (eye icon) next to the password field lets users reveal or conceal their input at will. This is especially important for users with motor impairments or those using accessibility settings with larger text. The toggle must be clearly labelled for screen readers and must not affect focus or cause the keyboard to dismiss.
User Story
Acceptance Criteria
- Given the login form is visible, When the user looks at the password field, Then an eye icon toggle button is visible on the right side of the field
- Given the password is hidden (default), When the user taps the eye icon, Then the password text becomes visible and the icon changes to indicate it can be hidden again
- Given the password is visible, When the user taps the eye icon again, Then the password text is hidden and the icon reverts
- Given a screen reader is active, When the user focuses on the toggle button, Then the button announces 'Show password' or 'Hide password' as its accessible label
- Given the user toggles visibility, When the toggle state changes, Then keyboard focus remains on the password field and the keyboard does not dismiss
Business Value
Password visibility toggling directly reduces failed login attempts caused by typos in the hidden field. For peer mentors with motor or cognitive challenges — a significant subset of the user base — this is a meaningful accessibility improvement. Fewer failed logins means less frustration and fewer support requests, lowering operational costs for participating organisations.
Components
- Login Form ui
- Password Visibility Toggle ui
- Login Form BLoC service
- Keyboard-Aware Layout Utility infrastructure
Dependencies
- Sign In with Email and Password critical