Proxy Mode Selector WCAG 2.2 AA accessibility pass
epic-bulk-and-proxy-registration-mentor-selection-task-003 — Apply full WCAG 2.2 AA compliance to the Proxy Mode Selector Screen: minimum 44×44 dp touch targets on mode cards, contrast ratio validation against design tokens, semantic labels for screen readers (Semantics widgets with correct roles and hints), and focus order verification. Test with TalkBack and VoiceOver to ensure Blindeforbundet screen reader users can navigate the screen without visual cues.
Acceptance Criteria
Technical Requirements
Execution Context
Tier 2 - 518 tasks
Can start after Tier 1 completes
Implementation Notes
Start by auditing the existing Proxy Mode Selector widget tree using Flutter DevTools' Accessibility inspector — identify every element missing a Semantics node. Add Semantics widgets bottom-up so parent merges work correctly. Use MergeSemantics around card content so TalkBack announces the full card as one item rather than each child separately. For contrast: pull colour values from design tokens and run them through a contrast checker; if any token fails AA, introduce a semantic colour override rather than hardcoding hex values.
Touch target enforcement: wrap tap areas in a GestureDetector or InkWell and use ConstrainedBox(constraints: BoxConstraints(minWidth: 44, minHeight: 44)) — never assume the visual card size matches the hit area. Ensure focus order: place mode cards in a Column and use FocusTraversalGroup with ReadingOrderTraversalPolicy. Finally, use ExcludeSemantics on decorative dividers and background images.
Testing Requirements
Write widget tests using flutter_test that: (1) assert tester.getSize() ≥ Size(44, 44) for every tappable widget; (2) pump the screen and call tester.getSemantics() to verify label, hint, and role values; (3) use SemanticsHandle to confirm no missing labels. Manually test with TalkBack on an Android device and VoiceOver on iOS, following WCAG 2.2 Success Criteria 1.1.1, 1.3.1, 1.4.3, 2.1.1, 2.4.3, and 2.5.3. Document manual test results in a checklist committed alongside the code. Run the accessibility_checker package in CI if available.
NHF coordinators may manage dozens of peer mentors across multiple chapters. If the multi-select list renders all contacts in a single unsorted ListView, performance degrades with 50+ items, and coordinators cannot efficiently locate a specific mentor, increasing the probability of selection errors and wrong-person proxy registrations.
Mitigation & Contingency
Mitigation: Use a SliverList with itemExtent for fixed-height rows to enable O(1) scroll position calculation. Implement the search filter using a debounce utility operating on an in-memory list (no extra API calls). Sort the contact list alphabetically by default. Add chapter-filter chips above the list for NHF's multi-chapter coordinators.
Contingency: If performance issues arise in testing with real data sets, introduce pagination with a 'load more' trigger at the bottom of the list and cache rendered rows using Flutter's AutomaticKeepAliveClientMixin.
NHF has a complex 12-national-association / 9-region / 1,400-chapter hierarchy. It is ambiguous whether a coordinator can proxy-register for peer mentors outside their immediately assigned chapter. If the contact list is not correctly scoped by RLS, coordinators might see — and register on behalf of — peer mentors they do not manage, creating fraudulent activity records that skew Bufdir statistics.
Mitigation & Contingency
Mitigation: The Proxy Contact List Provider must query only peer mentors linked to the coordinator's own chapter scope via RLS. Add an explicit Supabase query test asserting that a coordinator from chapter A cannot retrieve peer mentors from chapter B. Display each mentor's chapter affiliation in the list row so coordinators can visually verify scope.
Contingency: If RLS scope is found to be too permissive in testing, apply a server-side coordinator_id filter as a secondary guard on the query. Block the feature release until the scope test passes consistently.