♿️ 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/Conversations/Conversations.tsx

@@ -28,6 +28,8 @@ const LoadingSpinner = memo(() => {
   );
 });
 
+LoadingSpinner.displayName = 'LoadingSpinner';
+
 const DateLabel: FC<{ groupName: string }> = memo(({ groupName }) => {
   const localize = useLocalize();
   return (
@@ -74,6 +76,7 @@ const Conversations: FC<ConversationsProps> = ({
   isLoading,
   isSearchLoading,
 }) => {
+  const localize = useLocalize();
   const isSmallScreen = useMediaQuery('(max-width: 768px)');
   const convoHeight = isSmallScreen ? 44 : 34;
 
@@ -181,7 +184,7 @@ const Conversations: FC<ConversationsProps> = ({
       {isSearchLoading ? (
         <div className="flex flex-1 items-center justify-center">
           <Spinner className="text-text-primary" />
-          <span className="ml-2 text-text-primary">Loading...</span>
+          <span className="ml-2 text-text-primary">{localize('com_ui_loading')}</span>
         </div>
       ) : (
         <div className="flex-1">

client/src/components/Conversations/Convo.tsx

@@ -135,8 +135,9 @@ export default function Conversation({ conversation, retainView, toggleNav }: Co
         'group relative flex h-12 w-full items-center rounded-lg transition-colors duration-200 md:h-9',
         isActiveConvo ? 'bg-surface-active-alt' : 'hover:bg-surface-active-alt',
       )}
-      role="listitem"
-      tabIndex={0}
+      role="button"
+      tabIndex={renaming ? -1 : 0}
+      aria-label={`${title || localize('com_ui_untitled')} conversation`}
       onClick={(e) => {
         if (renaming) {
           return;
@@ -149,7 +150,8 @@ export default function Conversation({ conversation, retainView, toggleNav }: Co
         if (renaming) {
           return;
         }
-        if (e.key === 'Enter') {
+        if (e.key === 'Enter' || e.key === ' ') {
+          e.preventDefault();
           handleNavigation(false);
         }
       }}

client/src/components/Conversations/ConvoLink.tsx

@@ -40,8 +40,7 @@ const ConvoLink: React.FC<ConvoLinkProps> = ({
           e.stopPropagation();
           onRename();
         }}
-        role="button"
-        aria-label={isSmallScreen ? undefined : title || localize('com_ui_untitled')}
+        aria-label={title || localize('com_ui_untitled')}
       >
         {title || localize('com_ui_untitled')}
       </div>

client/src/components/Conversations/ConvoOptions/ConvoOptions.tsx

@@ -201,6 +201,7 @@ function ConvoOptions({
           <Menu.MenuButton
             id={`conversation-menu-${conversationId}`}
             aria-label={localize('com_nav_convo_menu_options')}
+            aria-readonly={undefined}
             className={cn(
               'inline-flex h-7 w-7 items-center justify-center gap-2 rounded-md border-none p-0 text-sm font-medium ring-ring-primary transition-all duration-200 ease-in-out focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:opacity-50',
               isActiveConvo === true || isPopoverActive