♿️ 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/Prompts/Groups/ChatGroupItem.tsx

@@ -71,10 +71,12 @@ function ChatGroupItem({
             <DropdownMenuTrigger asChild>
               <button
                 id={`prompt-actions-${group._id}`}
-                aria-label={`${group.name} - Actions Menu`}
-                aria-expanded="false"
-                aria-controls={`prompt-menu-${group._id}`}
-                aria-haspopup="menu"
+                type="button"
+                aria-label={
+                  localize('com_ui_sr_actions_menu', { 0: group.name }) +
+                  ' ' +
+                  localize('com_ui_prompt')
+                }
                 onClick={(e) => {
                   e.stopPropagation();
                 }}
@@ -86,11 +88,6 @@ function ChatGroupItem({
                 className="z-50 inline-flex h-8 w-8 items-center justify-center rounded-lg border border-border-medium bg-transparent p-0 text-sm font-medium transition-all duration-300 ease-in-out hover:border-border-heavy hover:bg-surface-hover focus:border-border-heavy focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50"
               >
                 <MenuIcon className="icon-md text-text-secondary" aria-hidden="true" />
-                <span className="sr-only">
-                  {localize('com_ui_sr_actions_menu', { 0: group.name }) +
-                    ' ' +
-                    localize('com_ui_prompt')}
-                </span>
               </button>
             </DropdownMenuTrigger>
             <DropdownMenuContent
@@ -98,30 +95,29 @@ function ChatGroupItem({
               aria-label={`Available actions for ${group.name}`}
               className="z-50 w-fit rounded-xl"
               collisionPadding={2}
-              align="end"
+              align="start"
             >
               <DropdownMenuItem
-                role="menuitem"
                 onClick={(e) => {
                   e.stopPropagation();
                   setPreviewDialogOpen(true);
                 }}
-                className="w-full cursor-pointer rounded-lg text-text-secondary hover:bg-surface-hover focus:bg-surface-hover disabled:cursor-not-allowed"
+                className="w-full cursor-pointer rounded-lg text-text-primary hover:bg-surface-hover focus:bg-surface-hover disabled:cursor-not-allowed"
               >
-                <TextSearch className="mr-2 h-4 w-4" aria-hidden="true" />
+                <TextSearch className="mr-2 h-4 w-4 text-text-primary" aria-hidden="true" />
                 <span>{localize('com_ui_preview')}</span>
               </DropdownMenuItem>
               {canEdit && (
                 <DropdownMenuGroup>
                   <DropdownMenuItem
                     disabled={!canEdit}
-                    className="cursor-pointer rounded-lg text-text-secondary hover:bg-surface-hover focus:bg-surface-hover disabled:cursor-not-allowed"
+                    className="cursor-pointer rounded-lg text-text-primary hover:bg-surface-hover focus:bg-surface-hover disabled:cursor-not-allowed"
                     onClick={(e) => {
                       e.stopPropagation();
                       onEditClick(e);
                     }}
                   >
-                    <EditIcon className="mr-2 h-4 w-4" aria-hidden="true" />
+                    <EditIcon className="mr-2 h-4 w-4 text-text-primary" aria-hidden="true" />
                     <span>{localize('com_ui_edit')}</span>
                   </DropdownMenuItem>
                 </DropdownMenuGroup>

client/src/components/Prompts/Groups/DashGroupItem.tsx

@@ -89,7 +89,7 @@ function DashGroupItemComponent({ group, instanceProjectId }: DashGroupItemProps
       onKeyDown={handleKeyDown}
       role="button"
       tabIndex={0}
-      aria-label={`${group.name} prompt group`}
+      aria-label={`${group.name} Prompt, ${localize('com_ui_category')}: ${group.category ?? ''}`}
     >
       <div className="flex w-full items-center justify-between">
         <div className="flex items-center gap-2 truncate pr-2">

client/src/components/Prompts/Groups/FilterPrompts.tsx

@@ -87,7 +87,7 @@ export default function FilterPrompts({ className = '' }: { className?: string }
         value={categoryFilter || SystemCategories.ALL}
         onChange={onSelect}
         options={filterOptions}
-        className="bg-transparent"
+        className="rounded-lg bg-transparent"
         icon={<ListFilter className="h-4 w-4" />}
         label="Filter: "
         ariaLabel={localize('com_ui_filter_prompts')}

client/src/components/Prompts/Groups/List.tsx

@@ -40,7 +40,7 @@ export default function List({
           </Button>
         </div>
       )}
-      <div className="flex-grow overflow-y-auto">
+      <div className="flex-grow overflow-y-auto" aria-label={localize('com_ui_prompt_groups')}>
         <div className="overflow-y-auto overflow-x-hidden">
           {isLoading && isChatRoute && (
             <Skeleton className="my-2 flex h-[84px] w-full rounded-2xl border-0 px-3 pb-4 pt-3" />

client/src/components/Prompts/PreviewPrompt.tsx

@@ -14,7 +14,7 @@ const PreviewPrompt = ({
   return (
     <OGDialog open={open} onOpenChange={onOpenChange}>
       <OGDialogContent className="max-h-[90vh] w-11/12 max-w-full overflow-y-auto md:max-w-[60vw]">
-        <div className="p-2">
+        <div>
           <PromptDetails group={group} />
         </div>
       </OGDialogContent>