Build InlineContextualHelpWidget with tap-to-expand
epic-cognitive-accessibility-wizard-ui-task-008 — Implement InlineContextualHelpWidget as a stateful Flutter widget with a collapsed default state showing a labelled help icon (question mark) and an expanded state showing the full help text. Use AnimatedContainer for smooth expand/collapse. Apply Semantics with expandedHint and collapsedHint to communicate state changes to screen readers. Position widget inline within form fields without disrupting tab order.
Acceptance Criteria
Technical Requirements
Implementation Notes
Use a `bool _isExpanded = false` state variable and toggle it in the tap handler. Wrap the GestureDetector or InkWell in a `Semantics` widget with `button: true`, `label: 'Help'`, `hint: _isExpanded ? widget.expandedHint : widget.collapsedHint`, and `onTap: _toggle`. For the AnimatedContainer, animate `height` from `0` to `null` (intrinsic height) — but note that animating to `null` requires wrapping the content in a `ClipRect` and using a measured height or a `SizeTransition` instead.
The recommended pattern is to use `AnimatedSize` wrapping a `Visibility(visible: _isExpanded, ...)` child, which avoids the need to measure the text height explicitly. For the touch target, wrap the Icon in a `SizedBox(width: 44, height: 44)` with an alignment center — do not rely on padding alone, as padding is not part of the semantic bounds on all platforms. Provide `expandedHint` and `collapsedHint` as constructor parameters with sensible English defaults ('Collapse help text' / 'Show help text') so the widget is usable without configuration.
Testing Requirements
Write widget tests covering: (1) default collapsed state — icon visible, help text not visible; (2) tap expands — help text visible after `pumpAndSettle()`; (3) tap again collapses — help text not visible; (4) Semantics hint value changes between collapsed and expanded states; (5) touch target size >= 44×44dp via `tester.getSize()`; (6) focus order test using `FocusTraversalGroup` — confirm help icon is between its neighboring form fields in traversal order. Golden tests for collapsed and expanded visual states. All tests must pass with `flutter test`.
The WizardStateManager BLoC must guarantee that step transitions only occur on explicit user action, never automatically. Subtle reactive patterns in Bloc (e.g. stream listeners triggering add() calls) could inadvertently auto-advance the wizard, violating the core cognitive accessibility rule and creating a regression that is difficult to detect without dedicated tests.
Mitigation & Contingency
Mitigation: Write a dedicated unit test that subscribes to the BLoC stream and asserts no StepChanged event is emitted for 5 seconds after a state update, without an explicit user-sourced event being dispatched. Make this test part of the CI gate for the WizardStateManager.
Contingency: If an auto-advance regression is discovered post-integration, introduce a mandatory UserActionToken parameter on all step-transition events so the BLoC can structurally refuse transitions that do not originate from a user gesture handler.
The ConfirmBeforeSubmitScreen requires deep-linking back to specific wizard steps for corrections. Implementing bidirectional navigation within a multi-step wizard while preserving all previously entered state is architecturally non-trivial and may conflict with the existing StatefulShellRoute navigation setup described in the app architecture.
Mitigation & Contingency
Mitigation: Design the ConfirmBeforeSubmitScreen's back-navigation links to dispatch a GoToStep event on the WizardStateManager rather than using GoRouter's pop() chain. This keeps navigation state entirely in the BLoC and avoids coupling to the router's stack semantics.
Contingency: If BLoC-driven step navigation proves incompatible with the router, implement the correction flow as a dedicated sub-route that pre-populates its form from the WizardStateManager's current draft, then merges the edited field back into the draft on completion before returning to the confirm screen.
The CognitiveAccessibilityAudit utility must inspect live widget trees for violations such as icon-only buttons. Flutter's widget tree inspection APIs are available in test mode but have limitations in identifying semantic intent (e.g. distinguishing a decorative icon from a navigation button). False negatives could give a false sense of compliance.
Mitigation & Contingency
Mitigation: Augment the audit with a convention-based approach: require all navigation buttons to use a named wrapper widget (e.g. LabelledNavigationButton) that the audit can detect by type, rather than relying solely on widget-tree semantics analysis.
Contingency: If widget-tree detection proves insufficiently reliable, scope the CognitiveAccessibilityAudit to route-configuration analysis (verifying back navigation availability per route) and static analysis of wizard step count definitions via the CognitiveLoadRuleEngine, which provides deterministic results.
The InlineContextualHelpWidget sources content from a bundled JSON asset via the HelpContentRegistry. If help texts are missing for newly added screens or fields (a likely scenario as the 61-feature app grows), the widget silently shows nothing, degrading the accessibility experience without any visible failure.
Mitigation & Contingency
Mitigation: Integrate a CognitiveAccessibilityAudit check that verifies every registered (screenId, fieldId) pair that requests help has a corresponding entry in the HelpContentRegistry bundle. Run this check in CI as part of the audit report.
Contingency: Add a debug-mode overlay that highlights fields with missing help entries using a visible warning indicator, making coverage gaps immediately obvious to developers during local development before they reach CI.