♿️ fix: Accessibility, UI consistency, dialog & avatar refactors (#9975)

* 🔧 refactor: Improve accessibility and styling in ChatGroupItem and FilterPrompts components

* 🔧 fix: Add button type and keyboard accessibility to dropdown menu trigger in ChatGroupItem

* 🔧 fix(757): Enhance accessibility by updating aria-labels and adding localization for prompt groups

* 🔧 fix(618): Update version to 0.3.1 and enhance accessibility in InfoHoverCard component

* 🔧 fix(618): Update aria-label in InfoHoverCard to use dynamic text prop for improved accessibility

* 🔧 fix: Enhance accessibility by updating aria-labels and roles in Conversations components

* 🔧 fix(620): Enhance accessibility by adding tabIndex to Tabs.Content components in ArtifactTabs, Settings, and Speech components

* refactor: remove RevokeKeysButton component and update related components for accessibility

- Deleted RevokeKeysButton component.
- Updated SharedLinks and General components to use Label for accessibility.
- Enhanced Personalization component with aria-labelledby and aria-describedby attributes.
- Refactored ConversationModeSwitch to use ToggleSwitch for better state management.
- Improved AutoSendTextSelector with local state management and accessibility attributes.
- Replaced Switch components with ToggleSwitch in various Speech and TTS components for consistency.
- Added aria-labelledby attributes to Dropdown components for better accessibility.
- Updated translation.json to include new localization keys and improved existing ones.
- Enhanced Slider component to support aria attributes for better accessibility.

* 🔧 fix: Enhance user feedback for API key operations with success and error messages

* 🔧 fix: Update aria-labels in Avatar component for improved localization and accessibility

* 🔧 fix: Refactor handleFile and handleDrop functions for improved readability and maintainability

client/src/components/Nav/SettingsTabs/Account/Avatar.tsx

@@ -1,9 +1,11 @@
 import React, { useState, useRef, useCallback } from 'react';
 import { useSetRecoilState } from 'recoil';
+// @ts-ignore - no type definitions available
 import AvatarEditor from 'react-avatar-editor';
-import { FileImage, RotateCw, Upload } from 'lucide-react';
+import { FileImage, RotateCw, Upload, ZoomIn, ZoomOut, Move, X } from 'lucide-react';
 import { fileConfig as defaultFileConfig, mergeFileConfig } from 'librechat-data-provider';
 import {
+  Label,
   Slider,
   Button,
   Spinner,
@@ -25,14 +27,20 @@ interface AvatarEditorRef {
   getImage: () => HTMLImageElement;
 }
 
+interface Position {
+  x: number;
+  y: number;
+}
+
 function Avatar() {
   const setUser = useSetRecoilState(store.user);
 
   const [scale, setScale] = useState<number>(1);
   const [rotation, setRotation] = useState<number>(0);
+  const [position, setPosition] = useState<Position>({ x: 0.5, y: 0.5 });
+  const [isDragging, setIsDragging] = useState<boolean>(false);
   const editorRef = useRef<AvatarEditorRef | null>(null);
   const fileInputRef = useRef<HTMLInputElement>(null);
-  const openButtonRef = useRef<HTMLButtonElement>(null);
 
   const [image, setImage] = useState<string | File | null>(null);
   const [isDialogOpen, setDialogOpen] = useState<boolean>(false);
@@ -48,7 +56,6 @@ function Avatar() {
     onSuccess: (data) => {
       showToast({ message: localize('com_ui_upload_success') });
       setUser((prev) => ({ ...prev, avatar: data.url }) as TUser);
-      openButtonRef.current?.click();
     },
     onError: (error) => {
       console.error('Error:', error);
@@ -61,29 +68,45 @@ function Avatar() {
     handleFile(file);
   };
 
-  const handleFile = (file: File | undefined) => {
-    if (fileConfig.avatarSizeLimit != null && file && file.size <= fileConfig.avatarSizeLimit) {
-      setImage(file);
-      setScale(1);
-      setRotation(0);
-    } else {
-      const megabytes =
-        fileConfig.avatarSizeLimit != null ? formatBytes(fileConfig.avatarSizeLimit) : 2;
-      showToast({
-        message: localize('com_ui_upload_invalid_var', { 0: megabytes + '' }),
-        status: 'error',
-      });
-    }
-  };
+  const handleFile = useCallback(
+    (file: File | undefined) => {
+      if (fileConfig.avatarSizeLimit != null && file && file.size <= fileConfig.avatarSizeLimit) {
+        setImage(file);
+        setScale(1);
+        setRotation(0);
+        setPosition({ x: 0.5, y: 0.5 });
+      } else {
+        const megabytes =
+          fileConfig.avatarSizeLimit != null ? formatBytes(fileConfig.avatarSizeLimit) : 2;
+        showToast({
+          message: localize('com_ui_upload_invalid_var', { 0: megabytes + '' }),
+          status: 'error',
+        });
+      }
+    },
+    [fileConfig.avatarSizeLimit, localize, showToast],
+  );
 
   const handleScaleChange = (value: number[]) => {
     setScale(value[0]);
   };
 
+  const handleZoomIn = () => {
+    setScale((prev) => Math.min(prev + 0.2, 5));
+  };
+
+  const handleZoomOut = () => {
+    setScale((prev) => Math.max(prev - 0.2, 1));
+  };
+
   const handleRotate = () => {
     setRotation((prev) => (prev + 90) % 360);
   };
 
+  const handlePositionChange = (position: Position) => {
+    setPosition(position);
+  };
+
   const handleUpload = () => {
     if (editorRef.current) {
       const canvas = editorRef.current.getImageScaledToCanvas();
@@ -98,11 +121,14 @@ function Avatar() {
     }
   };
 
-  const handleDrop = useCallback((e: React.DragEvent<HTMLDivElement>) => {
-    e.preventDefault();
-    const file = e.dataTransfer.files[0];
-    handleFile(file);
-  }, []);
+  const handleDrop = useCallback(
+    (e: React.DragEvent<HTMLDivElement>) => {
+      e.preventDefault();
+      const file = e.dataTransfer.files[0];
+      handleFile(file);
+    },
+    [handleFile],
+  );
 
   const handleDragOver = useCallback((e: React.DragEvent<HTMLDivElement>) => {
     e.preventDefault();
@@ -116,8 +142,15 @@ function Avatar() {
     setImage(null);
     setScale(1);
     setRotation(0);
+    setPosition({ x: 0.5, y: 0.5 });
   }, []);
 
+  const handleReset = () => {
+    setScale(1);
+    setRotation(0);
+    setPosition({ x: 0.5, y: 0.5 });
+  };
+
   return (
     <OGDialog
       open={isDialogOpen}
@@ -125,90 +158,190 @@ function Avatar() {
         setDialogOpen(open);
         if (!open) {
           resetImage();
-          setTimeout(() => {
-            openButtonRef.current?.focus();
-          }, 0);
         }
       }}
     >
       <div className="flex items-center justify-between">
         <span>{localize('com_nav_profile_picture')}</span>
-        <OGDialogTrigger ref={openButtonRef}>
+        <OGDialogTrigger asChild>
           <Button variant="outline">
-            <FileImage className="mr-2 flex w-[22px] items-center stroke-1" />
+            <FileImage className="mr-2 flex w-[22px] items-center" />
             <span>{localize('com_nav_change_picture')}</span>
           </Button>
         </OGDialogTrigger>
       </div>
 
-      <OGDialogContent className="w-11/12 max-w-sm" style={{ borderRadius: '12px' }}>
+      <OGDialogContent showCloseButton={false} className="w-11/12 max-w-md">
         <OGDialogHeader>
           <OGDialogTitle className="text-lg font-medium leading-6 text-text-primary">
             {image != null ? localize('com_ui_preview') : localize('com_ui_upload_image')}
           </OGDialogTitle>
         </OGDialogHeader>
-        <div className="flex flex-col items-center justify-center">
+        <div className="flex flex-col items-center justify-center p-2">
           {image != null ? (
             <>
-              <div className="relative overflow-hidden rounded-full">
+              <div
+                className={cn(
+                  'relative overflow-hidden rounded-full ring-4 ring-gray-200 transition-all dark:ring-gray-700',
+                  isDragging && 'cursor-move ring-blue-500 dark:ring-blue-400',
+                )}
+                onMouseDown={() => setIsDragging(true)}
+                onMouseUp={() => setIsDragging(false)}
+                onMouseLeave={() => setIsDragging(false)}
+              >
                 <AvatarEditor
                   ref={editorRef}
                   image={image}
-                  width={250}
-                  height={250}
+                  width={280}
+                  height={280}
                   border={0}
-                  borderRadius={125}
+                  borderRadius={140}
                   color={[255, 255, 255, 0.6]}
                   scale={scale}
                   rotate={rotation}
+                  position={position}
+                  onPositionChange={handlePositionChange}
+                  className="cursor-move"
                 />
+                {!isDragging && (
+                  <div className="pointer-events-none absolute inset-0 flex items-center justify-center opacity-0 transition-opacity hover:opacity-100">
+                    <div className="rounded-full bg-black/50 p-2">
+                      <Move className="h-6 w-6 text-white" />
+                    </div>
+                  </div>
+                )}
               </div>
-              <div className="mt-4 flex w-full flex-col items-center space-y-4">
-                <div className="flex w-full items-center justify-center space-x-4">
-                  <span className="text-sm">{localize('com_ui_zoom')}</span>
-                  <Slider
-                    value={[scale]}
-                    min={1}
-                    max={5}
-                    step={0.001}
-                    onValueChange={handleScaleChange}
-                    className="w-2/3 max-w-xs"
-                  />
+
+              <div className="mt-6 w-full space-y-6">
+                {/* Zoom Controls */}
+                <div className="space-y-2">
+                  <div className="flex items-center justify-between">
+                    <Label htmlFor="zoom-slider" className="text-sm font-medium">
+                      {localize('com_ui_zoom')}
+                    </Label>
+                    <span className="text-sm text-text-secondary">{Math.round(scale * 100)}%</span>
+                  </div>
+                  <div className="flex items-center space-x-3">
+                    <Button
+                      type="button"
+                      variant="outline"
+                      size="sm"
+                      onClick={handleZoomOut}
+                      disabled={scale <= 1}
+                      aria-label={localize('com_ui_zoom_out')}
+                      className="shrink-0"
+                    >
+                      <ZoomOut className="h-4 w-4" />
+                    </Button>
+                    <Slider
+                      id="zoom-slider"
+                      value={[scale]}
+                      min={1}
+                      max={5}
+                      step={0.1}
+                      onValueChange={handleScaleChange}
+                      className="flex-1"
+                      aria-label={localize('com_ui_zoom_level')}
+                    />
+                    <Button
+                      type="button"
+                      variant="outline"
+                      size="sm"
+                      onClick={handleZoomIn}
+                      disabled={scale >= 5}
+                      aria-label={localize('com_ui_zoom_in')}
+                      className="shrink-0"
+                    >
+                      <ZoomIn className="h-4 w-4" />
+                    </Button>
+                  </div>
                 </div>
-                <button
-                  onClick={handleRotate}
-                  className="rounded-full bg-gray-200 p-2 transition-colors hover:bg-gray-300 dark:bg-gray-600 dark:hover:bg-gray-500"
-                >
-                  <RotateCw className="h-5 w-5" />
-                </button>
+
+                <div className="flex items-center justify-center space-x-3">
+                  <Button
+                    type="button"
+                    variant="outline"
+                    onClick={handleRotate}
+                    className="flex items-center space-x-2"
+                    aria-label={localize('com_ui_rotate_90')}
+                  >
+                    <RotateCw className="h-4 w-4" />
+                    <span className="text-sm">{localize('com_ui_rotate')}</span>
+                  </Button>
+                  <Button
+                    type="button"
+                    variant="outline"
+                    onClick={handleReset}
+                    className="flex items-center space-x-2"
+                    aria-label={localize('com_ui_reset_adjustments')}
+                  >
+                    <X className="h-4 w-4" />
+                    <span className="text-sm">{localize('com_ui_reset')}</span>
+                  </Button>
+                </div>
+
+                {/* Helper Text */}
+                <p className="text-center text-xs text-gray-500 dark:text-gray-400">
+                  {localize('com_ui_editor_instructions')}
+                </p>
+              </div>
+
+              {/* Action Buttons */}
+              <div className="mt-6 flex w-full space-x-3">
+                <Button
+                  type="button"
+                  variant="outline"
+                  className="flex-1"
+                  onClick={resetImage}
+                  disabled={isUploading}
+                >
+                  {localize('com_ui_cancel')}
+                </Button>
+                <Button
+                  variant="submit"
+                  type="button"
+                  className={cn('w-full', isUploading ? 'cursor-not-allowed opacity-90' : '')}
+                  onClick={handleUpload}
+                  disabled={isUploading}
+                >
+                  {isUploading ? (
+                    <Spinner className="icon-sm mr-2" />
+                  ) : (
+                    <Upload className="mr-2 h-4 w-4" />
+                  )}
+                  {localize('com_ui_upload')}
+                </Button>
               </div>
-              <Button
-                className={cn(
-                  'btn btn-primary mt-4 flex w-full hover:bg-green-600',
-                  isUploading ? 'cursor-not-allowed opacity-90' : '',
-                )}
-                onClick={handleUpload}
-                disabled={isUploading}
-              >
-                {isUploading ? (
-                  <Spinner className="icon-sm mr-2" />
-                ) : (
-                  <Upload className="mr-2 h-5 w-5" />
-                )}
-                {localize('com_ui_upload')}
-              </Button>
             </>
           ) : (
             <div
-              className="flex h-64 w-11/12 flex-col items-center justify-center rounded-lg border-2 border-dashed border-gray-300 bg-transparent dark:border-gray-600"
+              className="flex h-72 w-full flex-col items-center justify-center rounded-lg border-2 border-dashed border-gray-300 bg-transparent transition-colors hover:border-gray-400 dark:border-gray-600 dark:hover:border-gray-500"
               onDrop={handleDrop}
               onDragOver={handleDragOver}
+              role="button"
+              tabIndex={0}
+              onClick={openFileDialog}
+              onKeyDown={(e) => {
+                if (e.key === 'Enter' || e.key === ' ') {
+                  e.preventDefault();
+                  openFileDialog();
+                }
+              }}
+              aria-label={localize('com_ui_upload_avatar_label')}
             >
-              <FileImage className="mb-4 size-12 text-gray-400" />
-              <p className="mb-2 text-center text-sm text-gray-500 dark:text-gray-400">
+              <FileImage className="mb-4 size-16 text-gray-400" />
+              <p className="mb-2 text-center text-sm font-medium text-text-primary">
                 {localize('com_ui_drag_drop')}
               </p>
-              <Button variant="secondary" onClick={openFileDialog}>
+              <p className="mb-4 text-center text-xs text-text-secondary">
+                {localize('com_ui_max_file_size', {
+                  0:
+                    fileConfig.avatarSizeLimit != null
+                      ? formatBytes(fileConfig.avatarSizeLimit)
+                      : '2MB',
+                })}
+              </p>
+              <Button type="button" variant="secondary" onClick={openFileDialog}>
                 {localize('com_ui_select_file')}
               </Button>
               <input
@@ -217,6 +350,7 @@ function Avatar() {
                 className="hidden"
                 accept=".png, .jpg, .jpeg"
                 onChange={handleFileChange}
+                aria-label={localize('com_ui_file_input_avatar_label')}
               />
             </div>
           )}

client/src/components/Nav/SettingsTabs/Account/DeleteAccount.tsx

@@ -1,6 +1,7 @@
 import { LockIcon, Trash } from 'lucide-react';
 import React, { useState, useCallback } from 'react';
 import {
+  Label,
   Input,
   Button,
   Spinner,
@@ -45,11 +46,11 @@ const DeleteAccount = ({ disabled = false }: { title?: string; disabled?: boolea
     <>
       <OGDialog open={isDialogOpen} onOpenChange={setDialogOpen}>
         <div className="flex items-center justify-between">
-          <span>{localize('com_nav_delete_account')}</span>
+          <Label id="delete-account-label">{localize('com_nav_delete_account')}</Label>
           <OGDialogTrigger asChild>
             <Button
+              aria-labelledby="delete-account-label"
               variant="destructive"
-              className="flex items-center justify-center rounded-lg transition-colors duration-200"
               onClick={() => setDialogOpen(true)}
               disabled={disabled}
             >

client/src/components/Nav/SettingsTabs/Account/DisableTwoFactorToggle.tsx

@@ -20,7 +20,7 @@ export const DisableTwoFactorToggle: React.FC<DisableTwoFactorToggleProps> = ({
   return (
     <div className="flex items-center justify-between">
       <div className="flex items-center space-x-2">
-        <Label className="font-light"> {localize('com_nav_2fa')}</Label>
+        <Label> {localize('com_nav_2fa')}</Label>
       </div>
       <div className="flex items-center gap-3">
         <Button

client/src/components/Nav/SettingsTabs/Account/DisplayUsernameMessages.tsx

@@ -15,7 +15,7 @@ export default function DisplayUsernameMessages() {
   return (
     <div className="flex items-center justify-between">
       <div className="flex items-center space-x-2">
-        <Label className="font-light">{localize('com_nav_user_name_display')}</Label>
+        <Label id="user-name-display-label">{localize('com_nav_user_name_display')}</Label>
         <InfoHoverCard side={ESide.Bottom} text={localize('com_nav_info_user_name_display')} />
       </div>
       <Switch
@@ -24,6 +24,7 @@ export default function DisplayUsernameMessages() {
         onCheckedChange={handleCheckedChange}
         className="ml-4"
         data-testid="UsernameDisplay"
+        aria-labelledby="user-name-display-label"
       />
     </div>
   );