Andreas/LibreChat
1
0
Fork 0
mirror of https://github.com/danny-avila/LibreChat.git synced 2026-03-07 16:42:38 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions 3

🦻 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/Chat/Messages/ui/MessageRender.tsx
View file

@ -11,8 +11,8 @@ import MessageIcon from '~/components/Chat/Messages/MessageIcon';
import SubRow from '~/components/Chat/Messages/SubRow';
import { fontSizeAtom } from '~/store/fontSize';
import { MessageContext } from '~/Providers';
import { useMessageActions } from '~/hooks';
import { cn, logger } from '~/utils';
import { useLocalize, useMessageActions } from '~/hooks';
import { cn, getMessageAriaLabel, logger } from '~/utils';
import store from '~/store';
type MessageRenderProps = {
@ -37,6 +37,7 @@ const MessageRender = memo(
setCurrentEditId,
isSubmittingFamily = false,
}: MessageRenderProps) => {
const localize = useLocalize();
const {
ask,
edit,
@ -130,7 +131,7 @@ const MessageRender = 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,