♿ fix: Address Accessibility Issues (#10260)

* 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>

client/src/components/Agents/MarketplaceAdminSettings.tsx

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

client/src/components/Bookmarks/BookmarkForm.tsx

@@ -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')}
                 />
               )}
             />

client/src/components/Chat/Input/ChatForm.tsx

@@ -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(

client/src/components/Chat/Input/Files/FileUpload.tsx

@@ -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}`}
+      <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 dark:bg-transparent dark:text-gray-300 dark:hover:bg-gray-700 dark:hover:text-green-500',
+          '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" />
+        <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>
+    </>
   );
 };
 

client/src/components/Chat/Input/Files/Table/DataTable.tsx

@@ -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>

client/src/components/Chat/Menus/Presets/PresetItems.tsx

@@ -59,9 +59,10 @@ const PresetItems: FC<{
           </label>
           <Dialog>
             <DialogTrigger asChild>
-              <label
+              <button
-                htmlFor="file-upload"
+                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 dark:bg-transparent dark:text-gray-300 dark:hover:bg-gray-700 dark:hover:text-red-700"
+                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}

client/src/components/Chat/Messages/Content/EditMessage.tsx

@@ -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>

client/src/components/Chat/Messages/Content/Parts/EditTextPart.tsx

@@ -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>

client/src/components/Conversations/Conversations.tsx

@@ -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}

client/src/components/Conversations/ConvoOptions/ShareButton.tsx

@@ -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;

client/src/components/Conversations/RenameForm.tsx

@@ -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>

client/src/components/Endpoints/Settings/Advanced.tsx

@@ -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>

client/src/components/Endpoints/Settings/AgentSettings.tsx

@@ -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} />

client/src/components/Endpoints/Settings/Google.tsx

@@ -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

client/src/components/Endpoints/Settings/Plugins.tsx

@@ -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} />

client/src/components/Nav/ExportConversation/ExportModal.tsx

@@ -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"
                     >

client/src/components/Nav/SettingsTabs/Chat/SaveBadgesState.tsx

@@ -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>
   );

client/src/components/Nav/SettingsTabs/Chat/ShowThinking.tsx

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

client/src/components/Nav/SettingsTabs/Data/SharedLinks.tsx

@@ -13,7 +13,6 @@ import {
   useMediaQuery,
   OGDialogHeader,
   OGDialogTitle,
-  TooltipAnchor,
   DataTable,
   Spinner,
   Button,
@@ -246,24 +245,16 @@ 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')}
+              aria-label={`${localize('com_ui_view_source')} - ${row.original.title || localize('com_ui_untitled')}`}
             >
-                  <MessageSquare className="size-4" />
+              <MessageSquare className="size-4" aria-hidden="true" />
             </Button>
-              }
-            />
-            <TooltipAnchor
-              description={localize('com_ui_delete')}
-              render={
             <Button
               variant="ghost"
               className="h-8 w-8 p-0 hover:bg-surface-hover"
@@ -271,12 +262,10 @@ export default function SharedLinks() {
                 setDeleteRow(row.original);
                 setIsDeleteOpen(true);
               }}
-                  title={localize('com_ui_delete')}
+              aria-label={`${localize('com_ui_delete')} - ${row.original.title || localize('com_ui_untitled')}`}
             >
-                  <TrashIcon className="size-4" />
+              <TrashIcon className="size-4" aria-hidden="true" />
             </Button>
-              }
-            />
           </div>
         ),
       },

client/src/components/Prompts/AdminSettings.tsx

@@ -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>

client/src/components/Prompts/Groups/AlwaysMakeProd.tsx

@@ -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>

client/src/components/Prompts/Groups/AutoSendPrompt.tsx

@@ -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}

client/src/components/Prompts/Groups/ChatGroupItem.tsx

@@ -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>

client/src/components/Prompts/Groups/CreatePromptForm.tsx

@@ -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 ${

client/src/components/Prompts/Groups/List.tsx

@@ -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')}

client/src/components/Prompts/Groups/ListCard.tsx

@@ -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">

client/src/components/Prompts/Groups/NoPromptGroup.tsx

@@ -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>

client/src/components/Prompts/Groups/VariableForm.tsx

@@ -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>

client/src/components/Prompts/PromptEditor.tsx

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

client/src/components/Sharing/GenericGrantAccessDialog.tsx

@@ -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">

client/src/components/Sharing/PeoplePickerAdminSettings.tsx

@@ -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')}

client/src/components/SidePanel/Agents/AdminSettings.tsx

@@ -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')}

client/src/components/SidePanel/Agents/Advanced/AdvancedButton.tsx

@@ -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')}

client/src/components/SidePanel/Agents/Advanced/AdvancedPanel.tsx

@@ -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 />

client/src/components/SidePanel/Agents/Advanced/AgentChain.tsx

@@ -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>

client/src/components/SidePanel/Agents/AgentAvatar.tsx

@@ -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>

client/src/components/SidePanel/Agents/AgentConfig.tsx

@@ -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>
                     )}

client/src/components/SidePanel/Agents/AgentPanel.tsx

@@ -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') +

client/src/components/SidePanel/Agents/Artifacts.tsx

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

client/src/components/SidePanel/Agents/Code/Action.tsx

@@ -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>
             )}

client/src/components/SidePanel/Agents/Code/ApiKeyDialog.tsx

@@ -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>

client/src/components/SidePanel/Agents/FileSearchCheckbox.tsx

@@ -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')}
               />
             )}
           />

client/src/components/SidePanel/Agents/Images.tsx

@@ -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"

client/src/components/SidePanel/Agents/MCPInput.tsx

@@ -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

client/src/components/SidePanel/Agents/MCPTool.tsx

@@ -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}

client/src/components/SidePanel/Agents/ModelPanel.tsx

@@ -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 />

client/src/components/SidePanel/Agents/Search/Action.tsx

@@ -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')}
               />
             )}
           />

client/src/components/SidePanel/Agents/Search/ApiKeyDialog.tsx

@@ -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>
           )

client/src/components/SidePanel/Agents/Version/VersionButton.tsx

@@ -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')}

client/src/components/SidePanel/Bookmarks/BookmarkTable.tsx

@@ -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" />

client/src/components/SidePanel/Builder/AssistantAvatar.tsx

@@ -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>

client/src/components/SidePanel/Builder/Code.tsx

@@ -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}
             >

client/src/components/SidePanel/Builder/ImageVision.tsx

@@ -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={() =>

client/src/components/SidePanel/Builder/Retrieval.tsx

@@ -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',

client/src/components/SidePanel/Files/PanelColumns.tsx

@@ -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" />

client/src/components/SidePanel/MCP/MCPPanel.tsx

@@ -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>

client/src/components/SidePanel/Memories/AdminSettings.tsx

@@ -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')}

client/src/components/SidePanel/Memories/MemoryCreateDialog.tsx

@@ -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>

client/src/components/SidePanel/Memories/MemoryEditDialog.tsx

@@ -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"
             >

client/src/components/SidePanel/Memories/MemoryViewer.tsx

@@ -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>

client/src/components/SidePanel/Parameters/DynamicCheckbox.tsx

@@ -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>

client/src/components/SidePanel/Parameters/DynamicSlider.tsx

@@ -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"

client/src/components/SidePanel/Parameters/DynamicSwitch.tsx

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

client/src/components/SidePanel/Parameters/DynamicTextarea.tsx

@@ -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)

client/src/locales/en/translation.json

@@ -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"
 }

client/src/routes/RouteErrorBoundary.tsx

@@ -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">
+            <Button
-              Download Error Logs
+              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>

packages/client/src/components/AnimatedSearchInput.tsx

@@ -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 */}

packages/client/src/components/Checkbox.tsx

@@ -3,10 +3,25 @@ import { Check } from 'lucide-react';
 import * as CheckboxPrimitive from '@radix-ui/react-checkbox';
 import { cn } from '~/utils';
 
-const Checkbox = React.forwardRef<
+type BaseCheckboxProps = Omit<
-  React.ElementRef<typeof CheckboxPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root>,
-  React.ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root>
+  'aria-label' | 'aria-labelledby'
->(({ className = '', ...props }, ref) => (
+> & {
+  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(
@@ -19,7 +34,8 @@ const Checkbox = React.forwardRef<
         <Check className="h-4 w-4" />
       </CheckboxPrimitive.Indicator>
     </CheckboxPrimitive.Root>
-));
+  ),
+);
 Checkbox.displayName = CheckboxPrimitive.Root.displayName;
 
 export { Checkbox };

packages/client/src/components/DataTable.tsx

@@ -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

packages/client/src/components/DataTableColumnHeader.tsx

@@ -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' ? (
+            {getSortIcon()}
-              <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" />
-            )}
           </Button>
         </DropdownMenuTrigger>
         <DropdownMenuContent align="start" className="z-[1001]">

packages/client/src/components/OGDialogTemplate.tsx

@@ -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}

packages/client/src/components/Switch.tsx

@@ -2,10 +2,23 @@ import * as React from 'react';
 import * as SwitchPrimitives from '@radix-ui/react-switch';
 import { cn } from '~/utils';
 
-const Switch = React.forwardRef<
+type BaseSwitchProps = Omit<
-  React.ElementRef<typeof SwitchPrimitives.Root>,
+  React.ComponentPropsWithoutRef<typeof SwitchPrimitives.Root>,
-  React.ComponentPropsWithoutRef<typeof SwitchPrimitives.Root>
+  'aria-label' | 'aria-labelledby'
->(({ className, ...props }, ref) => (
+>;
+
+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(
         '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',
@@ -20,7 +33,8 @@ const Switch = React.forwardRef<
         )}
       />
     </SwitchPrimitives.Root>
-));
+  ),
+);
 Switch.displayName = SwitchPrimitives.Root.displayName;
 
 export { Switch };

packages/client/src/components/TextareaAutosize.tsx

@@ -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();

packages/client/src/locales/en/translation.json

@@ -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"
 }