From 93cf7bab02ec70ac4fcf38e05759c7cc565cbb77 Mon Sep 17 00:00:00 2001
From: Akash <developer.akash8@gmail.com>
Date: Fri, 16 Aug 2024 12:42:09 +0530
Subject: [PATCH] =?UTF-8?q?=F0=9F=A4=B2=20a11y:=20Update=20Chat=20History?=
 =?UTF-8?q?=20`aria-label`=20&=20Controls=20`role`=20(#3604)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 client/src/components/Nav/Nav.tsx             | 4 +++-
 client/src/components/SidePanel/SidePanel.tsx | 6 ++++--
 client/src/localization/languages/Eng.ts      | 2 ++
 3 files changed, 9 insertions(+), 3 deletions(-)

diff --git a/client/src/components/Nav/Nav.tsx b/client/src/components/Nav/Nav.tsx
index 5a7a9d5bf..ec15e681a 100644
--- 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
index d63592034..8f3fb24f3 100644
--- 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
index 34cbe3dcb..f4a900f62 100644
--- 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',