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