From d096c281baae8fefa98b983bfc3afc9e3213965d Mon Sep 17 00:00:00 2001
From: Vesna Tan <tanvezi@gmail.com>
Date: Thu, 19 Sep 2024 20:32:04 -0400
Subject: [PATCH] =?UTF-8?q?=F0=9F=91=90=20a11y:=20New=20Chat=20button=20-?=
 =?UTF-8?q?=20focus,=20mobile=20label,=20collapsed=20sidebar=20label=20(#4?=
 =?UTF-8?q?069)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 client/src/components/Chat/Menus/HeaderNewChat.tsx | 6 ++++--
 client/src/components/Conversations/Convo.tsx      | 4 ++--
 client/src/components/Nav/MobileNav.tsx            | 6 ++++--
 3 files changed, 10 insertions(+), 6 deletions(-)

diff --git a/client/src/components/Chat/Menus/HeaderNewChat.tsx b/client/src/components/Chat/Menus/HeaderNewChat.tsx
index 5ccf4f35bc..5a9fc403a7 100644
--- a/client/src/components/Chat/Menus/HeaderNewChat.tsx
+++ b/client/src/components/Chat/Menus/HeaderNewChat.tsx
@@ -1,18 +1,20 @@
 import { NewChatIcon } from '~/components/svg';
 import { useChatContext } from '~/Providers';
-import { useMediaQuery } from '~/hooks';
+import { useMediaQuery, useLocalize } from '~/hooks';
 
 export default function HeaderNewChat() {
   const { newConversation } = useChatContext();
   const isSmallScreen = useMediaQuery('(max-width: 768px)');
+  const localize = useLocalize();
   if (isSmallScreen) {
     return null;
   }
   return (
     <button
       data-testid="wide-header-new-chat-button"
+      aria-label={localize("com_ui_new_chat")}
       type="button"
-      className="btn btn-neutral btn-small border-token-border-medium relative ml-2 flex hidden h-9 w-9 items-center justify-center whitespace-nowrap rounded-lg rounded-lg border focus:ring-0 focus:ring-offset-0 md:flex"
+      className="btn btn-neutral btn-small border-token-border-medium relative ml-2 flex hidden h-9 w-9 items-center justify-center whitespace-nowrap rounded-lg rounded-lg border focus:border-black-500 dark:focus:border-white-500 md:flex"
       onClick={() => newConversation()}
     >
       <div className="flex w-full items-center justify-center gap-2">
diff --git a/client/src/components/Conversations/Convo.tsx b/client/src/components/Conversations/Convo.tsx
index ab7b38b5ee..9b6f504b5e 100644
--- a/client/src/components/Conversations/Convo.tsx
+++ b/client/src/components/Conversations/Convo.tsx
@@ -151,10 +151,10 @@ export default function Conversation({
             aria-label={`${localize('com_ui_rename')} ${localize('com_ui_chat')}`}
           />
           <div className="flex gap-1">
-            <button onClick={cancelRename} aria-label='cancel new name'>
+            <button onClick={cancelRename} aria-label={`${localize('com_ui_cancel')} ${localize('com_ui_rename')}`}>
               <X aria-hidden={true} className="transition-colors h-4 w-4 duration-200 ease-in-out hover:opacity-70" />
             </button>
-            <button onClick={onRename} aria-label='submit new name'>
+            <button onClick={onRename} aria-label={`${localize('com_ui_submit')} ${localize('com_ui_rename')}`}>
               <Check aria-hidden={true} className="transition-colors h-4 w-4 duration-200 ease-in-out hover:opacity-70" />
             </button>
           </div>
diff --git a/client/src/components/Nav/MobileNav.tsx b/client/src/components/Nav/MobileNav.tsx
index 7845a0fdb1..d325842487 100644
--- a/client/src/components/Nav/MobileNav.tsx
+++ b/client/src/components/Nav/MobileNav.tsx
@@ -19,7 +19,8 @@ export default function MobileNav({
       <button
         type="button"
         data-testid="mobile-header-new-chat-button"
-        className="inline-flex size-10 items-center justify-center rounded-full hover:bg-surface-hover"
+        aria-label={localize('com_nav_open_sidebar')}
+        className="m-1 inline-flex size-10 items-center justify-center rounded-full hover:bg-surface-hover"
         onClick={() =>
           setNavVisible((prev) => {
             localStorage.setItem('navVisible', JSON.stringify(!prev));
@@ -49,7 +50,8 @@ export default function MobileNav({
       </h1>
       <button
         type="button"
-        className="inline-flex size-10 items-center justify-center rounded-full hover:bg-surface-hover"
+        aria-label={localize('com_ui_new_chat')}
+        className="m-1 inline-flex size-10 items-center justify-center rounded-full hover:bg-surface-hover"
         onClick={() => newConversation()}
       >
         <svg