Spacing System Prevents Accidental Control Activation
The interactive-control-spacing-system defines a set of spacing tokens that govern the minimum distance between adjacent interactive elements. This is particularly important in dense UI areas such as the expense type selector (mutual exclusion rules), the bulk registration confirmation screen, and the notification filter bar. The spacing system must integrate with accessible-touch-target-wrapper so that expanded hit areas are accounted for in the spacing calculations — preventing two adjacent 44×44 dp hit areas from overlapping. The design-token-provider must surface spacing tokens as named semantic tokens (e.g., `spacing.controls.gap.minimum`) that all interactive layout components consume.
User Story
Acceptance Criteria
- Given a peer mentor views the expense type selector with multiple option chips, when any two adjacent interactive chips are rendered, then there is at least 8 dp of gap between their respective touch target boundaries
- Given a peer mentor uses the activity registration bottom sheet with Next and Back buttons, when both buttons are visible simultaneously, then their touch targets do not overlap and there is a minimum 8 dp gap between them
- Given a developer adds a row of action buttons to any screen, when the interactive-control-spacing-system tokens are applied, then the layout automatically enforces minimum gaps without manual per-screen spacing work
- Given the accessibility-audit-runner evaluates a built screen, when any two adjacent interactive controls have overlapping touch target regions, then the audit fails with a spacing violation error
- Given a peer mentor with tremors uses the bulk registration screen to select multiple peer mentors, when tapping individual entries in the list, then accidental double-selection of adjacent items occurs in fewer than 5% of interactions during usability testing
Business Value
Accidental control activation on mobile apps is one of the top frustrations for users with motor impairments — it erodes trust and leads to abandonment. For a volunteer app where the primary use case is quick activity registration, accidental taps that submit incorrect data or navigate away from a partially completed form are directly damaging to data quality and user confidence. A systematic spacing token approach amortizes the engineering investment across all current and future screens.
Components
- Interactive Control Spacing System ui
- Accessible Touch Target Wrapper ui
- Design Token Provider data
- Token Accessibility Enforcer service
- Accessibility Audit Runner infrastructure
- Accessibility Design Token Enforcer infrastructure