👐 a11y: Misc. Improvements (#3910)

* 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

@@ -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}>
+            <button onClick={cancelRename} aria-label='cancel new name'>
-              <X className="transition-colors h-4 w-4 duration-200 ease-in-out hover:opacity-70" />
+              <X aria-hidden={true} className="transition-colors h-4 w-4 duration-200 ease-in-out hover:opacity-70" />
             </button>
-            <button onClick={onRename}>
+            <button onClick={onRename} aria-label='submit new name'>
-              <Check className="transition-colors h-4 w-4 duration-200 ease-in-out hover:opacity-70" />
+              <Check aria-hidden={true} className="transition-colors h-4 w-4 duration-200 ease-in-out hover:opacity-70" />
             </button>
           </div>
         </div>

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}

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" />

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"

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>
           )}