Toasts — badge unlocks, streak milestones, "Saved to your browser", "Link copied" — were invisible to screen readers:
The toast container was a plain <div> with no live region, so nothing was announced when a toast appeared.
The icon-only dismiss button had no accessible name — a screen reader read just "button" (and axe flags "Buttons must have discernible text").
Notably the repo's other toast, VersionDriftToast, already does this correctly with role="status" + aria-live="polite" — so this is an inconsistency with an in-repo precedent.
Fix
Make the always-mounted container a polite live region: role="region" + aria-label="Notifications" + aria-live="polite", with aria-atomic="false" so only the newly-added toast is announced rather than the whole stack being re-read on every change.
Give the dismiss button aria-label="Dismiss notification" (+ type="button"), and mark the X icon aria-hidden.
Test
Adds src/__tests__/toast-a11y.test.tsx asserting the live-region attributes and the dismiss button's accessible name. Full suite green (112), tsc --noEmit clean.
How to verify
npm run dev, go to /practice, click "Copy question link" → a toast appears.
DevTools → Accessibility pane: container is a "region" named Notifications (live = polite); the X button's computed name is "Dismiss notification" (was unnamed).
With a screen reader (NVDA / VoiceOver): the toast text is spoken on appearance; the dismiss button announces its name.
🔄 This issue represents a GitHub Pull Request. It cannot be merged through Gitea due to API limitations.
## 📋 Pull Request Information
**Original PR:** https://github.com/harvard-edge/cs249r_book/pull/1858
**Author:** [@farhan523](https://github.com/farhan523)
**Created:** 6/12/2026
**Status:** ✅ Merged
**Merged:** 6/16/2026
**Merged by:** [@profvjreddi](https://github.com/profvjreddi)
**Base:** `dev` ← **Head:** `fix/staffml-toast-a11y`
---
### 📝 Commits (1)
- [`09f36e4`](https://github.com/harvard-edge/cs249r_book/commit/09f36e41deb34cabae2e2184b43761bd91d25d31) fix(staffml): announce toasts to assistive tech and label the dismiss button
### 📊 Changes
**2 files changed** (+74 additions, -3 deletions)
<details>
<summary>View changed files</summary>
➕ `interviews/staffml/src/__tests__/toast-a11y.test.tsx` (+58 -0)
📝 `interviews/staffml/src/components/Toast.tsx` (+16 -3)
</details>
### 📄 Description
## Problem (accessibility)
Toasts — badge unlocks, streak milestones, "Saved to your browser", "Link copied" — were **invisible to screen readers**:
- The toast container was a plain `<div>` with **no live region**, so nothing was announced when a toast appeared.
- The icon-only dismiss button had **no accessible name** — a screen reader read just *"button"* (and axe flags "Buttons must have discernible text").
Notably the repo's *other* toast, `VersionDriftToast`, already does this correctly with `role="status"` + `aria-live="polite"` — so this is an inconsistency with an in-repo precedent.
## Fix
- Make the always-mounted container a polite live region: `role="region"` + `aria-label="Notifications"` + `aria-live="polite"`, with `aria-atomic="false"` so only the newly-added toast is announced rather than the whole stack being re-read on every change.
- Give the dismiss button `aria-label="Dismiss notification"` (+ `type="button"`), and mark the `X` icon `aria-hidden`.
## Test
Adds `src/__tests__/toast-a11y.test.tsx` asserting the live-region attributes and the dismiss button's accessible name. Full suite green (112), `tsc --noEmit` clean.
## How to verify
1. `npm run dev`, go to `/practice`, click **"Copy question link"** → a toast appears.
2. DevTools → Accessibility pane: container is a "region" named *Notifications* (live = polite); the X button's computed name is *"Dismiss notification"* (was unnamed).
3. With a screen reader (NVDA / VoiceOver): the toast text is spoken on appearance; the dismiss button announces its name.
---
<sub>🔄 This issue represents a GitHub Pull Request. It cannot be merged through Gitea due to API limitations.</sub>
Blocking a user prevents them from interacting with repositories, such as opening or commenting on pull requests or issues. Learn more about blocking a user.
📋 Pull Request Information
Original PR: https://github.com/harvard-edge/cs249r_book/pull/1858
Author: @farhan523
Created: 6/12/2026
Status: ✅ Merged
Merged: 6/16/2026
Merged by: @profvjreddi
Base:
dev← Head:fix/staffml-toast-a11y📝 Commits (1)
09f36e4fix(staffml): announce toasts to assistive tech and label the dismiss button📊 Changes
2 files changed (+74 additions, -3 deletions)
View changed files
➕
interviews/staffml/src/__tests__/toast-a11y.test.tsx(+58 -0)📝
interviews/staffml/src/components/Toast.tsx(+16 -3)📄 Description
Problem (accessibility)
Toasts — badge unlocks, streak milestones, "Saved to your browser", "Link copied" — were invisible to screen readers:
<div>with no live region, so nothing was announced when a toast appeared.Notably the repo's other toast,
VersionDriftToast, already does this correctly withrole="status"+aria-live="polite"— so this is an inconsistency with an in-repo precedent.Fix
role="region"+aria-label="Notifications"+aria-live="polite", witharia-atomic="false"so only the newly-added toast is announced rather than the whole stack being re-read on every change.aria-label="Dismiss notification"(+type="button"), and mark theXiconaria-hidden.Test
Adds
src/__tests__/toast-a11y.test.tsxasserting the live-region attributes and the dismiss button's accessible name. Full suite green (112),tsc --noEmitclean.How to verify
npm run dev, go to/practice, click "Copy question link" → a toast appears.🔄 This issue represents a GitHub Pull Request. It cannot be merged through Gitea due to API limitations.