Login on a Keyboard-Aware Layout Without Field Occlusion
On mobile devices — particularly smaller form factors — the software keyboard can occlude input fields and action buttons. The login screen must use a keyboard-aware layout wrapper that adjusts the scroll position and bottom padding dynamically when the keyboard appears or dismisses. This is especially important for users with motor impairments who may take longer to type and need the field to remain stable. The behaviour must be tested on both iOS and Android with a range of keyboard heights.
User Story
Acceptance Criteria
- Given the login screen is displayed on an iPhone SE (small viewport), When the user taps the password field and the keyboard opens, Then the password field and sign-in button are both visible above the keyboard without manual scrolling
- Given the keyboard is open and the user fills in both fields, When the user taps sign in, Then the button is tappable and is not hidden behind the keyboard
- Given the user submits the form (e.g. by pressing the keyboard's return key), When the keyboard dismisses, Then the layout returns to its original state without visual glitches
- Given the device is an Android phone with a floating or split keyboard, When the keyboard appears, Then the form still repositions correctly to keep the active field visible
- Given a user with large text accessibility settings enabled, When the keyboard is open, Then the fields remain legible and the layout does not overflow or truncate
Business Value
Keyboard occlusion is one of the most common sources of frustration in mobile form UX. For peer mentors who are older adults or have motor challenges, being unable to see what they are typing leads to errors, failed logins, and abandonment. Fixing this at the foundation (the login screen) also establishes the layout pattern used throughout all form-heavy screens in the app, including activity registration.
Components
- Login Screen ui
- Login Form ui
- Keyboard-Aware Layout Utility infrastructure
Dependencies
- Sign In with Email and Password critical