⌨️ refactor: Favorite Item Selection & Keyboard Navigation/Focus Improvements (#10952)

* refactor: Reuse conversation switching logic from useSelectMention hook for Favorite Items - Added onSelectEndpoint prop to FavoriteItem for improved endpoint selection handling. - Refactored conversation initiation logic to utilize the new prop instead of direct navigation. - Updated FavoritesList to pass onSelectEndpoint to FavoriteItem, streamlining the interaction flow. - Replaced EndpointIcon with MinimalIcon for a cleaner UI representation of favorite models. * refactor: Enhance FavoriteItem and FavoritesList for improved accessibility and interaction - Added onRemoveFocus prop to FavoriteItem for better focus management after item removal. - Refactored event handling in FavoriteItem to support keyboard interactions for accessibility. - Updated FavoritesList to utilize the new onRemoveFocus prop, ensuring focus shifts appropriately after removing favorites. - Enhanced aria-labels and roles for better screen reader support and user experience. * refactor: Enhance EndpointModelItem for improved accessibility and interaction - Added useRef and useState hooks to manage active state and focus behavior. - Implemented MutationObserver to track changes in the data-active-item attribute for better accessibility. - Refactored favorite button handling to improve interaction and accessibility. - Updated button tabIndex based on active state to enhance keyboard navigation. * chore: Update Radix UI dependencies in package-lock and package.json files - Upgraded @radix-ui/react-alert-dialog and @radix-ui/react-dialog to version 1.1.15 across client and packages/client. - Updated related dependencies for improved compatibility and performance. - Removed outdated debug module references from package-lock.json. * refactor: Improve accessibility and interaction in conversation options - Added event handling to prevent unintended actions when renaming conversations. - Updated ConvoOptions to use Ariakit components for better accessibility and interaction. - Refactored button handlers for sharing and deleting conversations for clarity and consistency. - Enhanced dialog components with proper aria attributes and improved structure for better screen reader support. * refactor: Improve nested dialog accessibility for deleting shared link - Eliminated the setShareDialogOpen prop from both ShareButton and SharedLinkButton components to streamline the code. - Updated the delete mutation success handler in SharedLinkButton to improve focus management for accessibility. - Enhanced the OGDialog component in SharedLinkButton with a triggerRef for better interaction.
2025-12-17 00:40:14 +01:00 · 2025-12-12 17:18:21 -05:00 · 2025-12-12 17:18:21 -05:00 · 4d7e6b4a58
commit 4d7e6b4a58
parent 5b0cce2e2a
12 changed files with 670 additions and 219 deletions
--- a/client/package.json
+++ b/client/package.json
@ -39,10 +39,10 @@
    "@marsidev/react-turnstile": "^1.1.0",
    "@mcp-ui/client": "^5.7.0",
    "@radix-ui/react-accordion": "^1.1.2",
-    "@radix-ui/react-alert-dialog": "^1.0.2",
+    "@radix-ui/react-alert-dialog": "^1.1.15",
    "@radix-ui/react-checkbox": "^1.0.3",
    "@radix-ui/react-collapsible": "^1.0.3",
-    "@radix-ui/react-dialog": "^1.0.2",
+    "@radix-ui/react-dialog": "^1.1.15",
    "@radix-ui/react-dropdown-menu": "^2.1.1",
    "@radix-ui/react-hover-card": "^1.0.5",
    "@radix-ui/react-icons": "^1.3.0",
--- a/client/src/components/Chat/Menus/Endpoints/components/EndpointModelItem.tsx
+++ b/client/src/components/Chat/Menus/Endpoints/components/EndpointModelItem.tsx
@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useRef, useState, useEffect } from 'react';
 import { EarthIcon, Pin, PinOff } from 'lucide-react';
 import { isAgentsEndpoint, isAssistantsEndpoint } from 'librechat-data-provider';
 import { useModelSelectorContext } from '../ModelSelectorContext';
@ -18,6 +18,26 @@ export function EndpointModelItem({ modelId, endpoint, isSelected }: EndpointMod
  const { handleSelectModel } = useModelSelectorContext();
  const { isFavoriteModel, toggleFavoriteModel, isFavoriteAgent, toggleFavoriteAgent } =
    useFavorites();
+
+  const itemRef = useRef<HTMLDivElement>(null);
+  const [isActive, setIsActive] = useState(false);
+
+  useEffect(() => {
+    const element = itemRef.current;
+    if (!element) {
+      return;
+    }
+
+    const observer = new MutationObserver(() => {
+      setIsActive(element.hasAttribute('data-active-item'));
+    });
+
+    observer.observe(element, { attributes: true, attributeFilter: ['data-active-item'] });
+    setIsActive(element.hasAttribute('data-active-item'));
+
+    return () => observer.disconnect();
+  }, []);
+
  let isGlobal = false;
  let modelName = modelId;
  const avatarUrl = endpoint?.modelIcons?.[modelId ?? ''] || null;
@ -42,8 +62,7 @@ export function EndpointModelItem({ modelId, endpoint, isSelected }: EndpointMod
    ? isFavoriteAgent(modelId ?? '')
    : isFavoriteModel(modelId ?? '', endpoint.value);

-  const handleFavoriteClick = (e: React.MouseEvent) => {
-    e.stopPropagation();
+  const handleFavoriteToggle = () => {
    if (!modelId) {
      return;
    }
@ -55,6 +74,11 @@ export function EndpointModelItem({ modelId, endpoint, isSelected }: EndpointMod
    }
  };

+  const handleFavoriteClick = (e: React.MouseEvent) => {
+    e.stopPropagation();
+    handleFavoriteToggle();
+  };
+
  const renderAvatar = () => {
    const isAgentOrAssistant =
      isAgentsEndpoint(endpoint.value) || isAssistantsEndpoint(endpoint.value);
@ -84,6 +108,7 @@ export function EndpointModelItem({ modelId, endpoint, isSelected }: EndpointMod

  return (
    <MenuItem
+      ref={itemRef}
      key={modelId}
      onClick={() => handleSelectModel(endpoint, modelId ?? '')}
      className="group flex w-full cursor-pointer items-center justify-between rounded-lg px-2 text-sm"
@ -94,20 +119,18 @@ export function EndpointModelItem({ modelId, endpoint, isSelected }: EndpointMod
        {isGlobal && <EarthIcon className="ml-1 size-4 text-surface-submit" />}
      </div>
      <button
+        tabIndex={isActive ? 0 : -1}
        onClick={handleFavoriteClick}
        aria-label={isFavorite ? localize('com_ui_unpin') : localize('com_ui_pin')}
        className={cn(
          'rounded-md p-1 hover:bg-surface-hover',
-          isFavorite ? 'visible' : 'invisible group-hover:visible',
+          isFavorite ? 'visible' : 'invisible group-hover:visible group-data-[active-item]:visible',
        )}
      >
        {isFavorite ? (
          <PinOff className="h-4 w-4 text-text-secondary" />
        ) : (
-          <Pin
-            className="h-4 w-4 text-text-secondary"
-            aria-hidden="true"
-          />
+          <Pin className="h-4 w-4 text-text-secondary" aria-hidden="true" />
        )}
      </button>
      {isSelected && (
--- a/client/src/components/Conversations/Convo.tsx
+++ b/client/src/components/Conversations/Convo.tsx
@ -155,6 +155,9 @@ export default function Conversation({ conversation, retainView, toggleNav }: Co
        if (renaming) {
          return;
        }
+        if (e.target !== e.currentTarget) {
+          return;
+        }
        if (e.key === 'Enter' || e.key === ' ') {
          e.preventDefault();
          handleNavigation(false);
--- a/client/src/components/Conversations/ConvoOptions/ConvoOptions.tsx
+++ b/client/src/components/Conversations/ConvoOptions/ConvoOptions.tsx
@ -1,5 +1,5 @@
 import { useState, useId, useRef, memo, useCallback, useMemo } from 'react';
-import * as Menu from '@ariakit/react/menu';
+import * as Ariakit from '@ariakit/react';
 import { useParams, useNavigate } from 'react-router-dom';
 import { QueryKeys } from 'librechat-data-provider';
 import { useQueryClient } from '@tanstack/react-query';
@ -49,6 +49,7 @@ function ConvoOptions({
  const { conversationId: currentConvoId } = useParams();
  const { newConversation } = useNewConvo();

+  const menuId = useId();
  const shareButtonRef = useRef<HTMLButtonElement>(null);
  const deleteButtonRef = useRef<HTMLButtonElement>(null);
  const [showShareDialog, setShowShareDialog] = useState(false);
@ -106,11 +107,11 @@ function ConvoOptions({
  const isArchiveLoading = archiveConvoMutation.isLoading;
  const isDeleteLoading = deleteMutation.isLoading;

-  const handleShareClick = useCallback(() => {
+  const shareHandler = useCallback(() => {
    setShowShareDialog(true);
  }, []);

-  const handleDeleteClick = useCallback(() => {
+  const deleteHandler = useCallback(() => {
    setShowDeleteDialog(true);
  }, []);

@ -189,13 +190,15 @@ function ConvoOptions({
    () => [
      {
        label: localize('com_ui_share'),
-        onClick: handleShareClick,
+        onClick: shareHandler,
        icon: <Share2 className="icon-sm mr-2 text-text-primary" aria-hidden="true" />,
        show: startupConfig && startupConfig.sharedLinksEnabled,
-        hideOnClick: false,
-        ref: shareButtonRef,
        ariaHasPopup: 'dialog' as const,
        ariaControls: 'share-conversation-dialog',
+        /** NOTE: THE FOLLOWING PROPS ARE REQUIRED FOR MENU ITEMS THAT OPEN DIALOGS */
+        hideOnClick: false,
+        ref: shareButtonRef,
+        render: (props) => <button {...props} />,
      },
      {
        label: localize('com_ui_rename'),
@ -224,29 +227,29 @@ function ConvoOptions({
      },
      {
        label: localize('com_ui_delete'),
-        onClick: handleDeleteClick,
+        onClick: deleteHandler,
        icon: <Trash className="icon-sm mr-2 text-text-primary" aria-hidden="true" />,
-        hideOnClick: false,
-        ref: deleteButtonRef,
        ariaHasPopup: 'dialog' as const,
        ariaControls: 'delete-conversation-dialog',
+        /** NOTE: THE FOLLOWING PROPS ARE REQUIRED FOR MENU ITEMS THAT OPEN DIALOGS */
+        hideOnClick: false,
+        ref: deleteButtonRef,
+        render: (props) => <button {...props} />,
      },
    ],
    [
      localize,
-      handleShareClick,
+      shareHandler,
      startupConfig,
      renameHandler,
-      handleDuplicateClick,
+      deleteHandler,
+      isArchiveLoading,
      isDuplicateLoading,
      handleArchiveClick,
-      isArchiveLoading,
-      handleDeleteClick,
+      handleDuplicateClick,
    ],
  );

-  const menuId = useId();
-
  const buttonClassName = cn(
    'inline-flex h-7 w-7 items-center justify-center 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
@ -292,13 +295,13 @@ function ConvoOptions({
      </span>
      <DropdownPopup
        portal={true}
-        mountByState={true}
+        menuId={menuId}
+        focusLoop={true}
        unmountOnHide={true}
-        preserveTabOrder={true}
        isOpen={isPopoverActive}
        setIsOpen={setIsPopoverActive}
        trigger={
-          <Menu.MenuButton
+          <Ariakit.MenuButton
            id={`conversation-menu-${conversationId}`}
            aria-label={localize('com_nav_convo_menu_options')}
            aria-readonly={undefined}
@ -318,10 +321,9 @@ function ConvoOptions({
            }}
          >
            <Ellipsis className="icon-md text-text-secondary" aria-hidden={true} />
-          </Menu.MenuButton>
+          </Ariakit.MenuButton>
        }
        items={dropdownItems}
-        menuId={menuId}
        className="z-30"
      />
      {showShareDialog && (
--- a/client/src/components/Conversations/ConvoOptions/DeleteButton.tsx
+++ b/client/src/components/Conversations/ConvoOptions/DeleteButton.tsx
@ -7,6 +7,7 @@ import {
  Button,
  Spinner,
  OGDialog,
+  OGDialogClose,
  OGDialogTitle,
  OGDialogHeader,
  OGDialogContent,
@ -81,14 +82,14 @@ export function DeleteConversationDialog({

  return (
    <OGDialogContent
-      title={localize('com_ui_delete_confirm', { title })}
      className="w-11/12 max-w-md"
      showCloseButton={false}
+      aria-describedby="delete-conversation-description"
    >
      <OGDialogHeader>
        <OGDialogTitle>{localize('com_ui_delete_conversation')}</OGDialogTitle>
      </OGDialogHeader>
-      <div id="delete-conversation-dialog" className="w-full truncate">
+      <div id="delete-conversation-description" className="w-full truncate">
        <Trans
          i18nKey="com_ui_delete_confirm_strong"
          values={{ title }}
@ -96,9 +97,11 @@ export function DeleteConversationDialog({
        />
      </div>
      <div className="flex justify-end gap-4 pt-4">
-        <Button aria-label="cancel" variant="outline" onClick={() => setShowDeleteDialog(false)}>
-          {localize('com_ui_cancel')}
-        </Button>
+        <OGDialogClose asChild>
+          <Button aria-label="cancel" variant="outline">
+            {localize('com_ui_cancel')}
+          </Button>
+        </OGDialogClose>
        <Button variant="destructive" onClick={confirmDelete} disabled={deleteMutation.isLoading}>
          {deleteMutation.isLoading ? <Spinner /> : localize('com_ui_delete')}
        </Button>
--- a/client/src/components/Conversations/ConvoOptions/ShareButton.tsx
+++ b/client/src/components/Conversations/ConvoOptions/ShareButton.tsx
@ -51,7 +51,6 @@ export default function ShareButton({
        share={share}
        conversationId={conversationId}
        targetMessageId={latestMessage?.messageId}
-        setShareDialogOpen={onOpenChange}
        showQR={showQR}
        setShowQR={setShowQR}
        setSharedLink={setSharedLink}
--- a/client/src/components/Conversations/ConvoOptions/SharedLinkButton.tsx
+++ b/client/src/components/Conversations/ConvoOptions/SharedLinkButton.tsx
@ -1,14 +1,17 @@
-import { useState, useCallback } from 'react';
+import { useState, useCallback, useRef } from 'react';
 import { Trans } from 'react-i18next';
 import { QrCode, RotateCw, Trash2 } from 'lucide-react';
 import {
-  Button,
-  OGDialog,
-  Spinner,
-  TooltipAnchor,
  Label,
-  OGDialogTemplate,
+  Button,
+  Spinner,
+  OGDialog,
+  OGDialogClose,
+  TooltipAnchor,
+  OGDialogTitle,
+  OGDialogHeader,
  useToastContext,
+  OGDialogContent,
 } from '@librechat/client';
 import type { TSharedLinkGetResponse } from 'librechat-data-provider';
 import {
@ -23,7 +26,6 @@ export default function SharedLinkButton({
  share,
  conversationId,
  targetMessageId,
-  setShareDialogOpen,
  showQR,
  setShowQR,
  setSharedLink,
@ -31,13 +33,13 @@ export default function SharedLinkButton({
  share: TSharedLinkGetResponse | undefined;
  conversationId: string;
  targetMessageId?: string;
-  setShareDialogOpen: React.Dispatch<React.SetStateAction<boolean>>;
  showQR: boolean;
  setShowQR: (showQR: boolean) => void;
  setSharedLink: (sharedLink: string) => void;
 }) {
  const localize = useLocalize();
  const { showToast } = useToastContext();
+  const deleteButtonRef = useRef<HTMLButtonElement>(null);
  const [showDeleteDialog, setShowDeleteDialog] = useState(false);
  const [announcement, setAnnouncement] = useState('');
  const shareId = share?.shareId ?? '';
@ -63,9 +65,16 @@ export default function SharedLinkButton({
  });

  const deleteMutation = useDeleteSharedLinkMutation({
-    onSuccess: async () => {
+    onSuccess: () => {
      setShowDeleteDialog(false);
-      setShareDialogOpen(false);
+      setTimeout(() => {
+        const dialog = document
+          .getElementById('share-conversation-dialog')
+          ?.closest('[role="dialog"]');
+        if (dialog instanceof HTMLElement) {
+          dialog.focus();
+        }
+      }, 0);
    },
    onError: (error) => {
      console.error('Delete error:', error);
@ -175,6 +184,7 @@ export default function SharedLinkButton({
              render={(props) => (
                <Button
                  {...props}
+                  ref={deleteButtonRef}
                  onClick={() => setShowDeleteDialog(true)}
                  variant="destructive"
                  aria-label={localize('com_ui_delete')}
@ -185,36 +195,43 @@ export default function SharedLinkButton({
            />
          </div>
        )}
-        <OGDialog open={showDeleteDialog} onOpenChange={setShowDeleteDialog}>
-          <OGDialogTemplate
-            showCloseButton={false}
-            title={localize('com_ui_delete_shared_link_heading')}
-            className="max-w-[450px]"
-            main={
-              <>
-                <div className="flex w-full flex-col items-center gap-2">
-                  <div className="grid w-full items-center gap-2">
-                    <Label
-                      htmlFor="dialog-confirm-delete"
-                      className="text-left text-sm font-medium"
-                    >
-                      <Trans
-                        i18nKey="com_ui_delete_confirm_strong"
-                        values={{ title: shareId }}
-                        components={{ strong: <strong /> }}
-                      />
-                    </Label>
-                  </div>
-                </div>
-              </>
-            }
-            selection={{
-              selectHandler: handleDelete,
-              selectClasses:
-                'bg-red-700 dark:bg-red-600 hover:bg-red-800 dark:hover:bg-red-800 text-white',
-              selectText: localize('com_ui_delete'),
-            }}
-          />
+        <OGDialog
+          open={showDeleteDialog}
+          triggerRef={deleteButtonRef}
+          onOpenChange={setShowDeleteDialog}
+        >
+          <OGDialogContent className="max-w-[450px]" showCloseButton={false}>
+            <OGDialogHeader>
+              <OGDialogTitle>{localize('com_ui_delete_shared_link_heading')}</OGDialogTitle>
+            </OGDialogHeader>
+            <div className="flex w-full flex-col items-center gap-2">
+              <div className="grid w-full items-center gap-2">
+                <Label htmlFor="dialog-confirm-delete" className="text-left text-sm font-medium">
+                  <Trans
+                    i18nKey="com_ui_delete_confirm_strong"
+                    values={{ title: shareId }}
+                    components={{ strong: <strong /> }}
+                  />
+                </Label>
+              </div>
+            </div>
+            <div className="flex justify-end gap-4 pt-4">
+              <OGDialogClose asChild>
+                <Button variant="outline">{localize('com_ui_cancel')}</Button>
+              </OGDialogClose>
+              <Button
+                variant="destructive"
+                onClick={handleDelete}
+                disabled={deleteMutation.isLoading}
+              >
+                {deleteMutation.isLoading ? (
+                  <Spinner className="size-4" />
+                ) : (
+                  localize('com_ui_delete')
+                )}
+              </Button>
+            </div>
+          </OGDialogContent>
        </OGDialog>
      </div>
    </>
--- a/client/src/components/Nav/Favorites/FavoriteItem.tsx
+++ b/client/src/components/Nav/Favorites/FavoriteItem.tsx
@ -1,60 +1,59 @@
 import React, { useState } from 'react';
 import * as Menu from '@ariakit/react/menu';
-import { useNavigate } from 'react-router-dom';
 import { Ellipsis, PinOff } from 'lucide-react';
 import { DropdownPopup } from '@librechat/client';
 import { EModelEndpoint } from 'librechat-data-provider';
 import type { FavoriteModel } from '~/store/favorites';
 import type t from 'librechat-data-provider';
-import EndpointIcon from '~/components/Endpoints/EndpointIcon';
-import { useNewConvo, useFavorites, useLocalize } from '~/hooks';
+import MinimalIcon from '~/components/Endpoints/MinimalIcon';
+import { useFavorites, useLocalize } from '~/hooks';
 import { renderAgentAvatar, cn } from '~/utils';

+type Kwargs = {
+  model?: string;
+  agent_id?: string;
+  assistant_id?: string;
+  spec?: string | null;
+};
+
 type FavoriteItemProps = {
  item: t.Agent | FavoriteModel;
  type: 'agent' | 'model';
+  onSelectEndpoint?: (endpoint?: EModelEndpoint | string | null, kwargs?: Kwargs) => void;
+  onRemoveFocus?: () => void;
 };

-export default function FavoriteItem({ item, type }: FavoriteItemProps) {
-  const navigate = useNavigate();
+export default function FavoriteItem({
+  item,
+  type,
+  onSelectEndpoint,
+  onRemoveFocus,
+}: FavoriteItemProps) {
  const localize = useLocalize();
-  const { newConversation } = useNewConvo();
  const { removeFavoriteAgent, removeFavoriteModel } = useFavorites();
  const [isPopoverActive, setIsPopoverActive] = useState(false);

+  const handleSelect = () => {
+    if (type === 'agent') {
+      const agent = item as t.Agent;
+      onSelectEndpoint?.(EModelEndpoint.agents, { agent_id: agent.id });
+    } else {
+      const model = item as FavoriteModel;
+      onSelectEndpoint?.(model.endpoint, { model: model.model });
+    }
+  };
+
  const handleClick = (e: React.MouseEvent) => {
    if ((e.target as HTMLElement).closest('[data-testid="favorite-options-button"]')) {
      return;
    }
+    handleSelect();
+  };

-    if (type === 'agent') {
-      const agent = item as t.Agent;
-      newConversation({
-        template: {
-          ...agent,
-          endpoint: EModelEndpoint.agents,
-          agent_id: agent.id,
-        },
-        preset: {
-          ...agent,
-          endpoint: EModelEndpoint.agents,
-          agent_id: agent.id,
-        },
-      });
-      navigate(`/c/new`);
-    } else {
-      const model = item as FavoriteModel;
-      newConversation({
-        template: {
-          endpoint: model.endpoint,
-          model: model.model,
-        },
-        preset: {
-          endpoint: model.endpoint,
-          model: model.model,
-        },
-      });
-      navigate(`/c/new`);
+  const handleKeyDown = (e: React.KeyboardEvent) => {
+    if (e.key === 'Enter' || e.key === ' ') {
+      e.preventDefault();
+      handleSelect();
    }
  };

@ -67,6 +66,9 @@ export default function FavoriteItem({ item, type }: FavoriteItemProps) {
      removeFavoriteModel(model.model, model.endpoint);
    }
    setIsPopoverActive(false);
+    requestAnimationFrame(() => {
+      onRemoveFocus?.();
+    });
  };

  const renderIcon = () => {
@ -76,23 +78,22 @@ export default function FavoriteItem({ item, type }: FavoriteItemProps) {
    const model = item as FavoriteModel;
    return (
      <div className="mr-2 h-5 w-5">
-        <EndpointIcon
-          conversation={{ endpoint: model.endpoint, model: model.model } as t.TConversation}
-          endpoint={model.endpoint}
-          model={model.model}
-          size={20}
-        />
+        <MinimalIcon endpoint={model.endpoint} size={20} isCreatedByUser={false} />
      </div>
    );
  };

-  const getName = () => {
+  const getName = (): string => {
    if (type === 'agent') {
-      return (item as t.Agent).name;
+      return (item as t.Agent).name ?? '';
    }
    return (item as FavoriteModel).model;
  };

+  const name = getName();
+  const typeLabel = type === 'agent' ? localize('com_ui_agent') : localize('com_ui_model');
+  const ariaLabel = `${name} (${typeLabel})`;
+
  const menuId = React.useId();

  const dropdownItems = [
@ -105,22 +106,28 @@ export default function FavoriteItem({ item, type }: FavoriteItemProps) {

  return (
    <div
+      role="button"
+      tabIndex={0}
+      aria-label={ariaLabel}
      className={cn(
        'group relative flex w-full cursor-pointer items-center justify-between rounded-lg px-3 py-2 text-sm text-text-primary hover:bg-surface-active-alt',
        isPopoverActive ? 'bg-surface-active-alt' : '',
      )}
      onClick={handleClick}
+      onKeyDown={handleKeyDown}
      data-testid="favorite-item"
    >
      <div className="flex flex-1 items-center truncate pr-6">
        {renderIcon()}
-        <span className="truncate">{getName()}</span>
+        <span className="truncate">{name}</span>
      </div>

      <div
        className={cn(
          'absolute right-2 flex items-center',
-          isPopoverActive ? 'opacity-100' : 'opacity-0 group-hover:opacity-100',
+          isPopoverActive
+            ? 'opacity-100'
+            : 'opacity-0 group-focus-within:opacity-100 group-hover:opacity-100',
        )}
        onClick={(e) => e.stopPropagation()}
      >
@ -132,13 +139,23 @@ export default function FavoriteItem({ item, type }: FavoriteItemProps) {
          trigger={
            <Menu.MenuButton
              className={cn(
-                'flex h-7 w-7 items-center justify-center rounded-md',
-                isPopoverActive ? 'bg-surface-active-alt' : '',
+                'inline-flex h-7 w-7 items-center justify-center 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',
+                isPopoverActive
+                  ? 'opacity-100'
+                  : 'opacity-0 focus:opacity-100 group-focus-within:opacity-100 group-hover:opacity-100 data-[open]:opacity-100',
              )}
-              aria-label={localize('com_ui_options')}
+              aria-label={localize('com_nav_convo_menu_options')}
              data-testid="favorite-options-button"
+              onClick={(e: React.MouseEvent<HTMLButtonElement>) => {
+                e.stopPropagation();
+              }}
+              onKeyDown={(e: React.KeyboardEvent<HTMLButtonElement>) => {
+                if (e.key === 'Enter' || e.key === ' ') {
+                  e.stopPropagation();
+                }
+              }}
            >
-              <Ellipsis className="h-4 w-4 text-text-secondary" />
+              <Ellipsis className="icon-md text-text-secondary" aria-hidden={true} />
            </Menu.MenuButton>
          }
          items={dropdownItems}
--- a/client/src/components/Nav/Favorites/FavoritesList.tsx
+++ b/client/src/components/Nav/Favorites/FavoritesList.tsx
@ -8,7 +8,10 @@ import { QueryKeys, dataService } from 'librechat-data-provider';
 import { useQueries, useQueryClient } from '@tanstack/react-query';
 import type { InfiniteData } from '@tanstack/react-query';
 import type t from 'librechat-data-provider';
-import { useFavorites, useLocalize, useShowMarketplace } from '~/hooks';
+import { useFavorites, useLocalize, useShowMarketplace, useNewConvo } from '~/hooks';
+import useSelectMention from '~/hooks/Input/useSelectMention';
+import { useGetEndpointsQuery } from '~/data-provider';
+import { useAssistantsMapContext } from '~/Providers';
 import FavoriteItem from './FavoriteItem';
 import store from '~/store';

@ -123,6 +126,23 @@ export default function FavoritesList({
  const { favorites, reorderFavorites, isLoading: isFavoritesLoading } = useFavorites();
  const showAgentMarketplace = useShowMarketplace();

+  const { newConversation } = useNewConvo();
+  const assistantsMap = useAssistantsMapContext();
+  const conversation = useRecoilValue(store.conversationByIndex(0));
+  const { data: endpointsConfig = {} as t.TEndpointsConfig } = useGetEndpointsQuery();
+
+  const { onSelectEndpoint } = useSelectMention({
+    modelSpecs: [],
+    conversation,
+    assistantsMap,
+    endpointsConfig,
+    newConversation,
+    returnHandlers: true,
+  });
+
+  const marketplaceRef = useRef<HTMLDivElement>(null);
+  const listContainerRef = useRef<HTMLDivElement>(null);
+
  const handleAgentMarketplace = useCallback(() => {
    navigate('/agents');
    if (isSmallScreen && toggleNav) {
@ -130,6 +150,24 @@ export default function FavoritesList({
    }
  }, [navigate, isSmallScreen, toggleNav]);

+  const handleRemoveFocus = useCallback(() => {
+    if (marketplaceRef.current) {
+      marketplaceRef.current.focus();
+      return;
+    }
+    const nextFavorite = listContainerRef.current?.querySelector<HTMLElement>(
+      '[data-testid="favorite-item"]',
+    );
+    if (nextFavorite) {
+      nextFavorite.focus();
+      return;
+    }
+    const newChatButton = document.querySelector<HTMLElement>(
+      '[data-testid="nav-new-chat-button"]',
+    );
+    newChatButton?.focus();
+  }, []);
+
  // Ensure favorites is always an array (could be corrupted in localStorage)
  const safeFavorites = useMemo(() => (Array.isArray(favorites) ? favorites : []), [favorites]);

@ -228,7 +266,7 @@ export default function FavoritesList({

  return (
    <div className="mb-2 flex flex-col">
-      <div className="mt-1 flex flex-col gap-1">
+      <div ref={listContainerRef} className="mt-1 flex flex-col gap-1">
        {/* Show skeletons for ALL items while agents are still loading */}
        {isAgentsLoading ? (
          <>
@ -244,8 +282,18 @@ export default function FavoritesList({
            {/* Agent Marketplace button */}
            {showAgentMarketplace && (
              <div
+                ref={marketplaceRef}
+                role="button"
+                tabIndex={0}
+                aria-label={localize('com_agents_marketplace')}
                className="group relative flex w-full cursor-pointer items-center justify-between rounded-lg px-3 py-2 text-sm text-text-primary hover:bg-surface-active-alt"
                onClick={handleAgentMarketplace}
+                onKeyDown={(e) => {
+                  if (e.key === 'Enter' || e.key === ' ') {
+                    e.preventDefault();
+                    handleAgentMarketplace();
+                  }
+                }}
                data-testid="nav-agents-marketplace-button"
              >
                <div className="flex flex-1 items-center truncate pr-6">
@ -270,7 +318,12 @@ export default function FavoritesList({
                    moveItem={moveItem}
                    onDrop={handleDrop}
                  >
-                    <FavoriteItem item={agent} type="agent" />
+                    <FavoriteItem
+                      item={agent}
+                      type="agent"
+                      onSelectEndpoint={onSelectEndpoint}
+                      onRemoveFocus={handleRemoveFocus}
+                    />
                  </DraggableFavoriteItem>
                );
              } else if (fav.model && fav.endpoint) {
@ -285,6 +338,8 @@ export default function FavoritesList({
                    <FavoriteItem
                      item={{ model: fav.model, endpoint: fav.endpoint }}
                      type="model"
+                      onSelectEndpoint={onSelectEndpoint}
+                      onRemoveFocus={handleRemoveFocus}
                    />
                  </DraggableFavoriteItem>
                );