Implement divergent field highlighting and accessibility semantics
epic-duplicate-activity-detection-core-logic-task-010 — Style divergent fields in DuplicateComparisonPanel with a high-contrast highlight using design system color tokens (amber warning surface). Apply matching fields with muted styling to reduce cognitive load. Add semantics labels to divergent fields for screen reader announcement (e.g., 'Date differs: left 12 March, right 14 March'). Ensure the panel meets WCAG 2.2 AA contrast ratios for both highlight and base states. Add a legend row at the top explaining the highlight meaning.
Acceptance Criteria
Technical Requirements
Execution Context
Tier 2 - 518 tasks
Can start after Tier 1 completes
Implementation Notes
Update `FieldRow` to accept `isDivergent`, `valueA` (String), and `valueB` (String) parameters. When `isDivergent` is true, wrap the row's `Container` with `color: AppColors.warningAmberSurface`. Apply `TextStyle(color: AppColors.textPrimary)` for divergent text and `TextStyle(color: AppColors.textTertiary)` for matching text. Wrap each `FieldRow` in `Semantics(label: isDivergent ?
'${fieldName} differs: left ${valueA}, right ${valueB}' : '${fieldName}: ${valueA}', child: ExcludeSemantics(child: ...))` to provide a single clean Semantics node instead of fragmented label/value nodes. For the `DiffLegendRow`, use a `Row` with a 12x12 `Container(color: AppColors.warningAmberSurface)` square and `Text('Highlighted fields differ...', style: AppTypography.labelSmall)`. Verify amber token contrast: NHF and HLF both have users with visual impairments — Blindeforbundet has screen-reader-dependent users — so accessibility compliance here is non-negotiable. Do not use amber color alone as the sole differentiator; also apply a subtle left border or bold text weight as a redundant visual cue for users who cannot perceive color differences (color-blindness support).
Testing Requirements
Widget tests: render DuplicateComparisonPanel with known divergent fields and assert amber background Container is present for those rows. Assert muted text color on matching rows. Assert DiffLegendRow is rendered at top. Semantics test: use `tester.getSemantics()` to find divergent FieldRow Semantics nodes and verify label contains 'differs'.
Verify matching rows do not contain 'differs' in their label. Contrast test: compute contrast ratio of design token values programmatically in a test and assert >= 4.5. Golden test: update golden image to include styled panel. Accessibility audit: run `flutter_test` `SemanticsController` traversal and verify no field is skipped.
If the duplicate check RPC fails due to a network error or Supabase outage, the service must decide whether to block submission entirely (safe but disruptive) or allow submission to proceed silently (functional but risks data duplication). An incorrect choice leads to either user frustration or data quality issues.
Mitigation & Contingency
Mitigation: Define an explicit error policy in the service: RPC failures result in a DuplicateCheckResult with status: 'check_failed' and no candidates. The caller treats this as 'allow submission, flag for async review'. Document this as the intended graceful degradation behaviour in the service interface contract.
Contingency: If stakeholders require blocking on RPC failure, expose a configurable `failMode` parameter in the service that can be toggled per organisation via the feature flag system without a code deployment.
The DuplicateComparisonPanel must handle varying activity schemas across organisations (NHF, HLF, Blindeforbundet each have different activity fields). A rigid layout may not accommodate all field variations, causing truncation or missing data in the comparison view.
Mitigation & Contingency
Mitigation: Design the panel to render a dynamic list of key-value pairs rather than a fixed-column layout. Define a `ComparisonField` model that each service populates with only the fields relevant to the activity type and organisation, allowing the panel to adapt without schema knowledge.
Contingency: If dynamic rendering proves too complex within the timeline, ship a simplified panel showing only the five most critical fields (peer mentor, activity type, date, chapter, submitter) and log a follow-up ticket for full field rendering in a later sprint.