User Interface high complexity Shared Component mobile
0
Dependencies
0
Dependents
0
Entities
0
Integrations

Description

Shared Flutter widget set including AppButton, AppTextField, and focus-indicator wrappers that enforce WCAG 2.2 AA requirements across every screen. AppButton wraps GestureDetector to guarantee a minimum 24x24px tap area; AppTextField declares semanticsLabel and correct SemanticsRole on every input. These widgets are the primary mechanism for propagating accessible patterns to all features without per-screen re-implementation.

Feature: WCAG 2.2 AA Compliance

accessible-widget-library

Sources & reasoning

Every screen in the Meander Mobile App must inherit accessible interaction patterns from day one. A shared widget library is the only scalable mechanism - per-screen semantics annotations would be error-prone and inconsistent across 59 features. AppButton and AppTextField enforce touch targets and screen-reader labels at the component level, so every feature that renders a button or text field automatically satisfies WCAG 2.2 criteria 2.5.8 (target size) and 1.3.1 (info and relationships).

No source references — this artifact was included based on reasoning alone (see above).

Responsibilities

  • Enforce 24x24px minimum touch target on all interactive elements via GestureDetector wrapper
  • Declare semanticsLabel and SemanticsRole on all inputs and buttons for VoiceOver/TalkBack
  • Render visible focus indicators for keyboard-equivalent navigation
  • Support text scaling to 200% system font size without horizontal overflow
  • Provide non-drag alternatives for all drag-based interactions

Interfaces

AppButton({required String semanticsLabel, required VoidCallback onPressed, Widget child})
AppTextField({required String semanticsLabel, TextEditingController? controller})
AppFocusIndicator({required Widget child})
DragAlternativeWrapper({required Widget dragChild, required Widget altChild})