From 77a21719fda0c019b18655e22b8ba848d2a0644a Mon Sep 17 00:00:00 2001
From: Marco Beretta <81851188+berry-13@users.noreply.github.com>
Date: Tue, 15 Apr 2025 04:40:07 +0200
Subject: [PATCH] =?UTF-8?q?=E2=8C=A8=EF=B8=8F=20a11y:=20enhance=20accessib?=
 =?UTF-8?q?ility=20&=20visual=20consistency=20(#6866)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* a11y: TemporaryChat label

* style: ChatForm badges update
---
 client/src/components/Chat/Input/MCPSelect.tsx | 2 +-
 client/src/components/Chat/TemporaryChat.tsx   | 1 +
 client/src/components/ui/CheckboxButton.tsx    | 4 ++--
 3 files changed, 4 insertions(+), 3 deletions(-)

diff --git a/client/src/components/Chat/Input/MCPSelect.tsx b/client/src/components/Chat/Input/MCPSelect.tsx
index 672713f6d6..4080e8e2b3 100644
--- a/client/src/components/Chat/Input/MCPSelect.tsx
+++ b/client/src/components/Chat/Input/MCPSelect.tsx
@@ -115,7 +115,7 @@ function MCPSelect({ conversationId }: { conversationId?: string | null }) {
       className="badge-icon min-w-fit"
       selectIcon={<MCPIcon className="icon-md text-text-primary" />}
       selectItemsClassName="border border-blue-600/50 bg-blue-500/10 hover:bg-blue-700/10"
-      selectClassName="group relative inline-flex items-center justify-center md:justify-start gap-1.5 rounded-full border border-border-medium text-sm font-medium transition-shadow md:w-full size-9 p-2 md:p-3 bg-surface-chat shadow-sm hover:bg-surface-hover hover:shadow-md active:shadow-inner"
+      selectClassName="group relative inline-flex items-center justify-center md:justify-start gap-1.5 rounded-full border border-border-medium text-sm font-medium transition-all md:w-full size-9 p-2 md:p-3 bg-transparent shadow-sm hover:bg-surface-hover hover:shadow-md active:shadow-inner"
     />
   );
 }
diff --git a/client/src/components/Chat/TemporaryChat.tsx b/client/src/components/Chat/TemporaryChat.tsx
index 3f40c5fedd..13c05bee6c 100644
--- a/client/src/components/Chat/TemporaryChat.tsx
+++ b/client/src/components/Chat/TemporaryChat.tsx
@@ -43,6 +43,7 @@ export function TemporaryChat() {
           render={
             <motion.button
               onClick={handleBadgeToggle}
+              aria-label={localize(temporaryBadge.label)}
               className={cn(
                 'inline-flex size-10 flex-shrink-0 items-center justify-center rounded-lg border border-border-light text-text-primary transition-all ease-in-out hover:bg-surface-tertiary',
                 isTemporary
diff --git a/client/src/components/ui/CheckboxButton.tsx b/client/src/components/ui/CheckboxButton.tsx
index 988340c061..8b6cb1f7b4 100644
--- a/client/src/components/ui/CheckboxButton.tsx
+++ b/client/src/components/ui/CheckboxButton.tsx
@@ -41,8 +41,8 @@ export default function CheckboxButton({
         // Base styling from MultiSelect's selectClassName
         'group relative inline-flex items-center justify-center gap-1.5',
         'rounded-full border border-border-medium text-sm font-medium',
-        'size-9 p-2 transition-shadow md:w-full md:p-3',
-        'bg-surface-chat shadow-sm hover:bg-surface-hover hover:shadow-md active:shadow-inner',
+        'size-9 p-2 transition-all md:w-full md:p-3',
+        'bg-transparent shadow-sm hover:bg-surface-hover hover:shadow-md active:shadow-inner',
 
         // Checked state styling
         isChecked && isCheckedClassName && isCheckedClassName,