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

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

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' ? (
-              <ArrowDownIcon className="ml-2 h-4 w-4" />
-            ) : column.getIsSorted() === 'asc' ? (
-              <ArrowUpIcon className="ml-2 h-4 w-4" />
-            ) : (
-              <CaretSortIcon className="ml-2 h-4 w-4" />
-            )}
+            {getSortIcon()}
           </Button>
         </DropdownMenuTrigger>
         <DropdownMenuContent align="start" className="z-[1001]">

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

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