Apply WCAG 2.2 AA accessibility to all three components
epic-assignment-follow-up-reminders-ui-task-008 — Audit and fix all three components (ReminderNotificationCard, CoordinatorEscalationNotificationCard, ReminderThresholdSettingsUI) for WCAG 2.2 AA compliance. Verify minimum 4.5:1 text contrast ratio using design token colour pairs, ensure all interactive elements meet 44×44 pt touch target minimum, add Semantics wrappers with descriptive labels for screen reader support (VoiceOver), and verify tab/focus order is logical for keyboard and switch-access users.
Acceptance Criteria
Technical Requirements
Execution Context
Tier 3 - 413 tasks
Can start after Tier 2 completes
Implementation Notes
Wrap each card's primary interactive area in a Semantics widget with label, hint, and button: true as appropriate. For the dismiss/mark-read swipe gesture on ReminderNotificationCard, also provide an explicit IconButton fallback within the card layout so the action is reachable without gesture. Use FocusTraversalGroup with OrderedTraversalPolicy in ReminderThresholdSettingsUI to enforce field order. For error announcements, set SemanticsProperties.liveRegion: true on the error Text widget so VoiceOver/TalkBack announces it when it appears.
Check design token contrast pairs against WCAG 4.5:1 minimum using the WebAIM contrast checker or equivalent — document any token pairs that fail and coordinate with design to replace them. For the accessibility_preferences data model, ensure the component respects the user's font_scale_factor (already handled by Flutter's textScaleFactor if using theme text styles) and contrast_mode (apply high-contrast token overrides if contrast_mode is active).
Testing Requirements
Write flutter_test widget tests using SemanticsController (tester.getSemantics) to assert: (1) all interactive elements have non-empty semantic labels, (2) error messages in threshold form are marked as liveRegion: true, (3) decorative icons are excluded from the semantics tree, (4) focus traversal order matches the expected sequence. Manually test with iOS VoiceOver on a device or simulator covering all three components. Document the contrast ratios for each design token text/background pair used and include the audit results as a comment in the relevant widget files.
The deep-link from the notification card to the assignment detail screen depends on the assignment detail route being stable and accepting an assignment ID parameter. If the routing contract is undocumented or changes during parallel development, the CTA will silently navigate to a fallback screen.
Mitigation & Contingency
Mitigation: Confirm the assignment detail route path and parameter contract with the team building or maintaining that screen before implementing the CTA. Add an integration test that asserts navigating from a mock notification card with a known assignment ID lands on the correct route.
Contingency: If the route is unstable, implement the deep-link as a late-bound string resolved from a central route registry, allowing the target route to be updated without changing the notification card.
Visually distinguishing escalation cards from standard reminder cards using colour alone fails WCAG 1.4.1 (use of colour). Blindeforbundet users relying on screen readers must receive equivalent contextual information through semantics, not just visual styling.
Mitigation & Contingency
Mitigation: Use both colour and an icon/label difference to distinguish card types. Add explicit Semantics widgets with descriptive labels ('Escalation alert: peer mentor has not responded') so screen readers announce the type without visual context.
Contingency: If accessibility review flags the distinction, add a text badge ('Escalation') alongside the visual treatment as a code-change-only fix with no schema or service impact.