From 7f50d2f7c080c12a537a902da9364335d9b6a9d2 Mon Sep 17 00:00:00 2001
From: Vesna Tan <tanvezi@gmail.com>
Date: Fri, 16 Aug 2024 03:27:56 -0400
Subject: [PATCH] =?UTF-8?q?=F0=9F=A4=B2=20a11y:=20Add=20landmark=20to=20fo?=
 =?UTF-8?q?oter,=20labels=20updates,=20and=20sidebar=20text=20contrast=20(?=
 =?UTF-8?q?#3630)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* add landmark contentinfo to footer

* fix aria-label ai model menuitem for issue #3587

* changed group/today text color to #535353
---
 client/src/components/Auth/Footer.tsx                 | 2 +-
 client/src/components/Chat/Footer.tsx                 | 1 +
 client/src/components/Chat/Menus/Models/ModelSpec.tsx | 3 ++-
 client/src/components/Chat/Menus/UI/MenuItem.tsx      | 2 +-
 client/src/components/Conversations/Conversations.tsx | 2 +-
 5 files changed, 6 insertions(+), 4 deletions(-)

diff --git a/client/src/components/Auth/Footer.tsx b/client/src/components/Auth/Footer.tsx
index 4cda32feb8..8d79717683 100644
--- a/client/src/components/Auth/Footer.tsx
+++ b/client/src/components/Auth/Footer.tsx
@@ -32,7 +32,7 @@ function Footer({ startupConfig }: { startupConfig: TStartupConfig | null | unde
   );
 
   return (
-    <div className="align-end m-4 flex justify-center gap-2">
+    <div className="align-end m-4 flex justify-center gap-2" role="contentinfo">
       {privacyPolicyRender}
       {privacyPolicyRender && termsOfServiceRender && (
         <div className="border-r-[1px] border-gray-300 dark:border-gray-600" />
diff --git a/client/src/components/Chat/Footer.tsx b/client/src/components/Chat/Footer.tsx
index af170a96fc..11667ccfb5 100644
--- a/client/src/components/Chat/Footer.tsx
+++ b/client/src/components/Chat/Footer.tsx
@@ -84,6 +84,7 @@ export default function Footer({ className }: { className?: string }) {
         className ||
         'relative flex items-center justify-center gap-2 px-2 py-2 text-center text-xs text-gray-600 dark:text-gray-300 md:px-[60px]'
       }
+      role="contentinfo"
     >
       {footerElements.map((contentRender, index) => {
         const isLastElement = index === footerElements.length - 1;
diff --git a/client/src/components/Chat/Menus/Models/ModelSpec.tsx b/client/src/components/Chat/Menus/Models/ModelSpec.tsx
index d268d44125..5b5e8fe009 100644
--- a/client/src/components/Chat/Menus/Models/ModelSpec.tsx
+++ b/client/src/components/Chat/Menus/Models/ModelSpec.tsx
@@ -56,9 +56,10 @@ const MenuItem: FC<MenuItemProps> = ({
       <div
         role="menuitem"
         className="group m-1.5 flex cursor-pointer gap-2 rounded px-1 py-2.5 !pr-3 text-sm !opacity-100 hover:bg-black/5 focus:ring-0 radix-disabled:pointer-events-none radix-disabled:opacity-50 dark:hover:bg-white/5"
-        tabIndex={-1}
+        tabIndex={0}
         {...rest}
         onClick={clickHandler}
+        aria-label={title}
       >
         <div className="flex grow items-center justify-between gap-2">
           <div>
diff --git a/client/src/components/Chat/Menus/UI/MenuItem.tsx b/client/src/components/Chat/Menus/UI/MenuItem.tsx
index b988765968..65a3847a96 100644
--- a/client/src/components/Chat/Menus/UI/MenuItem.tsx
+++ b/client/src/components/Chat/Menus/UI/MenuItem.tsx
@@ -33,7 +33,7 @@ const MenuItem: FC<MenuItemProps> = ({
   return (
     <div
       role="menuitem"
-      aria-label={`menu item for ${title} ${description}`}
+      aria-label={title}
       data-testid="chat-menu-item"
       className={cn(
         'group m-1.5 flex cursor-pointer gap-2 rounded px-5 py-2.5 !pr-3 text-sm !opacity-100 hover:bg-black/5 focus:ring-0 radix-disabled:pointer-events-none radix-disabled:opacity-50 dark:hover:bg-gray-600 md:min-w-[240px]',
diff --git a/client/src/components/Conversations/Conversations.tsx b/client/src/components/Conversations/Conversations.tsx
index 8aad82a76d..63b458f618 100644
--- a/client/src/components/Conversations/Conversations.tsx
+++ b/client/src/components/Conversations/Conversations.tsx
@@ -34,7 +34,7 @@ const Conversations = ({
             <div key={groupName}>
               <div
                 style={{
-                  color: '#aaa',
+                  color: '#535353',
                   fontSize: '0.7rem',
                   marginTop: '20px',
                   marginBottom: '5px',