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