Skip to content

[design-qa][P1] Focus and tap targets: fields that never take focus, controls at 20–36 dp #178

Description

@cestercian

Part of the Sep-2026 designer's-eye QA of the 138 "Artistant iOS Light" screens (theme T15, category slow; epic #161). Full report with evidence and per-screen coverage: docs/DESIGN_QA_2026-09.md; the per-section appendices under docs/design-qa/ carry the code excerpts.

Why it matters. Enter code, email, handle, search, feedback and the counter sheet all open with their only field unfocused; inline text actions are ~36 dp, the sheet header action 40 dp, wizard text buttons 33 dp, and the search bar / chip / segment cores 36, 36 and 20 dp.

Fix direction. FocusRequester on entry for single-field screens; minimumInteractiveComponentSize() or size.rowMin on every small control.

Findings (9: P1 ×1, P2 ×7, P3 ×1)

  • F-GS-09 (P2) — Enter code (and the email/handle forms) never request focus on entry
    • Screens: 119, 28, 29
    • Where: feature/signup/EnterCodeScreen.kt:119-126; feature/signup/EmailSignUpScreen.kt:154-165; feature/signup/ProfileScreen.kt:144-160; designsystem/component/OtpField.kt and designsystem/component/AppTextField.kt contain no FocusRequester
    • Fix: Add an autoFocus: Boolean (or focusRequester) parameter to OtpField/AppTextField with LaunchedEffect(Unit) { requester.requestFocus() }, and set it on 119's field, 28's Name and 29's Handle.
  • F-GS-10 (P2) — Inline text actions have ~36 dp tap targets
    • Screens: 119, 28, 118
    • Where: feature/signup/SignupChrome.kt:353-361; call sites feature/signup/EnterCodeScreen.kt:147, :160, :184; feature/signup/EmailSignUpScreen.kt:120, :195, :260; feature/signup/WelcomeScreen.kt:101-112
    • Fix: Add .defaultMinSize(minHeight = dimens.size.rowMin) (or minimumInteractiveComponentSize()) inside InlineLink and on Welcome's login text.
  • F-DS-02 (P2) — Search field never requests focus on entry
    • Screens: 14
    • Where: feature/search/SearchScreen.kt:106, :323; no requestFocus anywhere in feature/search/, feature/discover/ or designsystem/component/SearchBar.kt
    • Fix: LaunchedEffect(Unit) { if (!state.hasActiveQuery) focusRequester.requestFocus() } (skip when a Discover seed arrives, which already sets editing = false at :112).
  • F-DS-21 (P3) — Sheet header's text action is a 40dp box with no overflow handling and no touch target
    • Screens: 15, 104, 53
    • Where: feature/search/SearchFilterSheet.kt:487-495 (shared with CompareByServiceSheet.kt:88-94)
    • Fix: widthIn(min = iconCircleSm) + minimumInteractiveComponentSize() (or a row of the close circle's height); centre the title against measured widths.
  • F-MS-12 (P2) — The counter-quote sheet's only field does not take focus
    • Screens: 08
    • Where: feature/messages/ChatQuoteCard.kt:200-217
    • Fix: a FocusRequester with LaunchedEffect(Unit) { focus.requestFocus() } on the amount field.
  • F-BN-09 (P2) — Tertiary actions are bare Texts at 20–40 dp
    • Screens: 89, 52, 20, 96
    • Where: feature/bookings/BookingsScreen.kt:563-581; feature/booking/BookingDetailScreen.kt:1175-1185, :949-959; feature/booking/ReviewSheet.kt:335-345
    • Fix: give each a heightIn(min = dimens.size.rowMin) (or wrap the nudge's Close in a 40 dp IconCircle, which the header two lines up already uses).
  • F-WZ-02 (P2) — Text-only buttons are 33dp tall; eight of them on the Preview step
    • Screens: 45, 72, 39, 41
    • Where: feature/wizard/WizardPublishSteps.kt:236-256; WizardScreen.kt:364-380; WizardFormSteps.kt:485-497; WizardMediaSteps.kt:276-285
    • Fix: give these a defaultMinSize(minHeight = dimens.size.rowMin) (or route them through a shared TextAction composable that does), rather than padding a caption.
  • F-SH-08 (P2) — Send feedback opens with the keyboard down and its only field unfocused
    • Screens: 64
    • Where: feature/system/FeedbackScreen.kt:150-157, :238-287
    • Fix: add a FocusRequester on the BasicTextField and LaunchedEffect(Unit) { requestFocus() }.
  • F-DSYS-06 (P1) — The three most-tapped small controls are 36, 36 and 20dp
    • Screens: —
    • Where: designsystem/component/Chip.kt:87-90; designsystem/component/SegmentedControl.kt:101; designsystem/component/SearchBar.kt:88-91
    • Fix: wrap each in Modifier.sizeIn(minHeight = dimens.size.rowMin) (and minWidth for the clear glyph) outside the clip, exactly as SectionHeader.kt:68 does — the visible chip stays 36, the target becomes 44.

Acceptance

  • Every finding above is closed on the cited lines (or refuted in a comment with the reason).
  • ./gradlew :app:assembleDebug, :app:testDebugUnitTest and :app:lintDevDebug green.
  • The screens listed above walked on the artistant AVD with the debug harness (RELEASE.md §10) and the fix confirmed visually — this audit was code-grounded, not device-walked.

Activity

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    Projects

    No projects

      Milestone

      No milestone

      Relationships

      None yet

      Development

      No branches or pull requests

      Issue actions