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