Vertical Scroll Container
Component Detail
Description
A scroll view wrapper that enforces vertical-only scrolling throughout the application, preventing horizontal carousels and swipe-to-navigate patterns that are inaccessible to motor-impaired and Switch Access users. Wraps Flutter's SingleChildScrollView or ListView with axis locked to vertical.
vertical-scroll-container
Summaries
The Vertical Scroll Container enforces a consistent, accessible scrolling model across the entire mobile application by restricting all scroll interactions to the vertical axis. This eliminates horizontal carousels and swipe-based navigation patterns that are inaccessible to users with motor impairments and those using Switch Access assistive technology. By standardizing scrolling behavior across the product, the organization reduces development inconsistency, lowers the risk of accessibility audit failures, and ensures the application is usable by the widest possible audience. This investment in foundational interaction design supports inclusive product positioning and protects against compliance risk across both major mobile platforms.
This low-complexity shared component has no runtime dependencies and should be delivered in the earliest sprint as it wraps all scrollable content areas across the application. Integration is lightweight — replacing raw SingleChildScrollView or ListView usages with this controlled wrapper — but its cross-cutting nature means it touches every scrollable screen. Testing must confirm horizontal scroll gestures are fully suppressed, vertical scroll semantics are correctly announced by screen readers on both platforms, and keyboard plus Switch Access directional navigation functions correctly within all wrapped containers. Post-integration changes require regression testing across all scrollable surfaces in the product, so early delivery and stabilization are key to minimizing downstream risk.
This component wraps Flutter's SingleChildScrollView or ListView, enforcing axis-locked vertical scrolling by setting scrollDirection to Axis.vertical and applying NeverScrollableScrollPhysics on the horizontal axis where needed. buildVerticalScroller(child, controller) accepts an optional ScrollController for programmatic control, exposed via getScrollController() and scrollToPosition(offset) for imperative scroll management. lockScrollAxis(Axis.vertical) is applied at construction time and cannot be overridden at call sites, preventing accidental horizontal scroll introduction. Scroll semantics are surfaced via Flutter's built-in ScrollSemantics node, and announceScrollPosition(context) triggers a SemanticsService call for explicit position feedback to screen readers.
The component is stateless when no external controller is injected and manages its own internal ScrollController lifecycle otherwise, disposing it correctly in the stateful variant to prevent memory leaks.
Responsibilities
- Constrain scroll axis to vertical on all scrollable content areas
- Prevent horizontal scroll gestures from activating unintended navigation
- Expose scroll semantics for screen reader scroll announcements
- Support keyboard and switch-access directional navigation
Interfaces
buildVerticalScroller(child, controller)
lockScrollAxis(Axis.vertical)
getScrollController()
scrollToPosition(offset)
announceScrollPosition(context)