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

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

View file

@ -1,6 +1,8 @@
import { ContentTypes, QueryKeys, Constants } from 'librechat-data-provider';
import type { TMessage, TMessageContentParts } from 'librechat-data-provider';
import type { QueryClient } from '@tanstack/react-query';
import type { LocalizeFunction } from '~/common';
import _ from 'lodash';
export const TEXT_KEY_DIVIDER = '|||';
@ -170,3 +172,9 @@ export const clearMessagesCache = (
queryClient.setQueryData<TMessage[]>([QueryKeys.messages, Constants.NEW_CONVO], []);
}
};
export const getMessageAriaLabel = (message: TMessage, localize: LocalizeFunction): string => {
return !_.isNil(message.depth)
? localize('com_endpoint_message_new', { 0: message.depth + 1 })
: localize('com_endpoint_message');
};