Password Visibility Toggle
Component Detail
Description
Accessible icon button embedded within the password field that toggles between obscured and visible password text. Meets WCAG 2.2 AA touch target size (48x48dp) and provides a semantic label for screen readers.
password-visibility-toggle
Summaries
The Password Visibility Toggle directly reduces user friction at the most critical drop-off point in any mobile application: the login screen. By allowing users to verify what they have typed before submitting, this feature demonstrably lowers failed login attempts, reduces password-reset support tickets, and improves overall sign-in completion rates. Critically, its full WCAG 2.2 AA accessibility compliance ensures the product is usable by customers with visual or motor impairments, expanding the addressable market and demonstrating a commitment to inclusive design that increasingly influences procurement decisions and brand perception in competitive markets.
This is a low-complexity, self-contained UI component with zero external dependencies, making it one of the lowest-risk deliverables in the authentication feature set. It can be built, unit tested, and reviewed in a single sprint without any blocking dependencies on backend services or other teams. The primary delivery consideration is accessibility validation: automated WCAG 2.2 AA auditing and manual screen-reader testing (TalkBack on Android, VoiceOver on iOS) must be included in the definition of done. Coordinate with QA early to confirm the 48x48dp touch target is verified on both small and large device form factors before sign-off.
Implemented as a stateless or minimally stateful Flutter widget embedded directly within the password TextField's suffixIcon slot. Exposes three core interfaces: build(BuildContext) for widget construction, onToggle() as the tap callback, and isObscured(bool) to receive the current obscure state from the parent (typically the Login Form BLoC). The toggle itself should not own obscure state — it must receive it as a prop and call back up, keeping state management in the BLoC layer. Use Semantics() widget with a dynamic label ('Show password' / 'Hide password') for screen reader support.
The icon should swap between visibility_on and visibility_off Material icons. Ensure the InkWell or GestureDetector wrapper enforces a minimum hit area of 48x48 logical pixels via constraints, not padding alone, to satisfy WCAG touch target requirements across all device pixel ratios.
Responsibilities
- Toggle password obscure state on tap
- Provide screen reader label for current visibility state
- Meet minimum touch target size requirements
Interfaces
build(BuildContext)
onToggle()
isObscured(bool)