Login Form
Component Detail
Description
WCAG 2.2 AA compliant email and password form widget. Renders accessible AppTextField components for credentials, an AppButton for submission, and a password visibility toggle. Manages focus traversal and keyboard dismissal for mobile usability.
login-form
Summaries
The Login Form is the mechanism through which every user accesses the platform, and its quality directly determines whether users succeed or abandon the login attempt. Full WCAG 2.2 AA compliance is not merely a technical checkbox — it is a legal and reputational requirement that protects the organization from accessibility litigation and ensures the platform is usable by employees and stakeholders with disabilities. Inline validation feedback reduces failed login attempts and the associated support costs. A polished, accessible form signals organizational commitment to inclusive technology, strengthening brand credibility and supporting procurement decisions in regulated or public-sector environments where accessibility compliance is mandatory.
The Login Form is a medium-complexity component with a broader dependency surface than the screen it sits within, requiring coordination with the AppTextField, AppButton, and PasswordVisibilityToggle shared components, as well as the Login Form BLoC for state management. Delivery depends on those shared UI primitives being available and meeting WCAG 2.2 AA contrast and labeling standards before integration. Testing scope is significant: field-level validation errors, focus traversal order, keyboard return-key navigation between fields, password visibility toggle behavior, and BLoC event dispatch on submission all require dedicated test cases. Accessibility auditing — including screen reader compatibility — should be planned as a separate QA task, as it requires specialized tooling and expertise beyond standard functional testing.
Login Form is a Flutter widget that composes AppTextField instances for email and password fields alongside an AppButton for submission and a PasswordVisibilityToggle. It interfaces with the login-form-bloc via event dispatch — onEmailChanged, onPasswordChanged, and onSubmit map to BLoC events, while field error display is driven by BLoC state emissions. WCAG 2.2 AA compliance requires correct Semantics labels on all fields, sufficient color contrast ratios (minimum 4.5:1 for text), and focus traversal managed via FocusNode chains. The focusNextField() interface should use FocusScope.of(context).nextFocus() or explicit FocusNode.requestFocus() calls to move from email to password on keyboard return.
showFieldError(String field, String message) implies per-field error state, which should be modeled in the BLoC state object and rendered as helper text beneath the relevant AppTextField.
Responsibilities
- Render email and password fields with proper ARIA-equivalent semantics
- Enforce WCAG 2.2 AA label and contrast requirements on all fields
- Dispatch login events to BLoC/Riverpod on submission
- Display inline field-level validation error messages
- Support keyboard tab/return navigation between fields
Interfaces
build(BuildContext)
onEmailChanged(String)
onPasswordChanged(String)
onSubmit()
focusNextField()
showFieldError(String field, String message)
Relationships
Dependencies (2)
Components this component depends on