🗣️ a11y: Distinguish Conversation Headings for Screen Readers#12341
Merged
Conversation
Before, each message would have the heading of either the name of the user or the name of the agent (e.g. "Dan Lew" or "Claude Sonnet"). If you tried to navigate that with a screen reader, you'd just see a ton of headings switching back and forth between the two with no way to figure out where in the conversation each is. Now, we prefix each header with whether it's a "prompt" or "response", plus we number them so that you can distinguish how far in the conversation each part is. (This is a screen reader only change - there's no visual difference.)
danny-avila
force-pushed
the
dlew/screen-reader-conversation-headings
branch
from
8db7434 to
8f11d80
Compare
Contributor
There was a problem hiding this comment.
Pull request overview
Improves chat message heading accessibility by adding a screen-reader-only prefix that distinguishes prompts vs responses and includes an optional 1-based turn number derived from message.depth, making heading navigation meaningful for screen reader users.
Changes:
- Added
getHeaderPrefixForScreenReader()(and sharedgetMessageNumber()helper) to generate “Prompt N:” / “Response N:” prefixes and avoid numbering invalid depths. - Updated message heading renderers to include the sr-only prefix before the visual label.
- Added unit tests for
getMessageAriaLabel()andgetHeaderPrefixForScreenReader().
Reviewed changes
Copilot reviewed 5 out of 5 changed files in this pull request and generated 1 comment.
Show a summary per file
| File | Description |
|---|---|
| client/src/utils/messages.ts | Adds shared depth→turn-number helper and new screen-reader-only heading prefix utility. |
| client/src/utils/tests/messages.test.ts | Adds unit tests for the updated/new message accessibility utilities. |
| client/src/components/Messages/ContentRender.tsx | Injects sr-only heading prefix into message headings in this render path. |
| client/src/components/Chat/Messages/ui/MessageRender.tsx | Injects sr-only heading prefix into message headings in this render path. |
| client/src/components/Chat/Messages/MessageParts.tsx | Injects sr-only heading prefix into the Assistants/Azure Assistants render path headings. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
danny-avila
changed the title
danny-avila
force-pushed
the
dlew/screen-reader-conversation-headings
branch
2 times, most recently
from
c9b8763 to
bdd7edf
Compare
- Add sr-only heading prefix to MessageParts.tsx (Assistants endpoint path) - Extract shared getMessageNumber helper to avoid DRY violation between getMessageAriaLabel and getHeaderPrefixForScreenReader - Guard against depth < 0 producing "Prompt 0:" / "Response 0:" - Remove unused lodash import - Add unit tests covering all branches including depth edge cases
danny-avila
force-pushed
the
dlew/screen-reader-conversation-headings
branch
from
bdd7edf to
9ea62ec
Compare
jcbartle
pushed a commit
to jcbartle/LibreChat
that referenced
this pull request
May 11, 2026
…avila#12341) * fix: distinguish message headings for screen readers Before, each message would have the heading of either the name of the user or the name of the agent (e.g. "Dan Lew" or "Claude Sonnet"). If you tried to navigate that with a screen reader, you'd just see a ton of headings switching back and forth between the two with no way to figure out where in the conversation each is. Now, we prefix each header with whether it's a "prompt" or "response", plus we number them so that you can distinguish how far in the conversation each part is. (This is a screen reader only change - there's no visual difference.) * fix: patch MessageParts heading, guard negative depth, add tests - Add sr-only heading prefix to MessageParts.tsx (Assistants endpoint path) - Extract shared getMessageNumber helper to avoid DRY violation between getMessageAriaLabel and getHeaderPrefixForScreenReader - Guard against depth < 0 producing "Prompt 0:" / "Response 0:" - Remove unused lodash import - Add unit tests covering all branches including depth edge cases --------- Co-authored-by: Dan Lew <daniel@mightyacorn.com>
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
Continues #12154 (from @dlew) with review fixes applied.
Before, each message heading was just the user/agent name (e.g. "Dan Lew" or "Claude Sonnet"). Screen reader users navigating by headings saw identical labels with no way to distinguish position in the conversation.
Now, each
<h2>includes a screen-reader-only prefix: "Prompt N:" or "Response N:", where N is the 1-based turn number. This is invisible visually but announced by screen readers in heading navigation mode.Changes from original PR
getMessageNumberhelper that returnsnullfordepth < 0, preventing "Prompt 0:" / "Response 0:" from surfacinggetMessageAriaLabelandgetHeaderPrefixForScreenReadernow share the same depth computation viagetMessageNumber_.isNilreplaced with idiomatic== nullcheckChange Type
Testing
client/src/utils/__tests__/messages.test.ts)sr-onlyclass