|
| 1 | +# CallHistoryRow — aria-live Status Announcements |
| 2 | + |
| 3 | +## Summary |
| 4 | + |
| 5 | +Adds a polite `aria-live` region to `CallHistoryRow` so screen readers announce |
| 6 | +status changes without interrupting the user's current focus. |
| 7 | + |
| 8 | +## Files Changed |
| 9 | + |
| 10 | +| File | Change | |
| 11 | +|---|---| |
| 12 | +| `src/pages/CallHistoryRow.tsx` | Added `announcement` state + `useEffect` to detect status changes; renders a visually-hidden `role="status"` live region | |
| 13 | +| `src/pages/CallHistoryRow.test.tsx` | Focused Vitest test verifying the live region starts empty, populates on status change, and carries the correct ARIA attributes | |
| 14 | + |
| 15 | +## API / Visible Changes |
| 16 | + |
| 17 | +- **No visual changes** — the live region is hidden via `.sr-only` |
| 18 | +- **No backend or network changes** |
| 19 | +- Screen readers now announce when a call row's status changes, e.g.: |
| 20 | + > "Call status updated to error." |
| 21 | +
|
| 22 | +## Implementation Details |
| 23 | + |
| 24 | +```tsx |
| 25 | +// Tracks previous status to detect changes |
| 26 | +const previousStatusRef = useRef(call.status); |
| 27 | + |
| 28 | +useEffect(() => { |
| 29 | + if (previousStatusRef.current !== call.status) { |
| 30 | + setAnnouncement(`Call status updated to ${call.status}.`); |
| 31 | + previousStatusRef.current = call.status; |
| 32 | + } |
| 33 | +}, [call.status]); |
| 34 | + |
| 35 | +// Visually hidden live region — speaks on status change |
| 36 | +<span className="sr-only" role="status" aria-live="polite" aria-atomic="true"> |
| 37 | + {announcement} |
| 38 | +</span> |
| 39 | +``` |
| 40 | + |
| 41 | +## Accessibility |
| 42 | + |
| 43 | +- `aria-live="polite"` — waits for the user to finish their current interaction before announcing |
| 44 | +- `aria-atomic="true"` — reads the full message, not just the changed portion |
| 45 | +- `role="status"` — semantic landmark for assistive technologies |
| 46 | +- `.sr-only` — WCAG 2.1 AA visually-hidden utility already defined in `src/index.css` |
| 47 | + |
| 48 | +## Testing |
| 49 | + |
| 50 | +```bash |
| 51 | +npm test -- src/pages/CallHistoryRow.test.tsx |
| 52 | +``` |
| 53 | + |
| 54 | +The test: |
| 55 | +1. Renders the row with `status: 'success'` — live region is empty |
| 56 | +2. Rerenders with `status: 'error'` — live region contains the announcement string |
| 57 | +3. Asserts `aria-live="polite"` and `aria-atomic="true"` are present |
0 commit comments