You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Field operators using assistive technology may miss status updates because there are no `aria-live` regions set up in the app. Status transitions in campaigns and claim receipts need to be explicitly announced to screen readers.
5
+
6
+
## What was implemented
7
+
- Created a `<LiveRegion>` component in `app/frontend/src/components/LiveRegion.tsx` that uses `aria-live="polite"` and `role="status"` to announce message changes. It includes a small debounce queue (50ms) to ensure consecutive rapid updates are announced clearly.
8
+
- Created `getStatusTransitionMessage` utility in `app/frontend/src/lib/status-messages.ts` to map raw status values to verbose, human-readable text (e.g. "Campaign status changed from Active to Paused.").
9
+
- Integrated `<LiveRegion>` into `app/frontend/src/app/[locale]/campaigns/page.tsx` and `app/frontend/src/app/[locale]/claim-receipt/page.tsx`, storing previous state with a `useRef` and detecting status transitions to trigger announcements.
10
+
- Added `jest-axe` tests for `<LiveRegion>` in `app/frontend/test/live-region.spec.tsx` to verify standard accessibility compliance and ensure text transitions correctly.
11
+
12
+
## Assumptions made during Phase 1
13
+
-`claim-receipt/page.tsx` is the intended target for the "claim-status / claim detail page" mentioned in the requirements, as it's the primary location for viewing a claim's status.
14
+
- Campaign transitions happen via optimistic mutation and derive status from the local component list, so `useRef` was used to detect status changes cleanly without modifying the global store or mutation logic.
15
+
16
+
## How to manually verify
17
+
1. Run the application (`pnpm run dev`).
18
+
2. Turn on a screen reader (VoiceOver, NVDA, or JAWS).
19
+
3. Navigate to the NGO Campaigns page and perform an action like "Pause" or "Resume" on a campaign. The screen reader should announce "Campaign status changed from Active to Paused."
20
+
4. Inspect the DOM to verify the visually hidden `aria-live` region updates its text content.
21
+
22
+
## Follow-up work recommended
23
+
- Extend this pattern to other dynamic status indicators in the application (like `VerificationReviewPage` queues or `ActivityCenter` toasts) to ensure universal accessibility coverage.
Copy file name to clipboardExpand all lines: README.md
+5-1Lines changed: 5 additions & 1 deletion
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -144,7 +144,11 @@ cd app/onchain && make test
144
144
145
145
## Contributing
146
146
147
-
We welcome contributions that make humanitarian aid delivery more transparent and efficient. When submitting changes:
147
+
We welcome contributions that make humanitarian aid delivery more transparent and efficient.
148
+
149
+
Please read our [End-to-End Contributor Journey](docs/contributing/journey.md) for a complete walk-through of finding an issue, local setup, PR conventions, CI expectations, and the merge process.
150
+
151
+
When submitting changes:
148
152
149
153
1. Open an issue to discuss the proposed change before implementing
150
154
2. Keep pull requests small and focused on a single concern
0 commit comments