⌨️ a11y: enhance accessibility & visual consistency (danny-avila#6866)

* a11y: TemporaryChat label

* style: ChatForm badges update

Author: berry-13

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"
     />
   );
 }

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

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,