Andreas/LibreChat
1
0
Fork 0
mirror of https://github.com/danny-avila/LibreChat.git synced 2025-12-16 16:30:15 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions 6

♿ fix: Address Accessibility Issues (#10260)

Browse source 
* chore: add i18n localization comment for AlwaysMakeProd component

* feat: enhance accessibility by adding aria-label and aria-labelledby to Switch component

* feat: add aria-labels for accessibility in Agent and Assistant avatar buttons

* fix: add switch aria-labels for accessibility in various components

* feat: add aria-labels and localization keys for accessibility in DataTable, DataTableColumnHeader, and OGDialogTemplate components

* chore: refactor out nested ternary

* feat: add aria-label to DataTable filter button for My Files modal

* feat: add aria-labels for Buttons and localization strings

* feat: add aria-labels to Checkboxes in Agent Builder

* feat: enhance accessibility by adding aria-label and aria-labelledby to Checkbox component

* feat: add aria-label to FileSearchCheckbox in Agent Builder

* feat: add aria-label to Prompts text input area

* feat: enhance accessibility by adding aria-label and aria-labelledby to TextAreaAutosize component

* feat: remove improper role: "list" prop from List in Conversations.tsx to enhance accessibility and stop aria rules conflicting within react-virtualized component

* feat: enhance accessibility by allowing tab navigation and adding ring highlights for conversation title editing accept/reject buttons

* feat: add aria-label to Copy Link button in the conversation share modal

* feat: add title to QR code svg in conversation share modal to  describe the image content

* feat: enhance accessibility by making Agent Avatar upload keyboard navigable and round out highlight border on focus

* feat: enhance accessibility by adding aria attributes around alerting users with screen readers to invalid email address inputs in the Agent Builder

* feat: add aria-labels to buttons in Advanced panel of Agent Builder

* feat: enhance accessibility by making FileUpload and Clear All buttons in PresetItems keyboard navigable

* feat: enchance accessiblity by indexing view and delete button aria-labels in shared links management modal to their specific chat titles

* feat: add border highlighting on focus for AnimatedSearchInput

* feat: add category description to aria-labels for prompts in ListCard

* feat: add proper scoping to rows and columns in table headers

* feat: add localized aria-labelling to EditTextPart's TextAreaAutosize component and base dynamic paramters panel components and their supporting translation keys

* feat: add localized aria-labels and aria-labelledBy to Checkbox components without them

* feat: add localized aria-labeledBy for endpoint settings Sliders

* feat: add localized aria-labels for TextareaAutosize components

* chore: remove unused i18n string

* feat: add localized aria-label for BookmarkForm Checkbox

* fix: add stopPropagation onKeyDown for Preview and Edit menu items in prompts that was causing the prompts to inadvertently be sent when triggered with keyboard navigation when Auto-send Prompts was toggled on

* fix: switch TableCell to TableHead for title cells according to harvard issue #789

* fix: add more descriptive localization key for file filter button in DataTable

* chore: remove self-explanatory code comment from RenameForm

* fix: remove stray bg-yellow highlight that was left in during debugging

* fix: add aria-label to model configurator panel back button

* fix: undo incorrect hoist of tool name split for aria-label and span in MCPInput

---------

Co-authored-by: Danny Avila <danny@librechat.ai>
This commit is contained in:
Dustin Healy 2025-10-28 00:46:43 +01:00 • committed by GitHub
parent 33d6b337bc
commit 0446d0e190
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
74 changed files with 427 additions and 131 deletions
Download patch file Download diff file Expand all files Collapse all files

1
client/src/components/Agents/MarketplaceAdminSettings.tsx
View file

@ -58,6 +58,7 @@ const LabelController: React.FC<LabelControllerProps> = ({
checked={field.value}
onCheckedChange={field.onChange}
value={field.value.toString()}
aria-label={label}
/>
)}
/>

8
client/src/components/Bookmarks/BookmarkForm.tsx
View file

@ -129,7 +129,11 @@ const BookmarkForm = ({
</div>
<div className="mt-4 grid w-full items-center gap-2">
<Label htmlFor="bookmark-description" className="text-left text-sm font-medium">
<Label
id="bookmark-description-label"
htmlFor="bookmark-description"
className="text-left text-sm font-medium"
>
{localize('com_ui_bookmarks_description')}
</Label>
<TextareaAutosize
@ -147,6 +151,7 @@ const BookmarkForm = ({
className={cn(
'flex h-10 max-h-[250px] min-h-[100px] w-full resize-none rounded-lg border border-input bg-transparent px-3 py-2 text-sm ring-offset-background focus-visible:outline-none',
)}
aria-labelledby="bookmark-description-label"
/>
</div>
{conversationId != null && conversationId && (
@ -161,6 +166,7 @@ const BookmarkForm = ({
onCheckedChange={field.onChange}
className="relative float-left mr-2 inline-flex h-4 w-4 cursor-pointer"
value={field.value?.toString()}
aria-label={localize('com_ui_bookmarks_add_to_conversation')}
/>
)}
/>

3
client/src/components/Chat/Input/ChatForm.tsx
View file

@ -12,6 +12,7 @@ import {
import {
useTextarea,
useAutoSave,
useLocalize,
useRequiresKey,
useHandleKeyUp,
useQueryParams,
@ -38,6 +39,7 @@ const ChatForm = memo(({ index = 0 }: { index?: number }) => {
const submitButtonRef = useRef<HTMLButtonElement>(null);
const textAreaRef = useRef<HTMLTextAreaElement>(null);
useFocusChatEffect(textAreaRef);
const localize = useLocalize();
const [isCollapsed, setIsCollapsed] = useState(false);
const [, setIsScrollable] = useState(false);
@ -279,6 +281,7 @@ const ChatForm = memo(({ index = 0 }: { index?: number }) => {
setIsTextAreaFocused(true);
}}
onBlur={setIsTextAreaFocused.bind(null, false)}
aria-label={localize('com_ui_message_input')}
onClick={handleFocusOrClick}
style={{ height: 44, overflowY: 'auto' }}
className={cn(

34
client/src/components/Chat/Input/Files/FileUpload.tsx
View file

@ -62,17 +62,28 @@ const FileUpload: React.FC<FileUploadProps> = ({
statusText = invalidText ?? localize('com_ui_upload_invalid');
}
const handleClick = () => {
const fileInput = document.getElementById(`file-upload-${id}`) as HTMLInputElement;
if (fileInput) {
fileInput.click();
}
};
return (
<label
htmlFor={`file-upload-${id}`}
className={cn(
'mr-1 flex h-auto cursor-pointer items-center rounded bg-transparent px-2 py-1 text-xs font-normal transition-colors hover:bg-gray-100 hover:text-green-600 dark:bg-transparent dark:text-gray-300 dark:hover:bg-gray-700 dark:hover:text-green-500',
statusColor,
containerClassName,
)}
>
<FileUp className="mr-1 flex w-[22px] items-center stroke-1" />
<span className="flex text-xs">{statusText}</span>
<>
<button
type="button"
onClick={handleClick}
className={cn(
'mr-1 flex h-auto cursor-pointer items-center rounded bg-transparent px-2 py-1 text-xs font-normal transition-colors hover:bg-gray-100 hover:text-green-600 focus:ring-ring dark:bg-transparent dark:text-gray-300 dark:hover:bg-gray-700 dark:hover:text-green-500',
statusColor,
containerClassName,
)}
aria-label={statusText}
>
<FileUp className="mr-1 flex w-[22px] items-center stroke-1" aria-hidden="true" />
<span className="flex text-xs">{statusText}</span>
</button>
<input
id={`file-upload-${id}`}
value=""
@ -80,8 +91,9 @@ const FileUpload: React.FC<FileUploadProps> = ({
className={cn('hidden', className)}
accept=".json"
onChange={handleFileChange}
tabIndex={-1}
/>
</label>
</>
);
};

6
client/src/components/Chat/Input/Files/Table/DataTable.tsx
View file

@ -122,7 +122,11 @@ export default function DataTable<TData, TValue>({ columns, data }: DataTablePro
/>
<DropdownMenu>
<DropdownMenuTrigger asChild>
<Button variant="outline" className={cn('min-w-[40px]', isSmallScreen && 'px-2 py-1')}>
<Button
variant="outline"
aria-label={localize('com_files_filter_by')}
className={cn('min-w-[40px]', isSmallScreen && 'px-2 py-1')}
>
<ListFilter className="size-3.5 sm:size-4" />
</Button>
</DropdownMenuTrigger>

10
client/src/components/Chat/Menus/Presets/PresetItems.tsx
View file

@ -59,9 +59,10 @@ const PresetItems: FC<{
</label>
<Dialog>
<DialogTrigger asChild>
<label
htmlFor="file-upload"
className="mr-1 flex h-[32px] cursor-pointer items-center rounded bg-transparent px-2 py-1 text-xs font-medium text-gray-600 transition-colors hover:bg-gray-100 hover:text-red-700 dark:bg-transparent dark:text-gray-300 dark:hover:bg-gray-700 dark:hover:text-red-700"
<button
type="button"
className="mr-1 flex h-[32px] cursor-pointer items-center rounded bg-transparent px-2 py-1 text-xs font-medium text-gray-600 transition-colors hover:bg-gray-100 hover:text-red-700 focus:ring-ring dark:bg-transparent dark:text-gray-300 dark:hover:bg-gray-700 dark:hover:text-red-700"
aria-label={localize('com_ui_clear') + ' ' + localize('com_ui_all')}
>
<svg
width="24"
@ -70,11 +71,12 @@ const PresetItems: FC<{
fill="currentColor"
xmlns="http://www.w3.org/2000/svg"
className="mr-1 flex w-[22px] items-center"
aria-hidden="true"
>
<path d="M9.293 0H4a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2V4.707A1 1 0 0 0 13.707 4L10 .293A1 1 0 0 0 9.293 0M9.5 3.5v-2l3 3h-2a1 1 0 0 1-1-1M6.854 7.146 8 8.293l1.146-1.147a.5.5 0 1 1 .708.708L8.707 9l1.147 1.146a.5.5 0 0 1-.708.708L8 9.707l-1.146 1.147a.5.5 0 0 1-.708-.708L7.293 9 6.146 7.854a.5.5 0 1 1 .708-.708"></path>
</svg>
{localize('com_ui_clear')} {localize('com_ui_all')}
</label>
</button>
</DialogTrigger>
<DialogTemplate
showCloseButton={false}

1
client/src/components/Chat/Messages/Content/EditMessage.tsx
View file

@ -168,6 +168,7 @@ const EditMessage = ({
'max-h-[65vh] pr-3 md:max-h-[75vh] md:pr-4',
removeFocusRings,
)}
aria-label={localize('com_ui_message_input')}
dir={isRTL ? 'rtl' : 'ltr'}
/>
</div>

1
client/src/components/Chat/Messages/Content/Parts/EditTextPart.tsx
View file

@ -170,6 +170,7 @@ const EditTextPart = ({
'max-h-[65vh] pr-3 md:max-h-[75vh] md:pr-4',
removeFocusRings,
)}
aria-label={localize('com_ui_editable_message')}
dir={isRTL ? 'rtl' : 'ltr'}
/>
</div>

1
client/src/components/Conversations/Conversations.tsx
View file

@ -201,7 +201,6 @@ const Conversations: FC<ConversationsProps> = ({
overscanRowCount={10}
className="outline-none"
style={{ outline: 'none' }}
role="list"
aria-label="Conversations"
onRowsRendered={handleRowsRendered}
tabIndex={-1}

9
client/src/components/Conversations/ConvoOptions/ShareButton.tsx
View file

@ -77,7 +77,13 @@ export default function ShareButton({
<div className="relative items-center rounded-lg p-2">
{showQR && (
<div className="mb-4 flex flex-col items-center">
<QRCodeSVG value={sharedLink} size={200} marginSize={2} className="rounded-2xl" />
<QRCodeSVG
value={sharedLink}
size={200}
marginSize={2}
className="rounded-2xl"
title={localize('com_ui_share_qr_code_description')}
/>
</div>
)}
@ -87,6 +93,7 @@ export default function ShareButton({
<Button
size="sm"
variant="outline"
aria-label={localize('com_ui_copy_link')}
onClick={() => {
if (isCopying) {
return;

9
client/src/components/Conversations/RenameForm.tsx
View file

@ -34,6 +34,8 @@ const RenameForm: React.FC<RenameFormProps> = ({
case 'Enter':
onSubmit(titleInput);
break;
case 'Tab':
break;
}
};
@ -50,22 +52,23 @@ const RenameForm: React.FC<RenameFormProps> = ({
value={titleInput}
onChange={(e) => setTitleInput(e.target.value)}
onKeyDown={handleKeyDown}
onBlur={() => onSubmit(titleInput)}
maxLength={100}
aria-label={localize('com_ui_new_conversation_title')}
/>
<div className="flex gap-1" role="toolbar">
<button
onClick={() => onCancel()}
className="p-1 hover:opacity-70 focus:outline-none focus:ring-2"
className="rounded-md p-1 hover:opacity-70 focus:outline-none focus:ring-2 focus:ring-ring"
aria-label={localize('com_ui_cancel')}
type="button"
>
<X className="h-4 w-4" aria-hidden="true" />
</button>
<button
onClick={() => onSubmit(titleInput)}
className="p-1 hover:opacity-70 focus:outline-none focus:ring-2"
className="rounded-md p-1 hover:opacity-70 focus:outline-none focus:ring-2 focus:ring-ring"
aria-label={localize('com_ui_save')}
type="button"
>
<Check className="h-4 w-4" aria-hidden="true" />
</button>

18
client/src/components/Endpoints/Settings/Advanced.tsx
View file

@ -151,6 +151,7 @@ export default function Settings({
min={0}
step={0.01}
className="flex h-4 w-full"
aria-labelledby="temp-int"
/>
</HoverCardTrigger>
<OptionHover endpoint={optionEndpoint ?? ''} type="temp" side={ESide.Left} />
@ -160,7 +161,9 @@ export default function Settings({
<div className="flex justify-between">
<Label htmlFor="top-p-int" className="text-left text-sm font-medium">
{localize('com_endpoint_top_p')}{' '}
<small className="opacity-40">({localize('com_endpoint_default')}: 1)</small>
<small className="opacity-40">
({localize('com_endpoint_default_with_num', { 0: '1' })})
</small>
</Label>
<InputNumber
id="top-p-int"
@ -189,6 +192,7 @@ export default function Settings({
min={0}
step={0.01}
className="flex h-4 w-full"
aria-labelledby="top-p-int"
/>
</HoverCardTrigger>
<OptionHover endpoint={optionEndpoint ?? ''} type="topp" side={ESide.Left} />
@ -199,7 +203,9 @@ export default function Settings({
<div className="flex justify-between">
<Label htmlFor="freq-penalty-int" className="text-left text-sm font-medium">
{localize('com_endpoint_frequency_penalty')}{' '}
<small className="opacity-40">({localize('com_endpoint_default')}: 0)</small>
<small className="opacity-40">
({localize('com_endpoint_default_with_num', { 0: '0' })})
</small>
</Label>
<InputNumber
id="freq-penalty-int"
@ -228,6 +234,7 @@ export default function Settings({
min={-2}
step={0.01}
className="flex h-4 w-full"
aria-labelledby="freq-penalty-int"
/>
</HoverCardTrigger>
<OptionHover endpoint={optionEndpoint ?? ''} type="freq" side={ESide.Left} />
@ -238,7 +245,9 @@ export default function Settings({
<div className="flex justify-between">
<Label htmlFor="pres-penalty-int" className="text-left text-sm font-medium">
{localize('com_endpoint_presence_penalty')}{' '}
<small className="opacity-40">({localize('com_endpoint_default')}: 0)</small>
<small className="opacity-40">
({localize('com_endpoint_default_with_num', { 0: '0' })})
</small>
</Label>
<InputNumber
id="pres-penalty-int"
@ -267,6 +276,7 @@ export default function Settings({
min={-2}
step={0.01}
className="flex h-4 w-full"
aria-labelledby="pres-penalty-int"
/>
</HoverCardTrigger>
<OptionHover endpoint={optionEndpoint ?? ''} type="pres" side={ESide.Left} />
@ -306,6 +316,7 @@ export default function Settings({
onCheckedChange={(checked: boolean) => setResendFiles(checked)}
disabled={readonly}
className="flex"
aria-label={localize('com_endpoint_plug_resend_files')}
/>
<OptionHover endpoint={optionEndpoint ?? ''} type="resend" side={ESide.Bottom} />
</HoverCardTrigger>
@ -323,6 +334,7 @@ export default function Settings({
max={2}
min={0}
step={1}
aria-label={localize('com_endpoint_plug_image_detail')}
/>
<OptionHover endpoint={optionEndpoint ?? ''} type="detail" side={ESide.Bottom} />
</HoverCardTrigger>

7
client/src/components/Endpoints/Settings/AgentSettings.tsx
View file

@ -53,7 +53,9 @@ export default function Settings({ conversation, setOption, models, readonly }:
<div className="flex justify-between">
<Label htmlFor="temp-int" className="text-left text-sm font-medium">
{localize('com_endpoint_temperature')}{' '}
<small className="opacity-40">({localize('com_endpoint_default')}: 0)</small>
<small className="opacity-40">
({localize('com_endpoint_default_with_num', { 0: '0' })})
</small>
</Label>
<InputNumber
id="temp-int"
@ -82,6 +84,7 @@ export default function Settings({ conversation, setOption, models, readonly }:
min={0}
step={0.01}
className="flex h-4 w-full"
aria-labelledby="temp-int"
/>
</HoverCardTrigger>
<OptionHover endpoint={conversation.endpoint ?? ''} type="temp" side={ESide.Left} />
@ -101,6 +104,7 @@ export default function Settings({ conversation, setOption, models, readonly }:
onCheckedChange={onCheckedChangeAgent}
disabled={readonly}
className="ml-4 mt-2"
aria-label={localize('com_endpoint_plug_use_functions')}
/>
</HoverCardTrigger>
<OptionHover endpoint={conversation.endpoint ?? ''} type="func" side={ESide.Bottom} />
@ -119,6 +123,7 @@ export default function Settings({ conversation, setOption, models, readonly }:
onCheckedChange={onCheckedChangeSkip}
disabled={readonly}
className="ml-4 mt-2"
aria-label={localize('com_endpoint_plug_skip_completion')}
/>
</HoverCardTrigger>
<OptionHover endpoint={conversation.endpoint ?? ''} type="skip" side={ESide.Bottom} />

4
client/src/components/Endpoints/Settings/Google.tsx
View file

@ -171,6 +171,7 @@ export default function Settings({ conversation, setOption, models, readonly }:
min={google.temperature.min}
step={google.temperature.step}
className="flex h-4 w-full"
aria-labelledby="temp-int"
/>
</HoverCardTrigger>
<OptionHover endpoint={conversation.endpoint ?? ''} type="temp" side={ESide.Left} />
@ -211,6 +212,7 @@ export default function Settings({ conversation, setOption, models, readonly }:
min={google.topP.min}
step={google.topP.step}
className="flex h-4 w-full"
aria-labelledby="top-p-int"
/>
</HoverCardTrigger>
<OptionHover endpoint={conversation.endpoint ?? ''} type="topp" side={ESide.Left} />
@ -252,6 +254,7 @@ export default function Settings({ conversation, setOption, models, readonly }:
min={google.topK.min}
step={google.topK.step}
className="flex h-4 w-full"
aria-labelledby="top-k-int"
/>
</HoverCardTrigger>
<OptionHover endpoint={conversation.endpoint ?? ''} type="topk" side={ESide.Left} />
@ -296,6 +299,7 @@ export default function Settings({ conversation, setOption, models, readonly }:
min={google.maxOutputTokens.min}
step={google.maxOutputTokens.step}
className="flex h-4 w-full"
aria-labelledby="max-tokens-int"
/>
</HoverCardTrigger>
<OptionHover

4
client/src/components/Endpoints/Settings/Plugins.tsx
View file

@ -256,6 +256,7 @@ export default function Settings({
min={0}
step={0.01}
className="flex h-4 w-full"
aria-labelledby="temp-int"
/>
</HoverCardTrigger>
<OptionHover endpoint={conversation.endpoint ?? ''} type="temp" side={ESide.Left} />
@ -296,6 +297,7 @@ export default function Settings({
min={0}
step={0.01}
className="flex h-4 w-full"
aria-labelledby="top-p-int"
/>
</HoverCardTrigger>
<OptionHover endpoint={conversation.endpoint ?? ''} type="topp" side={ESide.Left} />
@ -337,6 +339,7 @@ export default function Settings({
min={-2}
step={0.01}
className="flex h-4 w-full"
aria-labelledby="freq-penalty-int"
/>
</HoverCardTrigger>
<OptionHover endpoint={conversation.endpoint ?? ''} type="freq" side={ESide.Left} />
@ -378,6 +381,7 @@ export default function Settings({
min={-2}
step={0.01}
className="flex h-4 w-full"
aria-labelledby="pres-penalty-int"
/>
</HoverCardTrigger>
<OptionHover endpoint={conversation.endpoint ?? ''} type="pres" side={ESide.Left} />

16
client/src/components/Nav/ExportConversation/ExportModal.tsx
View file

@ -124,13 +124,15 @@ export default function ExportModal({
disabled={!exportOptionsSupport}
checked={includeOptions}
onCheckedChange={setIncludeOptions}
aria-labelledby="includeOptions-label"
/>
<label
id="includeOptions-label"
htmlFor="includeOptions"
className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70 dark:text-gray-50"
>
{exportOptionsSupport
? localize('com_nav_enabled')
? localize('com_nav_export_include_endpoint_options')
: localize('com_nav_not_supported')}
</label>
</div>
@ -146,13 +148,15 @@ export default function ExportModal({
disabled={!exportBranchesSupport}
checked={exportBranches}
onCheckedChange={setExportBranches}
aria-labelledby="exportBranches-label"
/>
<label
id="exportBranches-label"
htmlFor="exportBranches"
className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70 dark:text-gray-50"
>
{exportBranchesSupport
? localize('com_nav_enabled')
? localize('com_nav_export_all_message_branches')
: localize('com_nav_not_supported')}
</label>
</div>
@ -163,8 +167,14 @@ export default function ExportModal({
{localize('com_nav_export_recursive_or_sequential')}
</Label>
<div className="flex h-[40px] w-full items-center space-x-3">
<Checkbox id="recursive" checked={recursive} onCheckedChange={setRecursive} />
<Checkbox
id="recursive"
checked={recursive}
onCheckedChange={setRecursive}
aria-labelledby="recursive-label"
/>
<label
id="recursive-label"
htmlFor="recursive"
className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70 dark:text-gray-50"
>

1
client/src/components/Nav/SettingsTabs/Chat/SaveBadgesState.tsx
View file

@ -30,6 +30,7 @@ export default function SaveBadgesState({
onCheckedChange={handleCheckedChange}
className="ml-4"
data-testid="saveBadgesState"
aria-label={localize('com_nav_save_badges_state')}
/>
</div>
);

1
client/src/components/Nav/SettingsTabs/Chat/ShowThinking.tsx
View file

@ -30,6 +30,7 @@ export default function SaveDraft({
onCheckedChange={handleCheckedChange}
className="ml-4"
data-testid="showThinking"
aria-label={localize('com_nav_show_thinking')}
/>
</div>
);

53
client/src/components/Nav/SettingsTabs/Data/SharedLinks.tsx
View file

@ -13,7 +13,6 @@ import {
useMediaQuery,
OGDialogHeader,
OGDialogTitle,
TooltipAnchor,
DataTable,
Spinner,
Button,
@ -246,37 +245,27 @@ export default function SharedLinks() {
},
cell: ({ row }) => (
<div className="flex items-center gap-2">
<TooltipAnchor
description={localize('com_ui_view_source')}
render={
<Button
variant="ghost"
className="h-8 w-8 p-0 hover:bg-surface-hover"
onClick={() => {
window.open(`/c/${row.original.conversationId}`, '_blank');
}}
title={localize('com_ui_view_source')}
>
<MessageSquare className="size-4" />
</Button>
}
/>
<TooltipAnchor
description={localize('com_ui_delete')}
render={
<Button
variant="ghost"
className="h-8 w-8 p-0 hover:bg-surface-hover"
onClick={() => {
setDeleteRow(row.original);
setIsDeleteOpen(true);
}}
title={localize('com_ui_delete')}
>
<TrashIcon className="size-4" />
</Button>
}
/>
<Button
variant="ghost"
className="h-8 w-8 p-0 hover:bg-surface-hover"
onClick={() => {
window.open(`/c/${row.original.conversationId}`, '_blank');
}}
aria-label={`${localize('com_ui_view_source')} - ${row.original.title || localize('com_ui_untitled')}`}
>
<MessageSquare className="size-4" aria-hidden="true" />
</Button>
<Button
variant="ghost"
className="h-8 w-8 p-0 hover:bg-surface-hover"
onClick={() => {
setDeleteRow(row.original);
setIsDeleteOpen(true);
}}
aria-label={`${localize('com_ui_delete')} - ${row.original.title || localize('com_ui_untitled')}`}
>
<TrashIcon className="size-4" aria-hidden="true" />
</Button>
</div>
),
},

8
client/src/components/Prompts/AdminSettings.tsx
View file

@ -53,6 +53,7 @@ const LabelController: React.FC<LabelControllerProps> = ({
}
}}
value={field.value.toString()}
aria-label={label}
/>
)}
/>
@ -216,7 +217,12 @@ const AdminSettings = () => {
))}
</div>
<div className="flex justify-end">
<Button type="submit" disabled={isSubmitting || isLoading} variant="submit">
<Button
type="submit"
disabled={isSubmitting || isLoading}
variant="submit"
aria-label={localize('com_ui_save')}
>
{localize('com_ui_save')}
</Button>
</div>

2
client/src/components/Prompts/Groups/AlwaysMakeProd.tsx
View file

@ -28,7 +28,7 @@ export default function AlwaysMakeProd({
checked={alwaysMakeProd}
onCheckedChange={handleCheckedChange}
data-testid="alwaysMakeProd"
aria-label="Always make prompt production"
aria-label={localize('com_nav_always_make_prod')}
/>
<div>{localize('com_nav_always_make_prod')} </div>
</div>

2
client/src/components/Prompts/Groups/AutoSendPrompt.tsx
View file

@ -30,7 +30,7 @@ export default function AutoSendPrompt({
>
<div> {localize('com_nav_auto_send_prompts')} </div>
<Switch
aria-label="toggle-auto-send-prompts"
aria-label={localize('com_nav_auto_send_prompts')}
id="autoSendPrompts"
checked={autoSendPrompts}
onCheckedChange={handleCheckedChange}

6
client/src/components/Prompts/Groups/ChatGroupItem.tsx
View file

@ -102,6 +102,9 @@ function ChatGroupItem({
e.stopPropagation();
setPreviewDialogOpen(true);
}}
onKeyDown={(e) => {
e.stopPropagation();
}}
className="w-full cursor-pointer rounded-lg text-text-primary hover:bg-surface-hover focus:bg-surface-hover disabled:cursor-not-allowed"
>
<TextSearch className="mr-2 h-4 w-4 text-text-primary" aria-hidden="true" />
@ -116,6 +119,9 @@ function ChatGroupItem({
e.stopPropagation();
onEditClick(e);
}}
onKeyDown={(e) => {
e.stopPropagation();
}}
>
<EditIcon className="mr-2 h-4 w-4 text-text-primary" aria-hidden="true" />
<span>{localize('com_ui_edit')}</span>

1
client/src/components/Prompts/Groups/CreatePromptForm.tsx
View file

@ -151,6 +151,7 @@ const CreatePromptForm = ({
className="w-full rounded border border-border-medium px-2 py-1 focus:outline-none dark:bg-transparent dark:text-gray-200"
minRows={6}
tabIndex={0}
aria-label={localize('com_ui_prompt_input_field')}
/>
<div
className={`mt-1 text-sm text-red-500 ${

1
client/src/components/Prompts/Groups/List.tsx
View file

@ -34,6 +34,7 @@ export default function List({
variant="outline"
className={`w-full bg-transparent ${isChatRoute ? '' : 'mx-2'}`}
onClick={() => navigate('/d/prompts/new')}
aria-label={localize('com_ui_create_prompt')}
>
<Plus className="size-4" aria-hidden />
{localize('com_ui_create_prompt')}

4
client/src/components/Prompts/Groups/ListCard.tsx
View file

@ -1,6 +1,7 @@
import React from 'react';
import { Label } from '@librechat/client';
import CategoryIcon from '~/components/Prompts/Groups/CategoryIcon';
import { useLocalize } from '~/hooks';
export default function ListCard({
category,
@ -15,6 +16,7 @@ export default function ListCard({
onClick?: React.MouseEventHandler<HTMLDivElement | HTMLButtonElement>;
children?: React.ReactNode;
}) {
const localize = useLocalize();
const handleKeyDown = (event: React.KeyboardEvent<HTMLDivElement | HTMLButtonElement>) => {
if (event.key === 'Enter' || event.key === ' ') {
event.preventDefault();
@ -31,7 +33,7 @@ export default function ListCard({
tabIndex={0}
aria-labelledby={`card-title-${name}`}
aria-describedby={`card-snippet-${name}`}
aria-label={`Card for ${name}`}
aria-label={`${name} Prompt, ${category ? `${localize('com_ui_category')}: ${category}` : ''}`}
>
<div className="flex w-full justify-between gap-2">
<div className="flex flex-row gap-2">

1
client/src/components/Prompts/Groups/NoPromptGroup.tsx
View file

@ -17,6 +17,7 @@ export default function NoPromptGroup() {
onClick={() => {
navigate('/d/prompts');
}}
aria-label={localize('com_ui_back_to_prompts')}
>
{localize('com_ui_back_to_prompts')}
</Button>

3
client/src/components/Prompts/Groups/VariableForm.tsx
View file

@ -193,6 +193,7 @@ export default function VariableForm({
)}
placeholder={field.config.variable}
maxRows={8}
aria-label={field.config.variable}
/>
);
}}
@ -201,7 +202,7 @@ export default function VariableForm({
))}
</div>
<div className="flex justify-end">
<Button type="submit" variant="submit">
<Button type="submit" variant="submit" aria-label={localize('com_ui_submit')}>
{localize('com_ui_submit')}
</Button>
</div>

1
client/src/components/Prompts/PromptEditor.tsx
View file

@ -118,6 +118,7 @@ const PromptEditor: React.FC<Props> = ({ name, isEditing, setIsEditing }) => {
setIsEditing(false);
}
}}
aria-label={localize('com_ui_prompt_input')}
/>
) : (
<div

7
client/src/components/Sharing/GenericGrantAccessDialog.tsx
View file

@ -370,7 +370,11 @@ export default function GenericGrantAccessDialog({
<div className="flex gap-2">
<PeoplePickerAdminSettings />
<OGDialogClose asChild>
<Button variant="outline" onClick={handleCancel}>
<Button
variant="outline"
onClick={handleCancel}
aria-label={localize('com_ui_cancel')}
>
{localize('com_ui_cancel')}
</Button>
</OGDialogClose>
@ -382,6 +386,7 @@ export default function GenericGrantAccessDialog({
(hasChanges && !hasAtLeastOneOwner)
}
className="min-w-[120px]"
aria-label={localize('com_ui_save_changes')}
>
{updatePermissionsMutation.isLoading ? (
<div className="flex items-center gap-2">

2
client/src/components/Sharing/PeoplePickerAdminSettings.tsx
View file

@ -60,6 +60,7 @@ const LabelController: React.FC<LabelControllerProps> = ({
checked={field.value}
onCheckedChange={field.onChange}
value={field.value.toString()}
aria-label={label}
/>
)}
/>
@ -158,6 +159,7 @@ const PeoplePickerAdminSettings = () => {
<Button
variant={'outline'}
className="btn btn-neutral border-token-border-light relative gap-1 rounded-lg font-medium"
aria-label={localize('com_ui_admin_settings')}
>
<ShieldEllipsis className="cursor-pointer" aria-hidden="true" />
{localize('com_ui_admin_settings')}

2
client/src/components/SidePanel/Agents/AdminSettings.tsx
View file

@ -56,6 +56,7 @@ const LabelController: React.FC<LabelControllerProps> = ({
checked={field.value}
onCheckedChange={field.onChange}
value={field.value.toString()}
aria-label={label}
/>
)}
/>
@ -152,6 +153,7 @@ const AdminSettings = () => {
size={'sm'}
variant={'outline'}
className="btn btn-neutral border-token-border-light relative h-9 w-full gap-1 rounded-lg font-medium"
aria-label={localize('com_ui_admin_settings')}
>
<ShieldEllipsis className="cursor-pointer" aria-hidden="true" />
{localize('com_ui_admin_settings')}

1
client/src/components/SidePanel/Agents/Advanced/AdvancedButton.tsx
View file

@ -17,6 +17,7 @@ const AdvancedButton: React.FC<AdvancedButtonProps> = ({ setActivePanel }) => {
variant={'outline'}
className="btn btn-neutral border-token-border-light relative h-9 w-full gap-1 rounded-lg font-medium"
onClick={() => setActivePanel(Panel.advanced)}
aria-label={localize('com_ui_advanced')}
>
<Settings2 className="h-4 w-4 cursor-pointer" aria-hidden="true" />
{localize('com_ui_advanced')}

1
client/src/components/SidePanel/Agents/Advanced/AdvancedPanel.tsx
View file

@ -31,6 +31,7 @@ export default function AdvancedPanel() {
onClick={() => {
setActivePanel(Panel.builder);
}}
aria-label={localize('com_ui_back_to_builder')}
>
<div className="advanced-panel-content flex w-full items-center justify-center gap-2">
<ChevronLeft />

3
client/src/components/SidePanel/Agents/Advanced/AgentChain.tsx
View file

@ -146,6 +146,9 @@ const AgentChain: React.FC<AgentChainProps> = ({ field, currentAgentId }) => {
<button
className="rounded-xl p-1 transition hover:bg-surface-hover"
onClick={() => removeAgentAt(idx)}
aria-label={localize('com_ui_remove_agent_from_chain', {
0: getAgentDetails(agentId)?.name || localize('com_ui_agent'),
})}
>
<X size={18} className="text-text-secondary" />
</button>

6
client/src/components/SidePanel/Agents/AgentAvatar.tsx
View file

@ -186,7 +186,11 @@ function Avatar({
<Popover.Root open={menuOpen} onOpenChange={setMenuOpen}>
<div className="flex w-full items-center justify-center gap-4">
<Popover.Trigger asChild>
<button type="button" className="h-20 w-20">
<button
type="button"
className="f h-20 w-20 focus:rounded-full focus:ring-2 focus:ring-ring"
aria-label={localize('com_ui_upload_agent_avatar_label')}
>
{previewUrl ? <AgentAvatarRender url={previewUrl} progress={progress} /> : <NoImage />}
</button>
</Popover.Trigger>

18
client/src/components/SidePanel/Agents/AgentConfig.tsx
View file

@ -420,9 +420,16 @@ export default function AgentConfig({ createMutation }: Pick<AgentPanelProps, 'c
type="text"
placeholder={localize('com_ui_support_contact_name_placeholder')}
aria-label="Support contact name"
aria-invalid={error ? 'true' : 'false'}
aria-describedby={error ? 'support-contact-name-error' : undefined}
/>
{error && (
<span className="text-sm text-red-500 transition duration-300 ease-in-out">
<span
id="support-contact-name-error"
className="text-sm text-red-500 transition duration-300 ease-in-out"
role="alert"
aria-live="polite"
>
{error.message}
</span>
)}
@ -455,9 +462,16 @@ export default function AgentConfig({ createMutation }: Pick<AgentPanelProps, 'c
type="email"
placeholder={localize('com_ui_support_contact_email_placeholder')}
aria-label="Support contact email"
aria-invalid={error ? 'true' : 'false'}
aria-describedby={error ? 'support-contact-email-error' : undefined}
/>
{error && (
<span className="text-sm text-red-500 transition duration-300 ease-in-out">
<span
id="support-contact-email-error"
className="text-sm text-red-500 transition duration-300 ease-in-out"
role="alert"
aria-live="polite"
>
{error.message}
</span>
)}

7
client/src/components/SidePanel/Agents/AgentPanel.tsx
View file

@ -283,6 +283,13 @@ export default function AgentPanel() {
setCurrentAgentId(undefined);
}}
disabled={agentQuery.isInitialLoading}
aria-label={
localize('com_ui_create') +
' ' +
localize('com_ui_new') +
' ' +
localize('com_ui_agent')
}
>
<Plus className="mr-1 h-4 w-4" />
{localize('com_ui_create') +

1
client/src/components/SidePanel/Agents/Artifacts.tsx
View file

@ -117,6 +117,7 @@ function SwitchItem({
className="ml-4"
data-testid={id}
disabled={disabled}
aria-label={label}
/>
</div>
</HoverCard>

7
client/src/components/SidePanel/Agents/Code/Action.tsx
View file

@ -61,6 +61,7 @@ export default function Action({ authType = '', isToolAuthenticated = false }) {
className="relative float-left mr-2 inline-flex h-4 w-4 cursor-pointer"
value={field.value.toString()}
disabled={runCodeIsEnabled ? false : !isToolAuthenticated}
aria-label={localize('com_ui_run_code')}
/>
)}
/>
@ -81,7 +82,11 @@ export default function Action({ authType = '', isToolAuthenticated = false }) {
</button>
<div className="ml-2 flex gap-2">
{isUserProvided && (isToolAuthenticated || runCodeIsEnabled) && (
<button type="button" onClick={() => setIsDialogOpen(true)}>
<button
type="button"
onClick={() => setIsDialogOpen(true)}
aria-label={localize('com_ui_add_api_key')}
>
<KeyRoundIcon className="h-5 w-5 text-text-primary" />
</button>
)}

1
client/src/components/SidePanel/Agents/Code/ApiKeyDialog.tsx
View file

@ -104,6 +104,7 @@ export default function ApiKeyDialog({
<Button
onClick={onRevoke}
className="bg-destructive text-white transition-all duration-200 hover:bg-destructive/80"
aria-label={localize('com_ui_revoke')}
>
{localize('com_ui_revoke')}
</Button>

1
client/src/components/SidePanel/Agents/FileSearchCheckbox.tsx
View file

@ -32,6 +32,7 @@ function FileSearchCheckbox() {
onCheckedChange={field.onChange}
className="relative float-left mr-2 inline-flex h-4 w-4 cursor-pointer"
value={field.value.toString()}
aria-label={localize('com_agents_enable_file_search')}
/>
)}
/>

7
client/src/components/SidePanel/Agents/Images.tsx
View file

@ -104,15 +104,16 @@ export function AvatarMenu({
className="flex min-w-[100px] max-w-xs flex-col rounded-xl border border-gray-400 bg-white shadow-lg dark:border-gray-700 dark:bg-gray-850 dark:text-white"
sideOffset={5}
>
<div
<button
type="button"
role="menuitem"
className="group m-1.5 flex cursor-pointer gap-2 rounded-lg p-2.5 text-sm hover:bg-gray-100 focus:ring-0 radix-disabled:pointer-events-none radix-disabled:opacity-50 dark:hover:bg-gray-800 dark:hover:bg-white/5"
tabIndex={-1}
tabIndex={0}
data-orientation="vertical"
onClick={onItemClick}
>
{localize('com_ui_upload_image')}
</div>
</button>
{/* <Popover.Close
role="menuitem"
className="group m-1.5 flex cursor-pointer gap-2 rounded p-2.5 text-sm hover:bg-black/5 focus:ring-0 radix-disabled:pointer-events-none radix-disabled:opacity-50 dark:hover:bg-white/5"

13
client/src/components/SidePanel/Agents/MCPInput.tsx
View file

@ -210,10 +210,15 @@ export default function MCPInput({ mcp, agent_id, setMCP }: MCPInputProps) {
control={control}
rules={{ required: true }}
render={({ field }) => (
<Checkbox id="trust" checked={field.value} onCheckedChange={field.onChange} />
<Checkbox
id="trust-checkbox"
checked={field.value}
onCheckedChange={field.onChange}
aria-labelledby="trust-label"
/>
)}
/>
<Label htmlFor="trust" className="flex flex-col">
<Label id="trust-label" htmlFor="trust-checkbox" className="flex flex-col">
{localize('com_ui_trust_app')}
<span className="text-xs text-text-secondary">
{localize('com_agents_mcp_trust_subtext')}
@ -269,6 +274,10 @@ export default function MCPInput({ mcp, agent_id, setMCP }: MCPInputProps) {
checked={selectedTools.includes(tool)}
onCheckedChange={() => handleToolToggle(tool)}
className="relative float-left mr-2 inline-flex h-4 w-4 cursor-pointer"
aria-label={tool
.split('_')
.map((word) => word.charAt(0).toUpperCase() + word.slice(1))
.join(' ')}
/>
<span className="text-token-text-primary">
{tool

7
client/src/components/SidePanel/Agents/MCPTool.tsx
View file

@ -162,6 +162,12 @@ export default function MCPTool({ serverInfo }: { serverInfo?: MCPServerInfo })
}
}}
tabIndex={isExpanded ? 0 : -1}
aria-label={
selectedTools.length === serverInfo.tools?.length &&
selectedTools.length > 0
? localize('com_ui_deselect_all')
: localize('com_ui_select_all')
}
/>
</div>
@ -252,6 +258,7 @@ export default function MCPTool({ serverInfo }: { serverInfo?: MCPServerInfo })
className={cn(
'relative float-left mr-2 inline-flex h-4 w-4 cursor-pointer rounded border border-border-medium transition-[border-color] duration-200 hover:border-border-heavy focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 focus:ring-offset-background',
)}
aria-label={subTool.metadata.name}
/>
<span className="text-token-text-primary select-none">
{subTool.metadata.name}

1
client/src/components/SidePanel/Agents/ModelPanel.tsx
View file

@ -102,6 +102,7 @@ export default function ModelPanel({
onClick={() => {
setActivePanel(Panel.builder);
}}
aria-label={localize('com_ui_back_to_builder')}
>
<div className="model-panel-content flex w-full items-center justify-center gap-2">
<ChevronLeft />

1
client/src/components/SidePanel/Agents/Search/Action.tsx
View file

@ -69,6 +69,7 @@ export default function Action({
className="relative float-left mr-2 inline-flex h-4 w-4 cursor-pointer"
value={field.value.toString()}
disabled={webSearchIsEnabled ? false : !isToolAuthenticated}
aria-label={localize('com_ui_web_search')}
/>
)}
/>

6
client/src/components/SidePanel/Agents/Search/ApiKeyDialog.tsx
View file

@ -250,7 +250,11 @@ export default function ApiKeyDialog({
}}
buttons={
isToolAuthenticated && (
<Button onClick={onRevoke} className="bg-red-500 text-white hover:bg-red-600">
<Button
onClick={onRevoke}
className="bg-red-500 text-white hover:bg-red-600"
aria-label={localize('com_ui_revoke')}
>
{localize('com_ui_revoke')}
</Button>
)

1
client/src/components/SidePanel/Agents/Version/VersionButton.tsx
View file

@ -16,6 +16,7 @@ const VersionButton = ({ setActivePanel }: VersionButtonProps) => {
variant={'outline'}
className="btn btn-neutral border-token-border-light relative h-9 w-full gap-1 rounded-lg font-medium"
onClick={() => setActivePanel(Panel.version)}
aria-label={localize('com_ui_agent_version')}
>
<History className="h-4 w-4 cursor-pointer" aria-hidden="true" />
{localize('com_ui_agent_version')}

1
client/src/components/SidePanel/Bookmarks/BookmarkTable.tsx
View file

@ -112,6 +112,7 @@ const BookmarkTable = () => {
variant="outline"
size="sm"
className="w-full gap-2 text-sm"
aria-label={localize('com_ui_bookmarks_new')}
onClick={() => setOpen(!open)}
>
<BookmarkPlusIcon className="size-4" />

6
client/src/components/SidePanel/Builder/AssistantAvatar.tsx
View file

@ -213,7 +213,11 @@ function Avatar({
<Popover.Root open={menuOpen} onOpenChange={setMenuOpen}>
<div className="flex w-full items-center justify-center gap-4">
<Popover.Trigger asChild>
<button type="button" className="h-20 w-20">
<button
type="button"
className="h-20 w-20"
aria-label={localize('com_ui_upload_avatar_label')}
>
{previewUrl ? <AssistantAvatar url={previewUrl} progress={progress} /> : <NoImage />}
</button>
</Popover.Trigger>

2
client/src/components/SidePanel/Builder/Code.tsx
View file

@ -31,6 +31,7 @@ export default function Code({ version }: { version: number | string }) {
onCheckedChange={field.onChange}
className="relative float-left mr-2 inline-flex h-4 w-4 cursor-pointer"
value={field.value.toString()}
aria-labelledby={Capabilities.code_interpreter}
/>
)}
/>
@ -44,6 +45,7 @@ export default function Code({ version }: { version: number | string }) {
}
>
<label
id={Capabilities.code_interpreter}
className="form-check-label text-token-text-primary w-full cursor-pointer"
htmlFor={Capabilities.code_interpreter}
>

2
client/src/components/SidePanel/Builder/ImageVision.tsx
View file

@ -21,10 +21,12 @@ export default function ImageVision() {
onCheckedChange={field.onChange}
className="relative float-left mr-2 inline-flex h-4 w-4 cursor-pointer"
value={field.value.toString()}
aria-labelledby={Capabilities.image_vision}
/>
)}
/>
<label
id={Capabilities.image_vision}
className="form-check-label text-token-text-primary w-full cursor-pointer"
htmlFor={Capabilities.image_vision}
onClick={() =>

2
client/src/components/SidePanel/Builder/Retrieval.tsx
View file

@ -60,11 +60,13 @@ export default function Retrieval({
onCheckedChange={field.onChange}
className="relative float-left mr-2 inline-flex h-4 w-4 cursor-pointer"
value={field.value.toString()}
aria-labelledby={Capabilities.retrieval}
/>
)}
/>
<div className="flex items-center space-x-2">
<label
id={Capabilities.retrieval}
className={cn(
'form-check-label text-token-text-primary w-full select-none',
isDisabled ? 'cursor-no-drop opacity-50' : 'cursor-pointer',

2
client/src/components/SidePanel/Files/PanelColumns.tsx
View file

@ -17,6 +17,7 @@ export const columns: ColumnDef<TFile | undefined>[] = [
variant="ghost"
className="hover:bg-surface-hover"
onClick={() => column.toggleSorting(column.getIsSorted() === 'asc')}
aria-label={localize('com_ui_name')}
>
{localize('com_ui_name')}
<ArrowUpDown className="ml-2 h-4 w-4" />
@ -40,6 +41,7 @@ export const columns: ColumnDef<TFile | undefined>[] = [
variant="ghost"
className="hover:bg-surface-hover"
onClick={() => column.toggleSorting(column.getIsSorted() === 'asc')}
aria-label={localize('com_ui_date')}
>
{localize('com_ui_date')}
<ArrowUpDown className="ml-2 h-4 w-4" />

9
client/src/components/SidePanel/MCP/MCPPanel.tsx
View file

@ -127,7 +127,12 @@ function MCPPanelContent() {
return (
<div className="h-auto max-w-full space-y-4 overflow-x-hidden py-2">
<Button variant="outline" onClick={handleGoBackToList} size="sm">
<Button
variant="outline"
onClick={handleGoBackToList}
size="sm"
aria-label={localize('com_ui_back')}
>
<ChevronLeft className="mr-1 h-4 w-4" />
{localize('com_ui_back')}
</Button>
@ -166,6 +171,7 @@ function MCPPanelContent() {
size="sm"
variant="destructive"
onClick={() => handleConfigRevoke(selectedServerNameForEditing)}
aria-label={localize('com_ui_oauth_revoke')}
>
<Trash2 className="h-4 w-4" />
{localize('com_ui_oauth_revoke')}
@ -188,6 +194,7 @@ function MCPPanelContent() {
variant="outline"
className="flex-1 justify-start dark:hover:bg-gray-700"
onClick={() => handleServerClickToEdit(server.serverName)}
aria-label={localize('com_ui_edit') + ' ' + server.serverName}
>
<div className="flex items-center gap-2">
<span>{server.serverName}</span>

2
client/src/components/SidePanel/Memories/AdminSettings.tsx
View file

@ -39,6 +39,7 @@ const LabelController: React.FC<LabelControllerProps> = ({ control, memoryPerm,
checked={field.value}
onCheckedChange={field.onChange}
value={field.value.toString()}
aria-label={label}
/>
)}
/>
@ -141,6 +142,7 @@ const AdminSettings = () => {
size={'sm'}
variant={'outline'}
className="btn btn-neutral border-token-border-light relative h-9 w-full gap-1 rounded-lg font-medium"
aria-label={localize('com_ui_admin_settings')}
>
<ShieldEllipsis className="cursor-pointer" aria-hidden="true" />
{localize('com_ui_admin_settings')}

1
client/src/components/SidePanel/Memories/MemoryCreateDialog.tsx
View file

@ -147,6 +147,7 @@ export default function MemoryCreateDialog({
onClick={handleSave}
disabled={isLoading || !key.trim() || !value.trim()}
className="text-white"
aria-label={localize('com_ui_create_memory')}
>
{isLoading ? <Spinner className="size-4" /> : localize('com_ui_create')}
</Button>

1
client/src/components/SidePanel/Memories/MemoryEditDialog.tsx
View file

@ -192,6 +192,7 @@ export default function MemoryEditDialog({
type="button"
variant="submit"
onClick={handleSave}
aria-label={localize('com_ui_save')}
disabled={isLoading || !key.trim() || !value.trim()}
className="text-white"
>

6
client/src/components/SidePanel/Memories/MemoryViewer.tsx
View file

@ -305,7 +305,11 @@ export default function MemoryViewer() {
<div className="flex w-full justify-end">
<MemoryCreateDialog open={createDialogOpen} onOpenChange={setCreateDialogOpen}>
<OGDialogTrigger asChild>
<Button variant="outline" className="w-full bg-transparent">
<Button
variant="outline"
className="w-full bg-transparent"
aria-label={localize('com_ui_create_memory')}
>
<Plus className="size-4" aria-hidden />
{localize('com_ui_create_memory')}
</Button>

1
client/src/components/SidePanel/Parameters/DynamicCheckbox.tsx
View file

@ -76,6 +76,7 @@ function DynamicCheckbox({
checked={selectedValue}
onCheckedChange={handleCheckedChange}
className="mt-[2px] focus:ring-opacity-20 dark:border-gray-500 dark:bg-gray-700 dark:text-gray-50 dark:focus:ring-gray-600 dark:focus:ring-opacity-50 dark:focus:ring-offset-0"
aria-label={localize(label as TranslationKeys)}
/>
</div>
</HoverCardTrigger>

3
client/src/components/SidePanel/Parameters/DynamicSlider.tsx
View file

@ -179,6 +179,7 @@ function DynamicSlider({
min={range ? range.min : 0}
step={range ? (range.step ?? 1) : 1}
controls={false}
aria-label={localize(label as TranslationKeys)}
className={cn(
defaultTextProps,
cn(
@ -192,6 +193,7 @@ function DynamicSlider({
id={`${settingKey}-dynamic-setting-input`}
disabled={readonly}
value={getDisplayValue(selectedValue)}
aria-label={localize(label as TranslationKeys)}
onChange={() => ({})}
className={cn(
defaultTextProps,
@ -214,6 +216,7 @@ function DynamicSlider({
onValueChange={(value) => handleValueChange(value[0])}
onDoubleClick={() => setInputValue(defaultValue as string | number)}
max={max}
aria-label={localize(label as TranslationKeys)}
min={range ? range.min : 0}
step={range ? (range.step ?? 1) : 1}
className="flex h-4 w-full"

3
client/src/components/SidePanel/Parameters/DynamicSwitch.tsx
View file

@ -67,6 +67,9 @@ function DynamicSwitch({
onCheckedChange={handleCheckedChange}
disabled={readonly}
className="flex"
aria-label={
labelCode ? (localize(label as TranslationKeys) ?? label) : label || settingKey
}
/>
</HoverCardTrigger>
{description && (

1
client/src/components/SidePanel/Parameters/DynamicTextarea.tsx
View file

@ -75,6 +75,7 @@ function DynamicTextarea({
disabled={readonly}
value={inputValue ?? ''}
onChange={setInputValue}
aria-label={localize(label as TranslationKeys)}
placeholder={
placeholderCode
? (localize(placeholder as TranslationKeys) ?? placeholder)

14
client/src/locales/en/translation.json
View file

@ -386,6 +386,7 @@
"com_files_download_progress": "{{0}} of {{1}} files",
"com_files_downloading": "Downloading Files",
"com_files_filter": "Filter files...",
"com_files_filter_by": "Filter files by...",
"com_files_no_results": "No results.",
"com_files_number_selected": "{{0}} of {{1}} items(s) selected",
"com_files_preparing_download": "Preparing download...",
@ -458,7 +459,6 @@
"com_nav_delete_warning": "WARNING: This will permanently delete your account.",
"com_nav_enable_cache_tts": "Enable cache TTS",
"com_nav_enable_cloud_browser_voice": "Use cloud-based voices",
"com_nav_enabled": "Enabled",
"com_nav_engine": "Engine",
"com_nav_enter_to_send": "Press Enter to send messages",
"com_nav_export": "Export",
@ -632,6 +632,7 @@
"com_ui_action_button": "Action Button",
"com_ui_active": "Active",
"com_ui_add": "Add",
"com_ui_add_api_key": "Add API Key",
"com_ui_add_mcp": "Add MCP",
"com_ui_add_mcp_server": "Add MCP Server",
"com_ui_add_model_preset": "Add a model or preset for an additional response",
@ -786,6 +787,7 @@
"com_ui_copy_link": "Copy link",
"com_ui_copy_to_clipboard": "Copy to clipboard",
"com_ui_copy_url_to_clipboard": "Copy URL to clipboard",
"com_ui_copy_stack_trace": "Copy stack trace",
"com_ui_create": "Create",
"com_ui_create_link": "Create link",
"com_ui_create_memory": "Create Memory",
@ -849,6 +851,7 @@
"com_ui_download_backup": "Download Backup Codes",
"com_ui_download_backup_tooltip": "Before you continue, download your backup codes. You will need them to regain access if you lose your authenticator device",
"com_ui_download_error": "Error downloading file. The file may have been deleted.",
"com_ui_download_error_logs": "Download error logs",
"com_ui_drag_drop": "Drop any file here to add it to the conversation",
"com_ui_dropdown_variables": "Dropdown variables:",
"com_ui_dropdown_variables_info": "Create custom dropdown menus for your prompts: `{{variable_name:option1|option2|option3}}`",
@ -856,6 +859,7 @@
"com_ui_duplication_error": "There was an error duplicating the conversation",
"com_ui_duplication_processing": "Duplicating conversation...",
"com_ui_duplication_success": "Successfully duplicated conversation",
"com_ui_editable_message": "Editable Message",
"com_ui_edit": "Edit",
"com_ui_edit_editing_image": "Editing image",
"com_ui_edit_mcp_server": "Edit MCP Server",
@ -1015,6 +1019,7 @@
"com_ui_memory_updated_items": "Updated Memories",
"com_ui_memory_would_exceed": "Cannot save - would exceed limit by {{tokens}} tokens. Delete existing memories to make space.",
"com_ui_mention": "Mention an endpoint, assistant, or preset to quickly switch to it",
"com_ui_message_input": "Message input",
"com_ui_min_tags": "Cannot remove more values, a minimum of {{0}} are required.",
"com_ui_minimal": "Minimal",
"com_ui_misc": "Misc.",
@ -1075,10 +1080,12 @@
"com_ui_privacy_policy_url": "Privacy Policy URL",
"com_ui_prompt": "Prompt",
"com_ui_prompt_groups": "Prompt Groups List",
"com_ui_prompt_input": "Prompt input",
"com_ui_prompt_name": "Prompt Name",
"com_ui_prompt_name_required": "Prompt Name is required",
"com_ui_prompt_preview_not_shared": "The author has not allowed collaboration for this prompt.",
"com_ui_prompt_text": "Text",
"com_ui_prompt_input_field": "Prompt text input field",
"com_ui_prompt_text_required": "Text is required",
"com_ui_prompt_update_error": "There was an error updating the prompt",
"com_ui_prompts": "Prompts",
@ -1093,6 +1100,7 @@
"com_ui_reference_saved_memories_description": "Allow the assistant to reference and use your saved memories when responding",
"com_ui_refresh": "Refresh",
"com_ui_refresh_link": "Refresh link",
"com_ui_refresh_page": "Refresh page",
"com_ui_regenerate": "Regenerate",
"com_ui_regenerate_backup": "Regenerate Backup Codes",
"com_ui_regenerating": "Regenerating...",
@ -1234,6 +1242,7 @@
"com_ui_update_mcp_success": "Successfully created or updated MCP",
"com_ui_upload": "Upload",
"com_ui_upload_agent_avatar": "Successfully updated agent avatar",
"com_ui_upload_agent_avatar_label": "Upload agent avatar image",
"com_ui_upload_avatar_label": "Upload avatar image",
"com_ui_upload_code_files": "Upload for Code Interpreter",
"com_ui_upload_delay": "Uploading \"{{0}}\" is taking more time than anticipated. Please wait while the file finishes indexing for retrieval.",
@ -1299,5 +1308,8 @@
"com_ui_zoom_in": "Zoom in",
"com_ui_zoom_level": "Zoom level",
"com_ui_zoom_out": "Zoom out",
"com_ui_share_qr_code_description": "QR code for sharing this conversation link",
"com_ui_back_to_builder": "Back to builder",
"com_ui_remove_agent_from_chain": "Remove {{0}} from chain",
"com_user_message": "You"
}

15
client/src/routes/RouteErrorBoundary.tsx
View file

@ -1,6 +1,7 @@
/* eslint-disable i18next/no-literal-string */
import { Button } from '@librechat/client';
import { useRouteError } from 'react-router-dom';
import { useLocalize } from '~/hooks';
import logger from '~/utils/logger';
interface UserAgentData {
@ -71,6 +72,7 @@ const getBrowserInfo = async () => {
};
export default function RouteErrorBoundary() {
const localize = useLocalize();
const typedError = useRouteError() as {
message?: string;
stack?: string;
@ -164,6 +166,7 @@ export default function RouteErrorBoundary() {
size="sm"
onClick={handleCopyStack}
className="ml-2 px-2 py-1 text-xs"
aria-label={localize('com_ui_copy_stack_trace')}
>
Copy
</Button>
@ -210,11 +213,17 @@ export default function RouteErrorBoundary() {
variant="submit"
onClick={() => window.location.reload()}
className="w-full sm:w-auto"
aria-label={localize('com_ui_refresh_page')}
>
Refresh Page
{localize('com_ui_refresh_page')}
</Button>
<Button variant="outline" onClick={handleDownloadLogs} className="w-full sm:w-auto">
Download Error Logs
<Button
variant="outline"
onClick={handleDownloadLogs}
className="w-full sm:w-auto"
aria-label={localize('com_ui_download_error_logs')}
>
{localize('com_ui_download_error_logs')}
</Button>
</div>
</div>

2
packages/client/src/components/AnimatedSearchInput.tsx
View file

@ -36,7 +36,7 @@ const AnimatedSearchInput = ({
value={value}
onChange={onChange}
placeholder={placeholder}
className={`peer relative z-20 w-full rounded-lg bg-surface-secondary px-10 py-2 outline-none ring-0 backdrop-blur-sm transition-all duration-500 ease-in-out placeholder:text-gray-400 focus:outline-none focus:ring-0`}
className={`peer relative z-20 w-full rounded-lg bg-surface-secondary px-10 py-2 outline-none backdrop-blur-sm transition-all duration-500 ease-in-out placeholder:text-gray-400 focus:ring-ring`}
/>
{/* Gradient overlay */}

50
packages/client/src/components/Checkbox.tsx
View file

@ -3,23 +3,39 @@ import { Check } from 'lucide-react';
import * as CheckboxPrimitive from '@radix-ui/react-checkbox';
import { cn } from '~/utils';
const Checkbox = React.forwardRef<
React.ElementRef<typeof CheckboxPrimitive.Root>,
React.ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root>
>(({ className = '', ...props }, ref) => (
<CheckboxPrimitive.Root
ref={ref}
className={cn(
'peer h-4 w-4 shrink-0 rounded-sm border border-primary ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground',
className,
)}
{...props}
>
<CheckboxPrimitive.Indicator className={cn('flex items-center justify-center')}>
<Check className="h-4 w-4" />
</CheckboxPrimitive.Indicator>
</CheckboxPrimitive.Root>
));
type BaseCheckboxProps = Omit<
React.ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root>,
'aria-label' | 'aria-labelledby'
> & {
asChild?: boolean;
};
export type CheckboxProps =
| (BaseCheckboxProps & {
'aria-label': string;
'aria-labelledby'?: never;
})
| (BaseCheckboxProps & {
'aria-labelledby': string;
'aria-label'?: never;
});
const Checkbox = React.forwardRef<React.ElementRef<typeof CheckboxPrimitive.Root>, CheckboxProps>(
({ className = '', ...props }, ref) => (
<CheckboxPrimitive.Root
ref={ref}
className={cn(
'peer h-4 w-4 shrink-0 rounded-sm border border-primary ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground',
className,
)}
{...props}
>
<CheckboxPrimitive.Indicator className={cn('flex items-center justify-center')}>
<Check className="h-4 w-4" />
</CheckboxPrimitive.Indicator>
</CheckboxPrimitive.Root>
),
);
Checkbox.displayName = CheckboxPrimitive.Root.displayName;
export { Checkbox };

26
packages/client/src/components/DataTable.tsx
View file

@ -15,8 +15,8 @@ import {
import type { Table as TTable } from '@tanstack/react-table';
import { Table, TableRow, TableBody, TableCell, TableHead, TableHeader } from './Table';
import AnimatedSearchInput from './AnimatedSearchInput';
import { useMediaQuery, useLocalize } from '~/hooks';
import { TrashIcon, Spinner } from '~/svgs';
import { useMediaQuery } from '~/hooks';
import { Skeleton } from './Skeleton';
import { Checkbox } from './Checkbox';
import { Button } from './Button';
@ -118,6 +118,24 @@ const TableRowComponent = <TData, TValue>({
);
}
if (cell.column.id === 'title') {
return (
<TableHead
key={cell.id}
className="w-0 max-w-0 px-2 py-1 align-middle text-xs transition-all duration-300 sm:px-4 sm:py-2 sm:text-sm"
style={getColumnStyle(
cell.column.columnDef as TableColumn<TData, TValue>,
isSmallScreen,
)}
scope="row"
>
<div className="overflow-hidden text-ellipsis">
{flexRender(cell.column.columnDef.cell, cell.getContext())}
</div>
</TableHead>
);
}
return (
<TableCell
key={cell.id}
@ -156,11 +174,13 @@ const DeleteButton = memo(
isDeleting,
disabled,
isSmallScreen,
ariaLabel,
}: {
onDelete?: () => Promise<void>;
isDeleting: boolean;
disabled: boolean;
isSmallScreen: boolean;
ariaLabel: string;
}) => {
if (!onDelete) {
return null;
@ -171,6 +191,7 @@ const DeleteButton = memo(
onClick={onDelete}
disabled={disabled}
className={cn('min-w-[40px] transition-all duration-200', isSmallScreen && 'px-2 py-1')}
aria-label={ariaLabel}
>
{isDeleting ? (
<Spinner className="size-4" />
@ -202,6 +223,7 @@ export default function DataTable<TData, TValue>({
isLoading,
enableSearch = true,
}: DataTableProps<TData, TValue>) {
const localize = useLocalize();
const isSmallScreen = useMediaQuery('(max-width: 768px)');
const tableContainerRef = useRef<HTMLDivElement>(null);
@ -359,6 +381,7 @@ export default function DataTable<TData, TValue>({
isDeleting={isDeleting}
disabled={!table.getFilteredSelectedRowModel().rows.length || isDeleting}
isSmallScreen={isSmallScreen}
ariaLabel={localize('com_ui_delete_selected_items')}
/>
)}
{filterColumn !== undefined && table.getColumn(filterColumn) && enableSearch && (
@ -400,6 +423,7 @@ export default function DataTable<TData, TValue>({
? header.column.getToggleSortingHandler()
: undefined
}
scope="col"
>
{header.isPlaceholder
? null

29
packages/client/src/components/DataTableColumnHeader.tsx
View file

@ -7,6 +7,7 @@ import {
DropdownMenuSeparator,
DropdownMenuTrigger,
} from './DropdownMenu';
import { useLocalize } from '~/hooks';
import { Button } from './Button';
import { cn } from '~/utils';
@ -20,6 +21,19 @@ export function DataTableColumnHeader<TData, TValue>({
title,
className = '',
}: DataTableColumnHeaderProps<TData, TValue>) {
const localize = useLocalize();
const getSortIcon = () => {
const sortDirection = column.getIsSorted();
if (sortDirection === 'desc') {
return <ArrowDownIcon className="ml-2 h-4 w-4" />;
}
if (sortDirection === 'asc') {
return <ArrowUpIcon className="ml-2 h-4 w-4" />;
}
return <CaretSortIcon className="ml-2 h-4 w-4" />;
};
if (!column.getCanSort()) {
return <div className={cn(className)}>{title}</div>;
}
@ -28,15 +42,14 @@ export function DataTableColumnHeader<TData, TValue>({
<div className={cn('flex items-center space-x-2', className)}>
<DropdownMenu>
<DropdownMenuTrigger asChild>
<Button variant="ghost" size="sm" className="-ml-3 h-8 data-[state=open]:bg-accent">
<Button
variant="ghost"
size="sm"
className="-ml-3 h-8 data-[state=open]:bg-accent"
aria-label={localize('com_ui_filter_by', { title })}
>
<span>{title}</span>
{column.getIsSorted() === 'desc' ? (
<ArrowDownIcon className="ml-2 h-4 w-4" />
) : column.getIsSorted() === 'asc' ? (
<ArrowUpIcon className="ml-2 h-4 w-4" />
) : (
<CaretSortIcon className="ml-2 h-4 w-4" />
)}
{getSortIcon()}
</Button>
</DropdownMenuTrigger>
<DropdownMenuContent align="start" className="z-[1001]">

4
packages/client/src/components/OGDialogTemplate.tsx
View file

@ -85,7 +85,9 @@ const OGDialogTemplate = forwardRef((props: DialogTemplateProps, ref: Ref<HTMLDi
<div className="flex h-auto gap-3 max-sm:w-full max-sm:flex-col sm:flex-row">
{showCancelButton && (
<OGDialogClose asChild>
<Button variant="outline">{localize('com_ui_cancel')}</Button>
<Button variant="outline" aria-label={localize('com_ui_cancel')}>
{localize('com_ui_cancel')}
</Button>
</OGDialogClose>
)}
{buttons != null ? buttons : null}

48
packages/client/src/components/Switch.tsx
View file

@ -2,25 +2,39 @@ import * as React from 'react';
import * as SwitchPrimitives from '@radix-ui/react-switch';
import { cn } from '~/utils';
const Switch = React.forwardRef<
React.ElementRef<typeof SwitchPrimitives.Root>,
React.ComponentPropsWithoutRef<typeof SwitchPrimitives.Root>
>(({ className, ...props }, ref) => (
<SwitchPrimitives.Root
className={cn(
'peer inline-flex h-6 w-11 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=unchecked]:bg-switch-unchecked',
className,
)}
{...props}
ref={ref}
>
<SwitchPrimitives.Thumb
type BaseSwitchProps = Omit<
React.ComponentPropsWithoutRef<typeof SwitchPrimitives.Root>,
'aria-label' | 'aria-labelledby'
>;
type SwitchProps =
| (BaseSwitchProps & {
'aria-label': string;
'aria-labelledby'?: never;
})
| (BaseSwitchProps & {
'aria-labelledby': string;
'aria-label'?: never;
});
const Switch = React.forwardRef<React.ElementRef<typeof SwitchPrimitives.Root>, SwitchProps>(
({ className, ...props }, ref) => (
<SwitchPrimitives.Root
className={cn(
'pointer-events-none block h-5 w-5 rounded-full bg-background shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-5 data-[state=unchecked]:translate-x-0',
'peer inline-flex h-6 w-11 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=unchecked]:bg-switch-unchecked',
className,
)}
/>
</SwitchPrimitives.Root>
));
{...props}
ref={ref}
>
<SwitchPrimitives.Thumb
className={cn(
'pointer-events-none block h-5 w-5 rounded-full bg-background shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-5 data-[state=unchecked]:translate-x-0',
)}
/>
</SwitchPrimitives.Root>
),
);
Switch.displayName = SwitchPrimitives.Root.displayName;
export { Switch };

14
packages/client/src/components/TextareaAutosize.tsx
View file

@ -4,7 +4,19 @@ import ReactTextareaAutosize from 'react-textarea-autosize';
import type { TextareaAutosizeProps } from 'react-textarea-autosize';
import { chatDirectionAtom } from '~/store';
export const TextareaAutosize = forwardRef<HTMLTextAreaElement, TextareaAutosizeProps>(
type BaseTextareaAutosizeProps = Omit<TextareaAutosizeProps, 'aria-label' | 'aria-labelledby'>;
export type TextareaAutosizePropsWithAria =
| (BaseTextareaAutosizeProps & {
'aria-label': string;
'aria-labelledby'?: never;
})
| (BaseTextareaAutosizeProps & {
'aria-labelledby': string;
'aria-label'?: never;
});
export const TextareaAutosize = forwardRef<HTMLTextAreaElement, TextareaAutosizePropsWithAria>(
(props, ref) => {
const [, setIsRerendered] = useState(false);
const chatDirection = useAtomValue(chatDirectionAtom).toLowerCase();

5
packages/client/src/locales/en/translation.json
View file

@ -1,4 +1,7 @@
{
"com_ui_cancel": "Cancel",
"com_ui_no_options": "No options available"
"com_ui_no_options": "No options available",
"com_ui_delete_selected_items": "Delete selected items",
"com_ui_filter_by": "Filter by {{title}}",
"com_ui_cancel_dialog": "Cancel dialog"
}