WCAG 2.2 AA audit for all three UI components
epic-scenario-push-engagement-ui-task-011 — Run a focused accessibility audit across notification-preferences-screen, in-app-notification-banner, and scenario-notification-detail-view. Verify contrast ratios (minimum 4.5:1 for normal text, 3:1 for large text), touch target sizes (minimum 44x44 pt), focus order correctness, and VoiceOver/TalkBack label accuracy. Fix all identified violations before integration testing.
Acceptance Criteria
Technical Requirements
Execution Context
Tier 4 - 323 tasks
Can start after Tier 3 completes
Implementation Notes
Start with automated scanning (Flutter Inspector, Accessibility Scanner) to build the findings list, then manually verify with actual screen readers — automated tools miss focus-order and timing issues. For contrast fixes, always update design tokens (colours defined in the token system) rather than overriding colours inline; this ensures fixes propagate across all usages. For the in-app-notification-banner auto-dismiss timer, use a SemanticsService.announce() call when the banner appears and delay the dismiss timer start until after the announcement; this is the established pattern for live regions in Flutter. Touch target sizing: prefer adding padding inside the widget using SizedBox constraints rather than wrapping with GestureDetector to avoid hit-test layering issues.
The organisations using this app (NHF, Blindeforbundet, HLF) have users with severe visual and motor impairments — treat accessibility as a blocking requirement, not a nice-to-have.
Testing Requirements
Manual testing: walk through all three components with VoiceOver (iOS 17+) and TalkBack (Android 13+) using the swipe-based navigation. Use the Xcode Accessibility Inspector and Android Accessibility Scanner to flag contrast and label issues. Automated: add or update widget tests using tester.getSemantics() to assert semanticLabel values on all interactive elements for the three components. Run flutter test --coverage after fixes to confirm no regressions.
Document findings per component in a WCAG-audit-checklist.md file in the repository under docs/accessibility/.
The in-app notification banner depends on a Supabase Realtime subscription to detect new notification records. If the subscription reconnects slowly after an app resume from background, or if Realtime delivery is delayed under high load, the banner may not appear within the 2-second acceptance criterion.
Mitigation & Contingency
Mitigation: Implement an explicit subscription reconnect handler on app foreground events using Flutter's AppLifecycleState.resumed hook, and add a polling fallback that queries for unread notifications once per app foreground event as a safety net against missed Realtime events.
Contingency: If Realtime proves unreliable in production, promote the polling fallback to the primary mechanism with a 30-second interval, accepting slight latency in exchange for reliability.
Cold-start deep linking (app not running when push notification is tapped) requires deferred navigation after the Flutter engine and Supabase session are fully initialised. If the deep link is consumed before authentication completes, the router may navigate to a protected route without a valid session, causing an error or redirect loop.
Mitigation & Contingency
Mitigation: Implement a deferred navigation queue in scenario-deep-link-router that holds the parsed deep-link target until the auth session restoration lifecycle event fires, following the existing deep-link-handler pattern used in the BankID and Vipps authentication flows.
Contingency: If deferred navigation is not achievable within the epic's scope, fall back to navigating the user to the notification centre (which is always accessible post-login) where the relevant notification record is visible and tappable.