Apply WCAG 2.2 AA contrast and 44dp touch targets to ContactCardWidget
epic-contact-list-management-ui-components-task-003 — Audit ContactCardWidget against WCAG 2.2 AA contrast requirements (minimum 4.5:1 for normal text, 3:1 for large text and UI components). Ensure the card's interactive hit area meets the 44dp minimum touch target requirement. Add Semantics widget wrappers with descriptive labels for screen reader compatibility. Validate role badge colors against design token contrast-safe palette.
Acceptance Criteria
Technical Requirements
Execution Context
Tier 2 - 518 tasks
Can start after Tier 1 completes
Implementation Notes
Use the Flutter Semantics widget directly around the card's InkWell/GestureDetector. The semanticsLabel should follow the pattern: '{contactName}, {roleName}, {statusIfRelevant}' so screen readers announce a complete description in a single focus stop. For touch target enforcement, wrap the visible card with a SizedBox(width: double.infinity) and ensure the InkWell's minimum tap target is enforced via Theme.of(context).materialTapTargetSize or by explicitly padding the GestureDetector. For contrast validation, build a small utility function `double wcagContrastRatio(Color fg, Color bg)` using the WCAG relative luminance formula — call this in tests, not at runtime.
All colors must be pulled from the app's design token system (e.g., AppColors.roleAdminBadgeFg / AppColors.roleAdminBadgeBg); never hardcode hex values. Cross-check the role badge token pairs against the contrast-safe palette defined in the design token documentation before finalizing.
Testing Requirements
Write flutter_test widget tests that: (1) assert the Semantics node for a ContactCardWidget contains the expected label string for a given contact fixture; (2) verify the rendered widget's hit-test area is >= 44x44 dp using tester.getSize(); (3) programmatically compute contrast ratio for each color pair used in the card (background/text, badge background/badge text) and assert >= 4.5:1 for normal text and >= 3:1 for large/UI elements — use a helper function that accepts two Color values and returns the WCAG ratio. Run tests in both light and dark ThemeData contexts. No integration or e2e tests required for this task.
Design token color values used in role badges, certification status indicators, and availability chips may not meet the WCAG 2.2 AA contrast ratio of 4.5:1 when rendered against card backgrounds, requiring rework after accessibility review and potentially blocking acceptance sign-off.
Mitigation & Contingency
Mitigation: Run the contrast-ratio-validator on every new token combination during widget development. Enforce the CI accessibility lint runner on all PRs touching visualization components, and validate against the contrast-safe-color-palette before finalizing card designs.
Contingency: If contrast failures are found late, adjust token values in the design token theme centrally — since all widgets consume design tokens rather than hardcoded colors, all affected widgets will be corrected by a single token update without per-widget changes.
The ContactViewSwitcher is required for Barnekreftforeningen but must not appear for other organizations. If the organization labels provider does not yet expose a reliable feature flag for this widget, it may render universally or be conditionally hidden in an inconsistent way, breaking the role-specific layout contract.
Mitigation & Contingency
Mitigation: Implement view switcher visibility as a constructor parameter on ContactListScreen injected from a provider, defaulting to hidden. Document the integration point for the org labels provider so the flag can be wired without changing the widget's API.
Contingency: If org labels integration is delayed beyond this epic, use a feature flag constant keyed to the Barnekreftforeningen organization ID as a temporary gate, with a tracked issue to replace it with the runtime labels provider before general release.