Skip to content

fix(widget): announce new messages and the typing indicator to screen readers - #153

Open
prakashNalla wants to merge 1 commit into
codercops:devfrom
prakashNalla:fix/announce-messages
Open

prakashNalla wants to merge 1 commit into
codercops:devfrom
prakashNalla:fix/announce-messages

Conversation

@prakashNalla

Copy link
Copy Markdown
Contributor

What does this change?

The messages container now has role="log" and aria-live="polite", so new replies are read out. The typing indicator gets the typingIndicator locale text in a visually hidden span (new .cc-sr-only class in widget.css) and its three dots are aria-hidden. The textarea gets an aria-label from the placeholder, and a reply has aria-busy="true" while it streams, which is removed once it's complete, so it isn't re-read on every chunk.

Closes #64

How I tested this

  • pnpm install --frozen-lockfile, pnpm -r build, pnpm -r typecheck, pnpm test (29 files / 265 tests pass) and pnpm changeset status, on Node v22.23.3 with pnpm 9.15.0
  • Added 4 tests (the log attributes, the typing text and hidden dots, aria-busy while streaming, the textarea label). All 4 fail without the change.
  • Opened dev.html against a small local server that streams a reply word by word, and read the accessibility tree in headless Chrome (puppeteer page.accessibility.snapshot()):
    • textarea: textbox "Type a message..."
    • while waiting: log containing "Typing...", dots aria-hidden="true"
    • mid-stream the reply has aria-busy="true", after the last chunk it's gone, and the log holds the full reply

AI assistance

Claude helped me w/ the understanding of the tests.

Checklist

  • This PR targets dev
  • I was assigned the linked issue
  • pnpm -r build, pnpm test and pnpm -r typecheck pass locally
  • Tests added or updated where it makes sense
  • For a bug fix: the new test fails without my change
  • Changeset added (pnpm changeset) if this changes core, widget or server
  • Docs updated if behavior or options changed

This branch has not been deployed

No deployments
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Announce new chat messages to screen readers

1 participant