♿ fix: Improve Accessibility in Endpoints Menu/Navigation (#5123)

* fix: prevent mobile nav toggle from being focusable when not in mobile view, add types to <NavToggle/>

* fix: appropriate endpoint menu item role, add up/down focus mgmt, ensure set api key is focusable and accessible

* fix: localize link titles and update text color for improved accessibility in Nav component

client/src/components/Chat/Menus/Models/MenuButton.tsx

@@ -36,7 +36,6 @@ export default function MenuButton({
         aria-haspopup="listbox"
         aria-expanded={isExpanded}
         aria-controls="llm-menu"
-        aria-activedescendant={isExpanded ? 'selected-llm' : undefined}
         onClick={() => setIsExpanded(!isExpanded)}
       >
         {selected && selected.showIconInHeader === true && (

client/src/components/Chat/Menus/Models/ModelSpec.tsx

@@ -33,10 +33,10 @@ const MenuItem: FC<MenuItemProps> = ({
   const [isDialogOpen, setDialogOpen] = useState(false);
   const { getExpiry } = useUserKey(endpoint ?? '');
   const localize = useLocalize();
-  const expiryTime = getExpiry();
+  const expiryTime = getExpiry() ?? '';
 
   const clickHandler = () => {
-    if (expiryTime == null) {
+    if (expiryTime) {
       setDialogOpen(true);
     }
     if (onClick) {
@@ -83,10 +83,12 @@ const MenuItem: FC<MenuItemProps> = ({
             {userProvidesKey ? (
               <div className="text-token-text-primary" key={`set-key-${endpoint}`}>
                 <button
+                  tabIndex={0}
+                  aria-label={`${localize('com_endpoint_config_key')} for ${title}`}
                   className={cn(
-                    'invisible flex gap-x-1 group-hover:visible',
+                    'invisible flex gap-x-1 group-focus-within:visible group-hover:visible',
                     selected ? 'visible' : '',
-                    expiryTime != null
+                    expiryTime
                       ? 'w-full rounded-lg p-2 hover:bg-gray-200 dark:hover:bg-gray-900'
                       : '',
                   )}
@@ -95,16 +97,23 @@ const MenuItem: FC<MenuItemProps> = ({
                     e.stopPropagation();
                     setDialogOpen(true);
                   }}
+                  onKeyDown={(e) => {
+                    if (e.key === 'Enter' || e.key === ' ') {
+                      e.preventDefault();
+                      e.stopPropagation();
+                      setDialogOpen(true);
+                    }
+                  }}
                 >
                   <div
                     className={cn(
-                      'invisible group-hover:visible',
-                      expiryTime != null ? 'text-xs' : '',
+                      'invisible group-focus-within:visible group-hover:visible',
+                      expiryTime ? 'text-xs' : '',
                     )}
                   >
                     {localize('com_endpoint_config_key')}
                   </div>
-                  <Settings className={cn(expiryTime != null ? 'icon-sm' : 'icon-md stroke-1')} />
+                  <Settings className={cn(expiryTime ? 'icon-sm' : 'icon-md stroke-1')} />
                 </button>
               </div>
             ) : null}

client/src/components/Chat/Menus/Models/ModelSpecsMenu.tsx

@@ -1,9 +1,10 @@
-import { useMemo } from 'react';
 import { useRecoilValue } from 'recoil';
+import { useMemo, useCallback, useRef } from 'react';
 import { Content, Portal, Root } from '@radix-ui/react-popover';
 import { useGetEndpointsQuery } from 'librechat-data-provider/react-query';
 import { EModelEndpoint, isAssistantsEndpoint } from 'librechat-data-provider';
 import type { TModelSpec, TConversation, TEndpointsConfig } from 'librechat-data-provider';
+import type { KeyboardEvent } from 'react';
 import { useChatContext, useAssistantsMapContext } from '~/Providers';
 import { useDefaultConvo, useNewConvo, useLocalize } from '~/hooks';
 import { getConvoSwitchLogic, getModelSpecIconURL } from '~/utils';
@@ -88,6 +89,39 @@ export default function ModelSpecsMenu({ modelSpecs }: { modelSpecs?: TModelSpec
     return spec;
   }, [modelSpecs, conversation?.spec]);
 
+  const menuRef = useRef<HTMLDivElement>(null);
+
+  const handleKeyDown = useCallback((event: KeyboardEvent) => {
+    const menuItems = menuRef.current?.querySelectorAll('[role="option"]');
+    if (!menuItems) {
+      return;
+    }
+    if (!menuItems.length) {
+      return;
+    }
+
+    const currentIndex = Array.from(menuItems).findIndex((item) => item === document.activeElement);
+
+    switch (event.key) {
+      case 'ArrowDown':
+        event.preventDefault();
+        if (currentIndex < menuItems.length - 1) {
+          (menuItems[currentIndex + 1] as HTMLElement).focus();
+        } else {
+          (menuItems[0] as HTMLElement).focus();
+        }
+        break;
+      case 'ArrowUp':
+        event.preventDefault();
+        if (currentIndex > 0) {
+          (menuItems[currentIndex - 1] as HTMLElement).focus();
+        } else {
+          (menuItems[menuItems.length - 1] as HTMLElement).focus();
+        }
+        break;
+    }
+  }, []);
+
   return (
     <Root>
       <MenuButton
@@ -114,6 +148,8 @@ export default function ModelSpecsMenu({ modelSpecs }: { modelSpecs?: TModelSpec
               align="start"
               id="llm-menu"
               role="listbox"
+              ref={menuRef}
+              onKeyDown={handleKeyDown}
               aria-label={localize('com_ui_llms_available')}
               className="models-scrollbar mt-2 max-h-[65vh] min-w-[340px] max-w-xs overflow-y-auto rounded-lg border border-gray-100 bg-white shadow-lg dark:border-gray-700 dark:bg-gray-700 dark:text-white lg:max-h-[75vh]"
             >