From b9197f90c69e0184d8af7eb65c9400463d3a0228 Mon Sep 17 00:00:00 2001
From: Vesna Tan <tanvezi@gmail.com>
Date: Thu, 5 Sep 2024 14:30:17 -0400
Subject: [PATCH] =?UTF-8?q?=F0=9F=91=90=20a11y:=20Misc.=20Improvements=20(?=
 =?UTF-8?q?#3910)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* fix focus for cancel button in convo delete modal window #3829

* add aria-hidden and aria-label to X and Check svg/button respectively and updated OGDialogClose focus color

* update rename, newchat, newchat icon, ConvoOptions icon
---
 client/src/components/Conversations/Convo.tsx         | 11 +++++++----
 .../Conversations/ConvoOptions/ConvoOptions.tsx       |  2 +-
 client/src/components/Nav/NewChat.tsx                 |  2 +-
 client/src/components/svg/NewChatIcon.tsx             |  1 +
 client/src/components/ui/OGDialogTemplate.tsx         |  2 +-
 5 files changed, 11 insertions(+), 7 deletions(-)

diff --git a/client/src/components/Conversations/Convo.tsx b/client/src/components/Conversations/Convo.tsx
index 2dd608bc92a..ab7b38b5ee3 100644
--- a/client/src/components/Conversations/Convo.tsx
+++ b/client/src/components/Conversations/Convo.tsx
@@ -14,6 +14,7 @@ import { useToastContext } from '~/Providers';
 import { ConvoOptions } from './ConvoOptions';
 import { cn } from '~/utils';
 import store from '~/store';
+import { useLocalize } from '~/hooks'
 
 type KeyEvent = KeyboardEvent<HTMLInputElement>;
 
@@ -44,6 +45,7 @@ export default function Conversation({
   const [renaming, setRenaming] = useState(false);
   const [isPopoverActive, setIsPopoverActive] = useState(false);
   const isSmallScreen = useMediaQuery('(max-width: 768px)');
+  const localize = useLocalize();
 
   const clickHandler = async (event: MouseEvent<HTMLAnchorElement>) => {
     if (event.button === 0 && (event.ctrlKey || event.metaKey)) {
@@ -146,13 +148,14 @@ export default function Conversation({
             value={titleInput ?? ''}
             onChange={(e) => setTitleInput(e.target.value)}
             onKeyDown={handleKeyDown}
+            aria-label={`${localize('com_ui_rename')} ${localize('com_ui_chat')}`}
           />
           <div className="flex gap-1">
-            <button onClick={cancelRename}>
-              <X className="transition-colors h-4 w-4 duration-200 ease-in-out hover:opacity-70" />
+            <button onClick={cancelRename} aria-label='cancel new name'>
+              <X aria-hidden={true} className="transition-colors h-4 w-4 duration-200 ease-in-out hover:opacity-70" />
             </button>
-            <button onClick={onRename}>
-              <Check className="transition-colors h-4 w-4 duration-200 ease-in-out hover:opacity-70" />
+            <button onClick={onRename} aria-label='submit new name'>
+              <Check aria-hidden={true} className="transition-colors h-4 w-4 duration-200 ease-in-out hover:opacity-70" />
             </button>
           </div>
         </div>
diff --git a/client/src/components/Conversations/ConvoOptions/ConvoOptions.tsx b/client/src/components/Conversations/ConvoOptions/ConvoOptions.tsx
index d3bfc276632..3b3dcb40b37 100644
--- a/client/src/components/Conversations/ConvoOptions/ConvoOptions.tsx
+++ b/client/src/components/Conversations/ConvoOptions/ConvoOptions.tsx
@@ -76,7 +76,7 @@ export default function ConvoOptions({
                 : '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" />
+            <Ellipsis className="icon-md text-text-secondary" aria-hidden={true}/>
           </Ariakit.MenuButton>
         }
         items={dropdownItems}
diff --git a/client/src/components/Nav/NewChat.tsx b/client/src/components/Nav/NewChat.tsx
index 5646706d502..8766924a4af 100644
--- a/client/src/components/Nav/NewChat.tsx
+++ b/client/src/components/Nav/NewChat.tsx
@@ -101,7 +101,7 @@ export default function NewChat({
                   <TooltipTrigger asChild>
                     <button
                       id="nav-new-chat-btn"
-                      aria-label="nav-new-chat-btn"
+                      aria-label={localize('com_ui_new_chat')}
                       className="text-text-primary"
                     >
                       <NewChatIcon className="size-5" />
diff --git a/client/src/components/svg/NewChatIcon.tsx b/client/src/components/svg/NewChatIcon.tsx
index 59bc7ac1ece..841ad1aeed0 100644
--- a/client/src/components/svg/NewChatIcon.tsx
+++ b/client/src/components/svg/NewChatIcon.tsx
@@ -8,6 +8,7 @@ export default function NewChatIcon({ className = '' }: { className?: string })
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
       className={cn('text-black dark:text-white', className)}
+      aria-hidden={true}
     >
       <path
         fillRule="evenodd"
diff --git a/client/src/components/ui/OGDialogTemplate.tsx b/client/src/components/ui/OGDialogTemplate.tsx
index 10bd8e112a7..ef51b4e878e 100644
--- a/client/src/components/ui/OGDialogTemplate.tsx
+++ b/client/src/components/ui/OGDialogTemplate.tsx
@@ -71,7 +71,7 @@ const OGDialogTemplate = forwardRef((props: DialogTemplateProps, ref: Ref<HTMLDi
         <div>{leftButtons ? leftButtons : null}</div>
         <div className="flex h-auto gap-3">
           {showCancelButton && (
-            <OGDialogClose className="btn btn-neutral border-token-border-light relative rounded-lg text-sm">
+            <OGDialogClose className="btn btn-neutral border-token-border-light relative rounded-lg text-sm ring-offset-2 dark:ring-offset-0 focus:ring-2 focus:ring-black">
               {Cancel}
             </OGDialogClose>
           )}