Fixing the Too-Small Eye-Toggle Button in Mobile Onboarding
Fixing the Too-Small Eye-Toggle Button in Mobile Onboarding
Release: v1.0.204 · Category: Accessibility / Touch Targets
What Was the Problem?
During onboarding, users are asked to enter their National Insurance (NI) number — a required field for HMRC Making Tax Digital authentication. Next to that input field sits a small eye icon that toggles the NI number between visible and hidden.
On mobile devices, that button was only 16×16 px — the exact dimensions of the icon itself. There was no additional padding or minimum size constraint on the button element.
This creates two real problems:
- Accessibility failure. WCAG Success Criterion 2.5.5 (Target Size) requires interactive touch targets to be at least 44×44 px. At 16×16 px, the button fails this requirement.
- Poor usability. On a phone, tapping a 16 px target is difficult and error-prone — users frequently miss it, accidentally tap adjacent elements, or give up.
What Was Fixed?
The eye-toggle button in src/app/onboarding/page.tsx (the NinoStep component) has been updated with the following Tailwind classes:
min-h-11 min-w-11 flex items-center justify-center -m-2 p-2
| Class | Purpose |
|---|---|
min-h-11 | Enforces a minimum height of 44 px (Tailwind 11 = 2.75 rem) |
min-w-11 | Enforces a minimum width of 44 px |
flex items-center justify-center | Keeps the icon visually centred within the enlarged tap area |
-m-2 p-2 | Expands the interactive area outward without affecting surrounding layout |
This is exactly the same pattern already used in HmrcConnectionPanel → NinoSection for the equivalent button, so the fix brings the onboarding screen into consistency with the rest of the app.
Why This Matters for Landlords
The NI number step is a critical gate in the onboarding flow. HMRC's Making Tax Digital API requires a valid NI number to authenticate submissions. If users struggle to interact with this field on mobile — particularly when checking what they have typed — they are more likely to make input errors, abandon the flow, or contact support.
A correctly sized touch target is a small change with a meaningful impact on completion rates for mobile users.
No Action Required
This fix is applied automatically. No configuration changes or user action are needed. The onboarding flow is otherwise unchanged.