Skip to content

Commit 0928063

Browse files
Merge pull request #816 from Fayedamz/feature/723-callhistoryrow-aria-live-status
docs: add CallHistoryRow aria-live status region documentation (Close…
2 parents 8c9a92c + 39a3d85 commit 0928063

1 file changed

Lines changed: 57 additions & 0 deletions

File tree

‎docs/call-history-row-aria-live.md‎

Lines changed: 57 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,57 @@
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

Comments
 (0)