Add accessibility and contrast to CertificationAlertBanner
epic-peer-mentor-detail-screen-ui-components-task-006 — Ensure CertificationAlertBanner meets WCAG 2.2 AA: verify banner background-to-text contrast ratio, add Semantics node with a live-region label so screen readers announce the alert when it appears, and confirm the Enroll CTA has a minimum 44x44dp touch target. Test with both VoiceOver (iOS) and TalkBack (Android) in the expired and expiring-soon states.
Acceptance Criteria
Technical Requirements
Execution Context
Tier 3 - 413 tasks
Can start after Tier 2 completes
Implementation Notes
Flutter's Semantics widget with liveRegion: true triggers an accessibility announcement when the widget appears. Wrap the entire banner in a single Semantics node using container: true and provide a combined label string built from the state (e.g., 'HLF certification expired. Tap Enroll to renew.'). Avoid nesting multiple Semantics nodes with overlapping labels — merge them into one.
For touch-target size, prefer wrapping the ElevatedButton/TextButton in a SizedBox(width: 44, height: 44) rather than increasing visual padding, to keep the design intact. Contrast: use the project's design token system — if tokens don't already have accessible variants for banner warning states, define new tokens (e.g., colorBannerExpiredText, colorBannerExpiredBackground) and document them. The expiring-soon state typically uses an amber palette — verify amber-on-white passes AA. The expired state typically uses red — verify red-on-white and red-on-dark both pass.
Use Flutter's debugSemantics flag during local testing to inspect the semantic tree.
Testing Requirements
Write widget tests using flutter_test. Test 1: render banner in 'expired' state and call tester.getSemantics() — assert the label contains the expiry message and the CTA label. Test 2: same for 'expiring-soon' state. Test 3: assert tester.getSize(find.byKey(enrollCtaKey)) >= Size(44, 44).
Test 4: use a contrast-ratio utility or golden test to assert computed colors meet 4.5:1. Manual testing required on a real iOS device with VoiceOver and an Android device/emulator with TalkBack — document results in the PR description. Ensure tests run in CI without device access by using semantics assertions only for automated checks.
The org labels system may not yet have label keys defined for peer mentor detail screen terminology (role labels, section headings), requiring additions to the label key registry that must be coordinated with the admin configuration team.
Mitigation & Contingency
Mitigation: Audit existing label keys in the terminology system before starting OrgLabelsProvider integration. Submit required new label keys for admin configuration in parallel with component implementation.
Contingency: If label keys are not available at integration time, use hardcoded English fallbacks with a clear TODO for admin configuration, ensuring the widget renders correctly while keys are being provisioned.
The design token semantic colors (warning, error surface) may not meet WCAG 2.2 AA 4.5:1 contrast ratio when rendered on the app's background surface tokens, requiring design system changes that affect the entire app.
Mitigation & Contingency
Mitigation: Run contrast ratio validation on the token palette during Epic 1 design token implementation. Flag any failing pairs to the design system owner before building UI components that depend on them.
Contingency: If tokens fail contrast requirements, define supplementary high-contrast override tokens specific to alert and badge contexts that meet AA without modifying the global palette.