👐 a11y: Accessible Conversation Menu Options (danny-avila#3864)

* fix: type issues * feat: Fix document title setting in Conversation component * style: new chat theme * fix: No keyboard access to chat menus in the chat history danny-avila#3788 * fix: Menu button in the chat history area does not indicate its state danny-avila#3823 * refactor: use ariakit for DropdownPopup * style: update sticky z-index in NewChat component * style: update ConvoOptions menu button styling
Anant · Aug 30, 2024 · 0a359aa · 0a359aa
1 parent 2ce4f66
commit 0a359aa
Show file tree

Hide file tree

Showing 6 changed files with 121 additions and 130 deletions.
diff --git a/client/src/components/Chat/ExportAndShareMenu.tsx b/client/src/components/Chat/ExportAndShareMenu.tsx
@@ -1,9 +1,10 @@
-import { useState } from 'react';
-import { Upload, Share2 } from 'lucide-react';
+import { useState, useId } from 'react';
 import { useRecoilValue } from 'recoil';
+import * as Ariakit from '@ariakit/react';
+import { Upload, Share2 } from 'lucide-react';
 import { ShareButton } from '~/components/Conversations/ConvoOptions';
-import { Button, DropdownPopup } from '~/components/ui';
 import { useMediaQuery, useLocalize } from '~/hooks';
+import { DropdownPopup } from '~/components/ui';
 import { ExportModal } from '../Nav';
 import store from '~/store';
 
@@ -13,11 +14,13 @@ export default function ExportAndShareMenu({
   isSharedButtonEnabled: boolean;
 }) {
   const localize = useLocalize();
-  const conversation = useRecoilValue(store.conversationByIndex(0));
-  const [isPopoverActive, setIsPopoverActive] = useState(false);
   const [showExports, setShowExports] = useState(false);
+  const [isPopoverActive, setIsPopoverActive] = useState(false);
   const [showShareDialog, setShowShareDialog] = useState(false);
+
+  const menuId = useId();
   const isSmallScreen = useMediaQuery('(max-width: 768px)');
+  const conversation = useRecoilValue(store.conversationByIndex(0));
 
   const exportable =
     conversation &&
@@ -60,20 +63,19 @@ export default function ExportAndShareMenu({
   return (
     <>
       <DropdownPopup
+        menuId={menuId}
         isOpen={isPopoverActive}
         setIsOpen={setIsPopoverActive}
         trigger={
-          <Button
+          <Ariakit.MenuButton
             id="export-menu-button"
             aria-label="Export options"
-            variant="outline"
-            className="mr-4 h-10 w-10 p-0 transition-all duration-300 ease-in-out"
+            className="mr-4 inline-flex h-10 w-10 items-center justify-center rounded-md border border-border-light bg-transparent p-0 text-sm font-medium transition-all duration-300 ease-in-out focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50"
           >
             <Upload className="icon-md dark:text-gray-300" aria-hidden="true" focusable="false" />
-          </Button>
+          </Ariakit.MenuButton>
         }
         items={dropdownItems}
-        anchor="bottom end"
         className={isSmallScreen ? '' : 'absolute right-0 top-0 mt-2'}
       />
       {showShareDialog && conversation.conversationId != null && (

diff --git a/client/src/components/Conversations/Convo.tsx b/client/src/components/Conversations/Convo.tsx
@@ -1,11 +1,11 @@
+import React, { useState, useEffect, useRef, useMemo } from 'react';
 import { useRecoilValue } from 'recoil';
+import { Check, X } from 'lucide-react';
 import { useParams } from 'react-router-dom';
-import React, { useState, useEffect, useRef, useMemo } from 'react';
-
 import { Constants } from 'librechat-data-provider';
 import { useGetEndpointsQuery } from 'librechat-data-provider/react-query';
-import { Check, X } from 'lucide-react';
 import type { MouseEvent, FocusEvent, KeyboardEvent } from 'react';
+import type { TConversation } from 'librechat-data-provider';
 import { useConversations, useNavigateToConvo, useMediaQuery } from '~/hooks';
 import { useUpdateConversationMutation } from '~/data-provider';
 import EndpointIcon from '~/components/Endpoints/EndpointIcon';
@@ -17,7 +17,19 @@ import store from '~/store';
 
 type KeyEvent = KeyboardEvent<HTMLInputElement>;
 
-export default function Conversation({ conversation, retainView, toggleNav, isLatestConvo }) {
+type ConversationProps = {
+  conversation: TConversation;
+  retainView: () => void;
+  toggleNav: () => void;
+  isLatestConvo: boolean;
+};
+
+export default function Conversation({
+  conversation,
+  retainView,
+  toggleNav,
+  isLatestConvo,
+}: ConversationProps) {
   const params = useParams();
   const currentConvoId = useMemo(() => params.conversationId, [params.conversationId]);
   const updateConvoMutation = useUpdateConversationMutation(currentConvoId ?? '');
@@ -33,7 +45,7 @@ export default function Conversation({ conversation, retainView, toggleNav, isLa
   const [isPopoverActive, setIsPopoverActive] = useState(false);
   const isSmallScreen = useMediaQuery('(max-width: 768px)');
 
-  const clickHandler = async (event: React.MouseEvent<HTMLAnchorElement>) => {
+  const clickHandler = async (event: MouseEvent<HTMLAnchorElement>) => {
     if (event.button === 0 && (event.ctrlKey || event.metaKey)) {
       toggleNav();
       return;
@@ -47,12 +59,17 @@ export default function Conversation({ conversation, retainView, toggleNav, isLa
     toggleNav();
 
     // set document title
-    document.title = title;
+    if (typeof title === 'string' && title.length > 0) {
+      document.title = title;
+    }
     /* Note: Latest Message should not be reset if existing convo */
-    navigateWithLastTools(conversation, !conversationId || conversationId === Constants.NEW_CONVO);
+    navigateWithLastTools(
+      conversation,
+      !(conversationId ?? '') || conversationId === Constants.NEW_CONVO,
+    );
   };
 
-  const renameHandler = (e: MouseEvent<HTMLButtonElement>) => {
+  const renameHandler: (e: MouseEvent<HTMLButtonElement>) => void = () => {
     setIsPopoverActive(false);
     setTitleInput(title);
     setRenaming(true);
@@ -70,8 +87,12 @@ export default function Conversation({ conversation, retainView, toggleNav, isLa
     if (titleInput === title) {
       return;
     }
+    if (typeof conversationId !== 'string' || conversationId === '') {
+      return;
+    }
+
     updateConvoMutation.mutate(
-      { conversationId, title: titleInput },
+      { conversationId, title: titleInput ?? '' },
       {
         onSuccess: () => refreshConversations(),
         onError: () => {
@@ -101,14 +122,17 @@ export default function Conversation({ conversation, retainView, toggleNav, isLa
     setRenaming(false);
   };
 
-  const isActiveConvo =
+  const isActiveConvo: boolean =
     currentConvoId === conversationId ||
-    (isLatestConvo && currentConvoId === 'new' && activeConvos[0] && activeConvos[0] !== 'new');
+    (isLatestConvo &&
+      currentConvoId === 'new' &&
+      activeConvos[0] != null &&
+      activeConvos[0] !== 'new');
 
   return (
     <div
       className={cn(
-        'group relative mt-2 flex h-9 items-center rounded-lg hover:bg-gray-200 dark:hover:bg-gray-700',
+        'group relative mt-2 flex h-9 w-full items-center rounded-lg hover:bg-gray-200 dark:hover:bg-gray-700',
         isActiveConvo ? 'bg-gray-200 dark:bg-gray-700' : '',
         isSmallScreen ? 'h-12' : '',
       )}
@@ -119,7 +143,7 @@ export default function Conversation({ conversation, retainView, toggleNav, isLa
             ref={inputRef}
             type="text"
             className="w-full rounded bg-transparent p-0.5 text-sm leading-tight outline-none"
-            value={titleInput}
+            value={titleInput ?? ''}
             onChange={(e) => setTitleInput(e.target.value)}
             onKeyDown={handleKeyDown}
           />
@@ -141,24 +165,17 @@ export default function Conversation({ conversation, retainView, toggleNav, isLa
             'flex grow cursor-pointer items-center gap-2 overflow-hidden whitespace-nowrap break-all rounded-lg px-2 py-2',
             isActiveConvo ? 'bg-gray-200 dark:bg-gray-700' : '',
           )}
-          title={title}
+          title={title ?? ''}
         >
           <EndpointIcon
             conversation={conversation}
             endpointsConfig={endpointsConfig}
             size={20}
             context="menu-item"
           />
-          {!renaming && (
-            <div className="relative line-clamp-1 flex-1 grow overflow-hidden">{title}</div>
-          )}
+          <div className="relative line-clamp-1 flex-1 grow overflow-hidden">{title}</div>
           {isActiveConvo ? (
-            <div
-              className={cn(
-                'absolute bottom-0 right-0 top-0 w-20 rounded-r-lg bg-gradient-to-l',
-                !renaming ? 'from-gray-200 from-40% to-transparent dark:from-gray-700' : '',
-              )}
-            />
+            <div className="absolute bottom-0 right-0 top-0 w-20 rounded-r-lg bg-gradient-to-l" />
           ) : (
             <div className="absolute bottom-0 right-0 top-0 w-20 rounded-r-lg bg-gradient-to-l from-gray-50 from-0% to-transparent group-hover:from-gray-200 group-hover:from-40% dark:from-gray-850 dark:group-hover:from-gray-700" />
           )}
@@ -167,7 +184,9 @@ export default function Conversation({ conversation, retainView, toggleNav, isLa
       <div
         className={cn(
           'mr-2',
-          isPopoverActive || isActiveConvo ? 'flex' : 'hidden group-hover:flex',
+          isPopoverActive || isActiveConvo
+            ? 'flex'
+            : 'hidden group-focus-within:flex group-hover:flex',
         )}
       >
         <ConvoOptions

diff --git a/client/src/components/Conversations/ConvoOptions/ConvoOptions.tsx b/client/src/components/Conversations/ConvoOptions/ConvoOptions.tsx
@@ -1,12 +1,13 @@
-import { useState } from 'react';
+import { useState, useId } from 'react';
+import * as Ariakit from '@ariakit/react';
 import { Ellipsis, Share2, Archive, Pen, Trash } from 'lucide-react';
 import { useGetStartupConfig } from 'librechat-data-provider/react-query';
-import { Button } from '~/components/ui';
 import { useArchiveHandler } from './ArchiveButton';
 import { DropdownPopup } from '~/components/ui';
 import DeleteButton from './DeleteButton';
 import ShareButton from './ShareButton';
 import { useLocalize } from '~/hooks';
+import { cn } from '~/utils';
 
 export default function ConvoOptions({
   conversation,
@@ -57,27 +58,29 @@ export default function ConvoOptions({
     },
   ];
 
+  const menuId = useId();
+
   return (
     <>
       <DropdownPopup
         isOpen={isPopoverActive}
         setIsOpen={setIsPopoverActive}
         trigger={
-          <Button
+          <Ariakit.MenuButton
             id="conversation-menu-button"
-            aria-label="conversation-menu-button"
-            variant="link"
-            className="z-10 h-7 w-7 border-none p-0 transition-all duration-200 ease-in-out"
+            aria-label={localize('com_nav_convo_menu_options')}
+            className={cn(
+              'z-30 inline-flex h-7 w-7 items-center justify-center gap-2 rounded-md border-none p-0 text-sm font-medium transition-all duration-200 ease-in-out focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50',
+              isActiveConvo === true
+                ? 'opacity-100'
+                : 'opacity-0 focus:opacity-100 group-focus-within:opacity-100 group-hover:opacity-100 data-[open]:opacity-100',
+            )}
           >
             <Ellipsis className="icon-md text-text-secondary" />
-          </Button>
+          </Ariakit.MenuButton>
         }
         items={dropdownItems}
-        className={`${
-          isActiveConvo === true
-            ? 'opacity-100'
-            : 'opacity-0 focus:opacity-100 group-hover:opacity-100 data-[open]:opacity-100'
-        }`}
+        menuId={menuId}
       />
       {showShareDialog && (
         <ShareButton

diff --git a/client/src/components/Nav/NewChat.tsx b/client/src/components/Nav/NewChat.tsx
@@ -38,7 +38,7 @@ const NewChatButtonIcon = ({ conversation }: { conversation: TConversation | nul
         <ConvoIconURL preset={conversation} endpointIconURL={iconURL} context="nav" />
       ) : (
         <div className="shadow-stroke relative flex h-full items-center justify-center rounded-full bg-white text-black">
-          {endpoint && Icon && (
+          {endpoint && Icon != null && (
             <Icon
               size={41}
               context="nav"
@@ -82,7 +82,7 @@ export default function NewChat({
   return (
     <TooltipProvider delayDuration={250}>
       <Tooltip>
-        <div className="sticky left-0 right-0 top-0 z-20 bg-surface-primary-alt pt-3.5">
+        <div className="sticky left-0 right-0 top-0 z-50 bg-surface-primary-alt pt-3.5">
           <div className="pb-0.5 last:pb-0" style={{ transform: 'none' }}>
             <a
               href="/"
@@ -93,7 +93,7 @@ export default function NewChat({
               aria-label={localize('com_ui_new_chat')}
             >
               <NewChatButtonIcon conversation={conversation} />
-              <div className="text-token-text-primary grow overflow-hidden text-ellipsis whitespace-nowrap text-sm">
+              <div className="grow overflow-hidden text-ellipsis whitespace-nowrap text-sm text-text-primary">
                 {localize('com_ui_new_chat')}
               </div>
               <div className="flex gap-3">
@@ -102,7 +102,7 @@ export default function NewChat({
                     <button
                       id="nav-new-chat-btn"
                       aria-label="nav-new-chat-btn"
-                      className="text-token-text-primary"
+                      className="text-text-primary"
                     >
                       <NewChatIcon className="size-5" />
                     </button>