Skip to content

mobile: audit touch target sizes in bottom tabs #13

Description

@duct-tape2

Goal

Guarantee that all five bottom-navigation tabs expose a stable touch target of at least 48 logical pixels high. The target should remain large enough even if icon, font, or label metrics change later.

Where to work

  • apps/mobile/App.tsx around the TABS.map(...) bottom-navigation buttons
  • apps/mobile/scripts/verify-frontend-regressions.mjs for a focused regression guard

Suggested scope

  1. Give each bottom-tab TouchableOpacity an explicit minHeight: 48 (or an equivalent stable layout rule) while preserving the five equal-width tabs.
  2. Keep the existing hitSlop, accessibilityRole, accessibilityLabel, and selected accessibilityState behavior.
  3. Extend the frontend regression script so removing the minimum target-size guarantee fails npm run verify.

Acceptance criteria

  • Each of the five bottom tabs has a stable target height of at least 48 logical pixels.
  • Labels and icons remain centered and do not overlap at narrow mobile width.
  • Existing accessibility metadata remains intact.
  • cd apps/mobile && npm run verify passes.
  • python3 scripts/check_public_tree.py passes.
  • The PR body includes Closes #13 and briefly explains the accessibility benefit.

Non-goals

  • Do not replace the navigation architecture or redesign the tab bar.
  • Do not add screenshots, generated assets, local engines, or private files.

Comment /claim before starting so another contributor is not assigned the same first issue.

Metadata

Metadata

Assignees

No one assigned

    Labels

    accessibilityScreen-reader labels, touch targets, contrast, or keyboard flowfirst-timers-onlyLowest-context starter task suitable for a first OSS PRgood first issueSmall, low-context work suitable for a new contributorhelp wantedMaintainer wants external contributors, not just internal follow-upmobileExpo/React Native UI, navigation, client API, mobile fixturestestsBackend pytest, mobile verify scripts, hygiene checksup-for-grabsScoped and available for external contributors

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions