From 9d4eac672513e24f4ae3971dd1d1aa68f583b378 Mon Sep 17 00:00:00 2001
From: "google-labs-jules[bot]"
 <161369871+google-labs-jules[bot]@users.noreply.github.com>
Date: Thu, 19 Feb 2026 10:21:59 +0000
Subject: [PATCH] =?UTF-8?q?=F0=9F=8E=A8=20Palette:=20Standardize=20tooltip?=
 =?UTF-8?q?s=20and=20accessibility=20for=20icon-only=20buttons?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

This change improves the user experience by adding tooltips and ARIA labels to icon-only buttons across the header, chat panel, and mobile bar.

Key improvements:
- Enabled `TooltipProvider` globally in `app/layout.tsx`.
- Added `Tooltip` and `aria-label` to History, Calendar, and Usage buttons in `components/header.tsx`.
- Added `aria-label` to all mobile icon buttons in `components/mobile-icons-bar.tsx`.
- Added `Tooltip` and `aria-label` to New Chat, Attachment, and Clear Attachment buttons in `components/chat-panel.tsx`.
- Replaced legacy `title` attributes with consistent tooltips.

This ensures that the interface is more intuitive for desktop users and accessible for screen reader users.

Co-authored-by: ngoiyaeric <115367894+ngoiyaeric@users.noreply.github.com>
---
 .jules/palette.md               |  3 ++
 app/layout.tsx                  | 15 ++++---
 components/chat-panel.tsx       | 69 ++++++++++++++++++++-------------
 components/header.tsx           | 48 +++++++++++++++--------
 components/mobile-icons-bar.tsx | 12 +++---
 5 files changed, 93 insertions(+), 54 deletions(-)
 create mode 100644 .jules/palette.md

diff --git a/.jules/palette.md b/.jules/palette.md
new file mode 100644
index 00000000..6a95ecf9
--- /dev/null
+++ b/.jules/palette.md
@@ -0,0 +1,3 @@
+## 2025-05-23 - [Standardizing Icon Button Accessibility and Tooltips]
+**Learning:** Icon-only buttons without labels or tooltips create "mystery meat navigation" and are inaccessible to screen readers. Standardizing on `Tooltip` for visual labels and `aria-label` for parity ensures a consistent and accessible UX across desktop and mobile.
+**Action:** Always wrap new icon-only buttons in `Tooltip` (desktop) and ensure `aria-label` is present for all icon-only interactions.
diff --git a/app/layout.tsx b/app/layout.tsx
index b9ea46ea..e58d3d88 100644
--- a/app/layout.tsx
+++ b/app/layout.tsx
@@ -19,6 +19,7 @@ import { HistorySidebar } from '@/components/history-sidebar'
 import { MapLoadingProvider } from '@/components/map-loading-context';
 import ConditionalLottie from '@/components/conditional-lottie';
 import { MapProvider as MapContextProvider } from '@/components/map/map-context'
+import { TooltipProvider } from '@/components/ui/tooltip'
 
 const fontSans = FontSans({
   subsets: ['latin'],
@@ -109,12 +110,14 @@ export default function RootLayout({
                   >
                     <MapContextProvider>
                       <MapLoadingProvider>
-                        <Header />
-                        <ConditionalLottie />
-                        {children}
-                        <HistorySidebar />
-                        <Footer />
-                        <Toaster />
+                        <TooltipProvider>
+                          <Header />
+                          <ConditionalLottie />
+                          {children}
+                          <HistorySidebar />
+                          <Footer />
+                          <Toaster />
+                        </TooltipProvider>
                       </MapLoadingProvider>
                     </MapContextProvider>
                   </ThemeProvider>
diff --git a/components/chat-panel.tsx b/components/chat-panel.tsx
index ca2fbc6f..4be95e31 100644
--- a/components/chat-panel.tsx
+++ b/components/chat-panel.tsx
@@ -14,6 +14,7 @@ import { PartialRelated } from '@/lib/schema/related'
 import { getSuggestions } from '@/lib/actions/suggest'
 import { useMapData } from './map/map-data-context'
 import SuggestionsDropdown from './suggestions-dropdown'
+import { Tooltip, TooltipContent, TooltipTrigger } from '@/components/ui/tooltip'
 
 interface ChatPanelProps {
   messages: UIState
@@ -169,17 +170,22 @@ export const ChatPanel = forwardRef<ChatPanelRef, ChatPanelProps>(({ messages, i
           'fixed bottom-4 left-4 flex justify-start items-center pointer-events-none z-50'
         )}
       >
-        <Button
-          type="button"
-          variant={'ghost'}
-          size={'icon'}
-          className="rounded-full transition-all hover:scale-110 pointer-events-auto text-primary"
-          onClick={() => handleClear()}
-          data-testid="new-chat-button"
-          title="New Chat"
-        >
-          <Sprout size={28} className="fill-primary/20" />
-        </Button>
+        <Tooltip>
+          <TooltipTrigger asChild>
+            <Button
+              type="button"
+              variant={'ghost'}
+              size={'icon'}
+              className="rounded-full transition-all hover:scale-110 pointer-events-auto text-primary"
+              onClick={() => handleClear()}
+              data-testid="new-chat-button"
+              aria-label="New Chat"
+            >
+              <Sprout size={28} className="fill-primary/20" />
+            </Button>
+          </TooltipTrigger>
+          <TooltipContent>New Chat</TooltipContent>
+        </Tooltip>
       </div>
     )
   }
@@ -216,18 +222,24 @@ export const ChatPanel = forwardRef<ChatPanelRef, ChatPanelProps>(({ messages, i
             accept="text/plain,image/png,image/jpeg,image/webp"
           />
           {!isMobile && (
-            <Button
-              type="button"
-              variant={'ghost'}
-              size={'icon'}
-              className={cn(
-                'absolute top-1/2 transform -translate-y-1/2 left-3'
-              )}
-              onClick={handleAttachmentClick}
-              data-testid="desktop-attachment-button"
-            >
-              <Paperclip size={isMobile ? 18 : 20} />
-            </Button>
+            <Tooltip>
+              <TooltipTrigger asChild>
+                <Button
+                  type="button"
+                  variant={'ghost'}
+                  size={'icon'}
+                  className={cn(
+                    'absolute top-1/2 transform -translate-y-1/2 left-3'
+                  )}
+                  onClick={handleAttachmentClick}
+                  data-testid="desktop-attachment-button"
+                  aria-label="Attach File"
+                >
+                  <Paperclip size={isMobile ? 18 : 20} />
+                </Button>
+              </TooltipTrigger>
+              <TooltipContent>Attach File</TooltipContent>
+            </Tooltip>
           )}
           <Textarea
             ref={inputRef}
@@ -295,9 +307,14 @@ export const ChatPanel = forwardRef<ChatPanelRef, ChatPanelProps>(({ messages, i
             <span className="text-sm text-muted-foreground truncate max-w-xs">
               {selectedFile.name}
             </span>
-            <Button variant="ghost" size="icon" onClick={clearAttachment} data-testid="clear-attachment-button">
-              <X size={16} />
-            </Button>
+            <Tooltip>
+              <TooltipTrigger asChild>
+                <Button variant="ghost" size="icon" onClick={clearAttachment} data-testid="clear-attachment-button" aria-label="Clear attachment">
+                  <X size={16} />
+                </Button>
+              </TooltipTrigger>
+              <TooltipContent>Clear attachment</TooltipContent>
+            </Tooltip>
           </div>
         </div>
       )}
diff --git a/components/header.tsx b/components/header.tsx
index fd80bc44..9bd3eb71 100644
--- a/components/header.tsx
+++ b/components/header.tsx
@@ -20,6 +20,7 @@ import { useUsageToggle } from './usage-toggle-context'
 import { useProfileToggle } from './profile-toggle-context'
 import { useHistoryToggle } from './history-toggle-context'
 import { useState, useEffect } from 'react'
+import { Tooltip, TooltipContent, TooltipTrigger } from '@/components/ui/tooltip'
 
 export const Header = () => {
   const { toggleCalendar } = useCalendarToggle()
@@ -52,15 +53,20 @@ export const Header = () => {
       </div>
       
       <div className="absolute left-1 flex items-center">
-        <Button variant="ghost" size="icon" onClick={toggleHistory} data-testid="logo-history-toggle">
-          <Image
-            src="/images/logo.svg"
-            alt="Logo"
-            width={20}
-            height={20}
-            className="h-5 w-auto"
-          />
-        </Button>
+        <Tooltip>
+          <TooltipTrigger asChild>
+            <Button variant="ghost" size="icon" onClick={toggleHistory} data-testid="logo-history-toggle" aria-label="Toggle history">
+              <Image
+                src="/images/logo.svg"
+                alt="Logo"
+                width={20}
+                height={20}
+                className="h-5 w-auto"
+              />
+            </Button>
+          </TooltipTrigger>
+          <TooltipContent>History</TooltipContent>
+        </Tooltip>
         <h1 className="text-2xl font-poppins font-semibold text-primary">
           QCX
         </h1>
@@ -71,15 +77,25 @@ export const Header = () => {
         
         <MapToggle />
         
-        <Button variant="ghost" size="icon" onClick={toggleCalendar} title="Open Calendar" data-testid="calendar-toggle">
-          <CalendarDays className="h-[1.2rem] w-[1.2rem]" />
-        </Button>
+        <Tooltip>
+          <TooltipTrigger asChild>
+            <Button variant="ghost" size="icon" onClick={toggleCalendar} data-testid="calendar-toggle" aria-label="Open Calendar">
+              <CalendarDays className="h-[1.2rem] w-[1.2rem]" />
+            </Button>
+          </TooltipTrigger>
+          <TooltipContent>Calendar</TooltipContent>
+        </Tooltip>
         
         <div id="header-search-portal" className="contents" />
         
-        <Button variant="ghost" size="icon" onClick={handleUsageToggle}>
-          <TentTree className="h-[1.2rem] w-[1.2rem]" />
-        </Button>
+        <Tooltip>
+          <TooltipTrigger asChild>
+            <Button variant="ghost" size="icon" onClick={handleUsageToggle} aria-label="Usage">
+              <TentTree className="h-[1.2rem] w-[1.2rem]" />
+            </Button>
+          </TooltipTrigger>
+          <TooltipContent>Usage</TooltipContent>
+        </Tooltip>
         
         <ModeToggle />
         
@@ -89,7 +105,7 @@ export const Header = () => {
       {/* Mobile menu buttons */}
       <div className="flex md:hidden gap-2">
         
-        <Button variant="ghost" size="icon" onClick={handleUsageToggle}>
+        <Button variant="ghost" size="icon" onClick={handleUsageToggle} aria-label="Usage">
           <TentTree className="h-[1.2rem] w-[1.2rem]" />
         </Button>
         <ProfileToggle/>
diff --git a/components/mobile-icons-bar.tsx b/components/mobile-icons-bar.tsx
index d0db2cfa..368f5a50 100644
--- a/components/mobile-icons-bar.tsx
+++ b/components/mobile-icons-bar.tsx
@@ -37,26 +37,26 @@ export const MobileIconsBar: React.FC<MobileIconsBarProps> = ({ onAttachmentClic
 
   return (
     <div className="mobile-icons-bar-content">
-      <Button variant="ghost" size="icon" onClick={handleNewChat} data-testid="mobile-new-chat-button">
+      <Button variant="ghost" size="icon" onClick={handleNewChat} data-testid="mobile-new-chat-button" aria-label="New Chat">
         <Plus className="h-[1.2rem] w-[1.2rem]" />
       </Button>
       <ProfileToggle />
       <MapToggle />
-      <Button variant="ghost" size="icon" onClick={toggleCalendar} title="Open Calendar" data-testid="mobile-calendar-button">
+      <Button variant="ghost" size="icon" onClick={toggleCalendar} aria-label="Open Calendar" data-testid="mobile-calendar-button">
         <CalendarDays className="h-[1.2rem] w-[1.2rem] transition-all rotate-0 scale-100" />
       </Button>
-      <Button variant="ghost" size="icon" data-testid="mobile-search-button">
+      <Button variant="ghost" size="icon" data-testid="mobile-search-button" aria-label="Search">
         <Search className="h-[1.2rem] w-[1.2rem] transition-all rotate-0 scale-100" />
       </Button>
       <a href="https://buy.stripe.com/14A3cv7K72TR3go14Nasg02" target="_blank" rel="noopener noreferrer">
-        <Button variant="ghost" size="icon">
+        <Button variant="ghost" size="icon" aria-label="Purchase Credits">
           <TentTree className="h-[1.2rem] w-[1.2rem] transition-all rotate-0 scale-100" />
         </Button>
       </a>
-      <Button variant="ghost" size="icon" onClick={onAttachmentClick} data-testid="mobile-attachment-button">
+      <Button variant="ghost" size="icon" onClick={onAttachmentClick} data-testid="mobile-attachment-button" aria-label="Attach File">
         <Paperclip className="h-[1.2rem] w-[1.2rem] transition-all rotate-0 scale-100" />
       </Button>
-      <Button variant="ghost" size="icon" data-testid="mobile-submit-button" onClick={onSubmitClick}>
+      <Button variant="ghost" size="icon" data-testid="mobile-submit-button" onClick={onSubmitClick} aria-label="Send Message">
         <ArrowRight className="h-[1.2rem] w-[1.2rem] transition-all rotate-0 scale-100" />
       </Button>
       <History location="header" />