fix: role and aria-label

danny-avila · Aug 16, 2024 · 8dc3d82 · 8dc3d82
1 parent 0ba08b1
commit 8dc3d82
Show file tree

Hide file tree

Showing 3 changed files with 9 additions and 3 deletions.
diff --git a/client/src/components/Nav/Nav.tsx b/client/src/components/Nav/Nav.tsx
@@ -9,6 +9,7 @@ import {
   useLocalStorage,
   useNavScrolling,
   useConversations,
+  useLocalize,
 } from '~/hooks';
 import { useConversationsInfiniteQuery } from '~/data-provider';
 import { TooltipProvider, Tooltip } from '~/components/ui';
@@ -24,6 +25,7 @@ import { cn } from '~/utils';
 import store from '~/store';
 
 const Nav = ({ navVisible, setNavVisible }) => {
+  const localize = useLocalize();
   const { conversationId } = useParams();
   const { isAuthenticated } = useAuthContext();
 
@@ -141,7 +143,7 @@ const Nav = ({ navVisible, setNavVisible }) => {
                 >
                   <nav
                     id="chat-history-nav"
-                    aria-label="chat-history-nav"
+                    aria-label={localize('com_ui_chat_history')}
                     className="flex h-full w-full flex-col px-3 pb-3.5"
                   >
                     <div

diff --git a/client/src/components/SidePanel/SidePanel.tsx b/client/src/components/SidePanel/SidePanel.tsx
@@ -11,7 +11,7 @@ import type { TEndpointsConfig } from 'librechat-data-provider';
 import { ResizableHandleAlt, ResizablePanel, ResizablePanelGroup } from '~/components/ui/Resizable';
 import { TooltipProvider, Tooltip } from '~/components/ui/Tooltip';
 import useSideNavLinks from '~/hooks/Nav/useSideNavLinks';
-import { useMediaQuery, useLocalStorage } from '~/hooks';
+import { useMediaQuery, useLocalStorage, useLocalize } from '~/hooks';
 import NavToggle from '~/components/Nav/NavToggle';
 import { useChatContext } from '~/Providers';
 import Switcher from './Switcher';
@@ -36,6 +36,7 @@ const SidePanel = ({
   navCollapsedSize = 3,
   children,
 }: SidePanelProps) => {
+  const localize = useLocalize();
   const [isHovering, setIsHovering] = useState(false);
   const [minSize, setMinSize] = useState(defaultMinSize);
   const [newUser, setNewUser] = useLocalStorage('newUser', true);
@@ -173,7 +174,8 @@ const SidePanel = ({
           <ResizablePanel
             tagName="nav"
             id="controls-nav"
-            aria-label="controls-nav"
+            aria-label={localize('com_ui_controls')}
+            role="region"
             collapsedSize={collapsedSize}
             defaultSize={defaultLayout[1]}
             collapsible={true}

diff --git a/client/src/localization/languages/Eng.ts b/client/src/localization/languages/Eng.ts
@@ -220,6 +220,8 @@ export default {
   com_ui_import_conversation_file_type_error: 'Unsupported import type',
   com_ui_confirm_action: 'Confirm Action',
   com_ui_chat: 'Chat',
+  com_ui_chat_history: 'Chat History',
+  com_ui_controls: 'Controls',
   com_ui_dashboard: 'Dashboard',
   com_ui_chats: 'chats',
   com_ui_avatar: 'Avatar',