WCAG 2.2 AA Accessibility Audit — All Export UI Screens

epic-bufdir-reporting-export-ui-task-012 — Conduct a systematic WCAG 2.2 AA accessibility audit across all five export UI components: trigger screen, period selector, format selector, confirmation dialog, and history list. Verify contrast ratios, touch-target sizes (44×44 dp minimum), focus order, semantic labels, live-region announcements, and keyboard/switch-access traversal. Document and fix all failures. Produce a compliance report.

high priority medium complexity testing pending testing specialist Tier 6

Acceptance Criteria

All interactive elements (buttons, chips, list items) have a minimum touch target size of 44×44 dp measured with Flutter's debug layout bounds

All text and interactive element foreground/background colour combinations meet WCAG 2.2 AA contrast ratio: 4.5:1 for normal text, 3:1 for large text and UI components

Contrast ratios verified using the app's design token values — not visual approximations

All buttons, icons, and form controls have descriptive Semantics labels readable by TalkBack (Android) and VoiceOver (iOS)

Icon-only buttons (e.g. Re-download) have explicit Semantics(label: '...') — not relying on tooltip fallback alone

Focus traversal order on the confirmation dialog follows logical reading order: scope → period → record count → format → Cancel → Confirm

No focus trap issues: focus returns to the trigger button after dialog cancel, and to an appropriate element after confirm

Live-region announcements are verified on a physical device with TalkBack/VoiceOver active — progress updates, status changes, and error messages are announced

Entire export flow is navigable using Switch Access (Android) and Full Keyboard Access (iOS) without unreachable interactive elements

All failures identified during audit are fixed in code (not just documented) before the task is marked complete

A written WCAG 2.2 AA compliance report is produced listing each criterion checked, pass/fail result, and fix applied for failures

Export history list items each have a combined Semantics label covering period, format, status, and timestamp as a single accessible node

Technical Requirements

frameworks

Flutter

flutter_test

data models

accessibility_preferences

performance requirements

Accessibility label computation must not perform synchronous database calls — all labels derived from in-memory widget state only

security requirements

Accessibility labels must not expose internal system identifiers (UUIDs, database row IDs) in the Semantics tree — use human-readable descriptions only

ui components

All five export UI screens: ExportTriggerScreen, PeriodSelectorScreen, FormatSelectorScreen, BufdirExportConfirmationDialog, BufdirExportHistoryList

Semantics widget

ExcludeSemantics widget (for purely decorative elements)

MergeSemantics widget (for list items)

Execution Context

Execution Tier

Tier 6

Tier 6 - 158 tasks

Can start after Tier 5 completes

View Full Execution Plan

Implementation Notes

Use Flutter DevTools Accessibility inspector and the Accessibility Scanner Android app (Google) for initial automated detection of contrast and touch-target failures. For touch targets smaller than 44×44 dp, wrap with a SizedBox(width: 44, height: 44) or use Padding to expand the hit area without changing visual size — do not use GestureDetector with a larger area around a small widget as this creates invisible tap regions. For MergeSemantics on list items: wrap the entire ExportHistoryListItem in MergeSemantics to combine period + format + status + timestamp into one TalkBack/VoiceOver announcement, but mark the Re-download button as a separate Semantics node so it remains independently focusable. For the compliance report: use a Markdown table with columns: WCAG Criterion, Screen, Element, Result (Pass/Fail), Fix Applied.

Prioritise Blindeforbundet's users (VoiceOver critical) given the project context from likeperson.md.

Testing Requirements

Automated accessibility checks: use flutter_test's SemanticsController (tester.getSemantics) to assert Semantics labels on all interactive elements. Write a dedicated accessibility_test.dart file covering each screen. Manual testing checklist: (1) TalkBack on Android emulator — navigate all five screens, verify all announcements, (2) VoiceOver on iOS simulator — same verification, (3) Switch Access on Android — verify all interactive elements are reachable, (4) Full Keyboard Access on iOS — verify same, (5) Increase font size to 200% in system settings — verify no text overflow or clipping on any screen, (6) High contrast mode — verify all contrast ratios still pass. Document each manual test step in the compliance report with pass/fail status.

Component

Bufdir Export Trigger Screen

ui medium

Dependencies (2)

Add re-download capability to the export history list: tapping the Re-download button on a history item retrieves the signed file URL from Supabase Storage and triggers the platform share sheet or file-save dialog. Handle expired URLs gracefully by re-generating a fresh signed URL via the repository. Show a progress indicator during URL resolution and surface errors with retry. epic-bufdir-reporting-export-ui-task-011 Build the animated progress indicator widget displayed during active export, showing a percentage bar and status label (e.g., 'Fetching records…', 'Generating file…', 'Upload complete'). Progress value is driven by ExportTriggerBloc. On completion, show a success banner with a Download button. On error, show a plain-language error message with a Retry action. All dynamic status changes must be announced via accessibility live regions. epic-bufdir-reporting-export-ui-task-008

Epic Risks (2)

medium impact medium prob technical

For large exports that run for 10–30 seconds, a static loading spinner will feel broken to users on slow mobile connections. If the UI cannot display meaningful progress during the export pipeline, coordinators may abandon the flow or trigger duplicate exports by pressing the button multiple times.

Mitigation & Contingency

Mitigation: Implement streaming progress events from the orchestrator BLoC through named pipeline stages (querying, mapping, generating, uploading). Display each stage label with a progress indicator on the trigger screen. Disable the generate button immediately on first tap to prevent duplicates.

Contingency: If streaming pipeline progress is not feasible in the first release, implement a deterministic stage-based progress animation (10% querying, 50% generating, 90% uploading) that gives users feedback without requiring real server events.

high impact medium prob technical

Custom date range pickers are among the most common accessibility failures in mobile apps. Blindeforbundet users rely on VoiceOver, and NHF users include people with cognitive impairments. A non-accessible period picker could make the entire export workflow unusable for a significant portion of the intended user base.

Mitigation & Contingency

Mitigation: Build the period picker using Flutter's native date picker semantics as the foundation, with preset shortcuts as primary navigation (reducing the need to interact with the custom range picker at all). Test with VoiceOver on iOS and TalkBack on Android before UI epic sign-off. Engage Blindeforbundet's test contact for accessibility validation.

Contingency: If the custom date range picker cannot be made fully accessible before release, ship only the preset period shortcuts (covering the majority of use cases) and add the custom range picker in a follow-up sprint after dedicated accessibility remediation.

Quick Links

All Tasks Execution Plan