Implement Recognition Tier Banner
epic-achievement-badges-ui-task-012 — Build the recognition-tier-banner Flutter UI widget that displays the current tier name, tier icon, and award period. Implement the tier-reveal animation triggered when a new tier is newly awarded. Ensure WCAG 2.2 AA contrast for all tier colour variants, and provide a descriptive Semantics label announcing tier name and period for screen readers.
Acceptance Criteria
Technical Requirements
Execution Context
Tier 2 - 518 tasks
Can start after Tier 1 completes
Implementation Notes
Implement as a BlocConsumer or BlocBuilder widget listening to the badge-bloc tier state. Use a single AnimationController managed via a StatefulWidget (or a custom hook if Riverpod is used elsewhere in this epic) to drive the reveal animation. Gate the animation trigger with a boolean flag (e.g., isNewlyAwarded from the bloc state) and reset after first play using addStatusListener to detect AnimationStatus.completed. For 'Reduce Motion' support, check MediaQuery.of(context).disableAnimations and skip animation if true.
Define tier colour tokens (bronzeColor, silverColor, goldColor, etc.) in the design token file — never hardcode hex values inline. Keep the widget purely presentational; the parent is responsible for providing the TierState via BLoC.
Testing Requirements
Write widget tests (flutter_test) covering: (1) static banner renders tier name, icon, and period correctly for each tier variant, (2) animation triggers on new-tier-awarded state and does not replay on rebuild, (3) null/loading tier state renders without exception, (4) Semantics label matches expected string. Use tester.pump() and tester.pumpAndSettle() to drive animation assertions. Test that MediaQuery.disableAnimations: true suppresses the animation. Perform manual contrast check for each tier colour variant using a contrast analyser.
Minimum 75% widget coverage.
The badge-earned-celebration overlay must appear within 2 seconds of the triggering activity being saved, but badge evaluation runs server-side in an edge function triggered by a database webhook. Network latency, edge function cold start, and Supabase Realtime delivery delays could cause the overlay to appear late or not at all, breaking the motivational loop.
Mitigation & Contingency
Mitigation: Implement an optimistic UI path: after activity save, badge-bloc immediately checks whether any badge thresholds are crossed client-side using cached stats and badge definitions, showing the overlay speculatively before server confirmation. The server result then reconciles. Subscribe to Supabase Realtime on the earned_badges table for authoritative confirmation.
Contingency: If Realtime delivery is unreliable in production, add a polling fallback: badge-bloc polls for new earned badges 3 seconds after an activity save and shows the overlay if a new record is detected, accepting up to 5-second latency as a fallback SLA.
The celebration overlay uses animation for positive reinforcement, but motion sensitivity (prefers-reduced-motion) and screen reader users require a non-animated or text-only alternative. Failing to handle this risks excluding Blindeforbundet users or triggering vestibular discomfort for motion-sensitive volunteers.
Mitigation & Contingency
Mitigation: Check MediaQuery.disableAnimations in badge-earned-celebration-overlay and skip animation entirely when true, showing a static card instead. Add an ExcludeSemantics wrapper around the decorative animation widget and a separate Semantics node with a live region announcement of the badge name and congratulatory message.
Contingency: If accessibility issues are identified in TestFlight testing with Blindeforbundet's test group, fast-track a patch that defaults to the static card path and gates the animation behind a user preference setting in notification preferences.