Apply design tokens and WCAG accessibility to PeerMentorCardWidget
epic-contact-list-management-ui-components-task-005 — Apply design token spacing, typography, and color values to PeerMentorCardWidget. Ensure availability and certification status chips meet WCAG 2.2 AA contrast ratios. Add Semantics wrappers so screen readers announce availability and certification state in addition to the mentor name. Enforce 44dp minimum touch target on the card. Validate visual distinction from ContactCardWidget is preserved under system dark/light modes.
Acceptance Criteria
Technical Requirements
Execution Context
Tier 2 - 518 tasks
Can start after Tier 1 completes
Implementation Notes
Token application should be done as a dedicated pass after task-004 — do not interleave token replacement with new feature logic. Use a find-and-replace approach: search for any hardcoded padding/color/font values introduced in task-004 and substitute with token references. For Semantics, compose the label as a single string: '{mentorName}. Availability: {availabilityLabel}.
Certification: {certificationLabel}. Assigned members: {count}.' This provides screen reader users a complete single-focus description matching what sighted users see. For dark mode validation, ensure the token system uses ThemeExtension or MediaQuery.platformBrightness-aware token resolution — avoid hardcoding separate dark/light colors in the widget itself.
Testing Requirements
Write flutter_test widget tests that: (1) assert no raw Color or pixel literals remain in the widget (code review / static analysis); (2) verify the Semantics node label for a given PeerMentor fixture includes availability and certification status strings; (3) compute WCAG contrast ratios for all chip/badge color pairs and assert compliance; (4) render the widget in both light and dark ThemeData and assert different card surface colors are applied (token-driven dark mode); (5) assert the card tap area is >= 44x44 dp using tester.getSize(). Reuse the wcagContrastRatio helper from task-003.
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.