Andreas/LibreChat
1
0
Fork 0
mirror of https://github.com/danny-avila/LibreChat.git synced 2026-02-28 21:30:18 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

🦻 fix: Standardize Message Aria Labels for Assistive Technology (#10796)

Browse source 
Message aria labels were using the format `message-{depth}-{id}`, which
reads out in a very unfriendly way to a screen reader (e.g.
"message-3-65a38d32-4d6e-42c7-b67b-9ee62f8cedb1").

I standardized all the labeling in one place (`getMessageAriaLabel()`).
They now read out "Message 1", "Message 2", and so on.
This commit is contained in:
Daniel Lew 2025-12-11 15:28:21 -06:00 • committed by Danny Avila
parent 304bba853c
commit ad733157d7
No known key found for this signature in database
GPG key ID: BF31EEB2C5CA0956
4 changed files with 18 additions and 8 deletions
Download patch file Download diff file Expand all files Collapse all files

7
client/src/components/Messages/ContentRender.tsx
View file

@ -8,10 +8,10 @@ import PlaceholderRow from '~/components/Chat/Messages/ui/PlaceholderRow';
import SiblingSwitch from '~/components/Chat/Messages/SiblingSwitch';
import HoverButtons from '~/components/Chat/Messages/HoverButtons';
import MessageIcon from '~/components/Chat/Messages/MessageIcon';
import { useAttachments, useMessageActions } from '~/hooks';
import { useAttachments, useLocalize, useMessageActions } from '~/hooks';
import SubRow from '~/components/Chat/Messages/SubRow';
import { fontSizeAtom } from '~/store/fontSize';
import { cn, logger } from '~/utils';
import { cn, getMessageAriaLabel, logger } from '~/utils';
import store from '~/store';
type ContentRenderProps = {
@ -36,6 +36,7 @@ const ContentRender = memo(
setCurrentEditId,
isSubmittingFamily = false,
}: ContentRenderProps) => {
const localize = useLocalize();
const { attachments, searchResults } = useAttachments({
messageId: msg?.messageId,
attachments: msg?.attachments,
@ -130,7 +131,7 @@ const ContentRender = memo(
return (
<div
id={msg.messageId}
aria-label={`message-${msg.depth}-${msg.messageId}`}
aria-label={getMessageAriaLabel(msg, localize)}
className={cn(
baseClasses.common,
isCard ? baseClasses.card : baseClasses.chat,