Accessible Touch Target Wrapper
Component Detail
Description
A Flutter widget wrapper that enforces a minimum 44×44 pt tappable area for all interactive controls. Wraps GestureDetector or InkWell with a sized box and HitTestBehavior.opaque so that the semantic hit area always meets WCAG 2.2 AA sizing requirements regardless of the visual size of the child widget.
accessible-touch-target-wrapper
Summaries
The Accessible Touch Target Wrapper ensures that every interactive control in the app is physically usable by people with motor impairments, older users, or anyone using the app in difficult conditions such as while moving or wearing gloves. By enforcing the WCAG 2.2 AA minimum touch target of 44×44 points on all buttons, links, and interactive elements, the app avoids a common source of user frustration and abandonment. This component is shared and reused throughout the product, meaning every screen and every feature automatically benefits from this baseline of physical accessibility without requiring each developer to implement their own sizing logic. This reduces both accessibility risk and the inconsistency that arises from ad-hoc implementations.
The Accessible Touch Target Wrapper is a low-complexity shared UI infrastructure component with a single dependency on the design token provider. It should be delivered in the first sprint and adopted as a mandatory wrapper for all interactive controls from that point forward — retrofitting it to existing widgets later is straightforward but consumes sprint capacity. The main project risk is developer adoption: if engineers build interactive controls without using the wrapper, the accessibility guarantee breaks silently. This should be addressed by combining the component with a lint rule (from the Accessibility Design Token Enforcer) that warns when `GestureDetector` or `InkWell` is used without the wrapper.
QA must verify that the semantic hit area is correct on both small and large device form factors and that adjacent control spacing is respected.
The Accessible Touch Target Wrapper is a stateless Flutter widget implemented as a `StatelessWidget` that wraps its child in a `SizedBox` constrained to at least `minSize × minSize` points (defaulting to 44.0), with `HitTestBehavior.opaque` applied to the `GestureDetector` or `InkWell` to ensure the full hit area responds to touch regardless of the visual bounds of the child widget. `buildWithSemantics(BuildContext)` merges the wrapper's `SemanticsProperties` with the child's, preventing duplication of accessibility labels in the Flutter semantic tree. `validateTargetSize(Size)` is a static utility used by tests and the lint enforcer to check sizes without instantiating the widget. `applySpacingConstraints(EdgeInsets)` adds configurable padding between adjacent controls to prevent accidental activation.
The design token provider is consumed to derive the default size constant, ensuring the minimum remains in sync with the token system if the design baseline changes.
Responsibilities
- Enforce minimum 44×44 pt touch area on all tappable widgets
- Apply HitTestBehavior.opaque for consistent hit detection
- Provide configurable padding between adjacent interactive controls
- Surface accessibility semantics to the Flutter engine
Interfaces
AccessibleTouchTarget({required Widget child, double minSize})
buildWithSemantics(BuildContext context)
validateTargetSize(Size size) → bool
applySpacingConstraints(EdgeInsets spacing)