The progress dots in ChainStrip conveyed state purely by color, scale, and opacity (scale-125 for current, opacity-60 for past, opacity-30 for future), and the only accessible name on each <button> was a title= — which screen readers announce inconsistently. Keyboard and screen-reader users couldn't tell which step was current or what each step was about.
Changes
Wrap the dots in <ol aria-label="Question chain progress"> with each dot in an <li> so AT announces this as an ordered list of N items rather than a loose bag of buttons.
Mark the current dot with aria-current="step".
Give each dot an aria-label of the form Part X of Y: <level> <name> — <title> (with " (completed)" appended for past steps), so the accessible name doesn't depend on title=.
Add type="button" to the dots so they can't accidentally submit a form if the strip is ever rendered inside one.
Visual impact
Zero. The list resets default list-style / padding / margin so the dot row still renders identically.
Test plan
npx vitest run → 43/43 passing (was 37/37 on dev — 6 new tests for list semantics, single aria-current, accessible-name format, completed-suffix on past steps only, type="button" on every dot, and that onNavigate is still wired to clicks)
npx tsc --noEmit → clean
Manual a11y: open a chained question, Tab into the dot row, listen — screen reader should announce the list, then each dot with its part/level/title, with the current dot identified as the current step
Manual visual: dot row should look identical to before
🔄 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/1821
**Author:** [@farhan523](https://github.com/farhan523)
**Created:** 5/29/2026
**Status:** 🔄 Open
**Base:** `dev` ← **Head:** `fix/chainstrip-a11y`
---
### 📝 Commits (1)
- [`7c3c23a`](https://github.com/harvard-edge/cs249r_book/commit/7c3c23a40487c97e89e640b8d2a408927168eed4) fix(staffml): give ChainStrip dots accessible names and a current-step marker
### 📊 Changes
**2 files changed** (+114 additions, -23 deletions)
<details>
<summary>View changed files</summary>
➕ `interviews/staffml/src/__tests__/chain-strip.test.tsx` (+82 -0)
📝 `interviews/staffml/src/components/ChainStrip.tsx` (+32 -23)
</details>
### 📄 Description
## Summary
The progress dots in `ChainStrip` conveyed state purely by color, scale, and opacity (`scale-125` for current, `opacity-60` for past, `opacity-30` for future), and the only accessible name on each `<button>` was a `title=` — which screen readers announce inconsistently. Keyboard and screen-reader users couldn't tell which step was current or what each step was about.
### Changes
- Wrap the dots in `<ol aria-label="Question chain progress">` with each dot in an `<li>` so AT announces this as an ordered list of N items rather than a loose bag of buttons.
- Mark the current dot with `aria-current="step"`.
- Give each dot an `aria-label` of the form `Part X of Y: <level> <name> — <title>` (with `" (completed)"` appended for past steps), so the accessible name doesn't depend on `title=`.
- Add `type="button"` to the dots so they can't accidentally submit a form if the strip is ever rendered inside one.
### Visual impact
Zero. The list resets default `list-style` / padding / margin so the dot row still renders identically.
## Test plan
- [x] `npx vitest run` → 43/43 passing (was 37/37 on dev — 6 new tests for list semantics, single `aria-current`, accessible-name format, completed-suffix on past steps only, `type="button"` on every dot, and that `onNavigate` is still wired to clicks)
- [x] `npx tsc --noEmit` → clean
- [ ] Manual a11y: open a chained question, Tab into the dot row, listen — screen reader should announce the list, then each dot with its part/level/title, with the current dot identified as the current step
- [ ] Manual visual: dot row should look identical to before
---
<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/1821
Author: @farhan523
Created: 5/29/2026
Status: 🔄 Open
Base:
dev← Head:fix/chainstrip-a11y📝 Commits (1)
7c3c23afix(staffml): give ChainStrip dots accessible names and a current-step marker📊 Changes
2 files changed (+114 additions, -23 deletions)
View changed files
➕
interviews/staffml/src/__tests__/chain-strip.test.tsx(+82 -0)📝
interviews/staffml/src/components/ChainStrip.tsx(+32 -23)📄 Description
Summary
The progress dots in
ChainStripconveyed state purely by color, scale, and opacity (scale-125for current,opacity-60for past,opacity-30for future), and the only accessible name on each<button>was atitle=— which screen readers announce inconsistently. Keyboard and screen-reader users couldn't tell which step was current or what each step was about.Changes
<ol aria-label="Question chain progress">with each dot in an<li>so AT announces this as an ordered list of N items rather than a loose bag of buttons.aria-current="step".aria-labelof the formPart X of Y: <level> <name> — <title>(with" (completed)"appended for past steps), so the accessible name doesn't depend ontitle=.type="button"to the dots so they can't accidentally submit a form if the strip is ever rendered inside one.Visual impact
Zero. The list resets default
list-style/ padding / margin so the dot row still renders identically.Test plan
npx vitest run→ 43/43 passing (was 37/37 on dev — 6 new tests for list semantics, singlearia-current, accessible-name format, completed-suffix on past steps only,type="button"on every dot, and thatonNavigateis still wired to clicks)npx tsc --noEmit→ clean🔄 This issue represents a GitHub Pull Request. It cannot be merged through Gitea due to API limitations.