From e3cd742bc59767e258186d5ded41228e4edc6bb4 Mon Sep 17 00:00:00 2001
From: "google-labs-jules[bot]"
 <161369871+google-labs-jules[bot]@users.noreply.github.com>
Date: Wed, 18 Feb 2026 09:54:33 +0000
Subject: [PATCH] =?UTF-8?q?=F0=9F=8E=A8=20Palette:=20Improve=20accessibili?=
 =?UTF-8?q?ty=20with=20ARIA=20labels=20for=20icon-only=20buttons?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

This commit adds `aria-label` attributes to various icon-only buttons across the application to improve accessibility for screen reader users. Components updated include Header, MobileIconsBar, ChatPanel, FollowupPanel, History, HeaderSearchButton, and CalendarNotepad.

Key improvements:
- Added descriptive labels to navigation and action buttons.
- Ensured all icon-only buttons provide contextual information to assistive technologies.
- Added a label to the note textarea in the calendar notepad.
- Verified changes with Playwright screenshots.

Co-authored-by: ngoiyaeric <115367894+ngoiyaeric@users.noreply.github.com>
---
 .jules/palette.md                   |  3 +++
 components/calendar-notepad.tsx     | 10 +++++++++-
 components/chat-panel.tsx           |  4 +++-
 components/followup-panel.tsx       |  1 +
 components/header-search-button.tsx |  1 +
 components/header.tsx               | 31 +++++++++++++++++++++++++----
 components/history.tsx              |  1 +
 components/mobile-icons-bar.tsx     | 12 +++++------
 8 files changed, 51 insertions(+), 12 deletions(-)
 create mode 100644 .jules/palette.md

diff --git a/.jules/palette.md b/.jules/palette.md
new file mode 100644
index 00000000..d32b6cfd
--- /dev/null
+++ b/.jules/palette.md
@@ -0,0 +1,3 @@
+## 2025-05-15 - [Accessibility: Icon-Only Button Labels]
+**Learning:** Icon-only buttons without explicit `aria-label` attributes are inaccessible to screen reader users, as they often lack descriptive text content. While `title` attributes provide some information on hover, they are not a substitute for `aria-label` in terms of accessibility standards.
+**Action:** Always ensure icon-only buttons have an `aria-label` or an `sr-only` span describing their action. This project now consistently uses `aria-label` for common interface actions like toggling history, opening calendars, and submitting forms.
diff --git a/components/calendar-notepad.tsx b/components/calendar-notepad.tsx
index 41decd98..a22f2c2f 100644
--- a/components/calendar-notepad.tsx
+++ b/components/calendar-notepad.tsx
@@ -97,6 +97,7 @@ export function CalendarNotepad({ chatId }: CalendarNotepadProps) {
         <button
           onClick={() => setDateOffset(dateOffset - 7)}
           className="p-2 text-muted-foreground hover:text-foreground"
+          aria-label="Previous week"
         >
           <ChevronLeft className="h-5 w-5" />
         </button>
@@ -124,6 +125,7 @@ export function CalendarNotepad({ chatId }: CalendarNotepadProps) {
         <button
           onClick={() => setDateOffset(dateOffset + 7)}
           className="p-2 text-muted-foreground hover:text-foreground"
+          aria-label="Next week"
         >
           <ChevronRight className="h-5 w-5" />
         </button>
@@ -138,10 +140,12 @@ export function CalendarNotepad({ chatId }: CalendarNotepadProps) {
             placeholder="Add note... (⌘+Enter to save, @mention, #location)"
             className="w-full p-2 bg-input rounded-md border focus:ring-ring focus:ring-2 focus:outline-none pr-10"
             rows={3}
+            aria-label="Add a note"
           />
           <button
             onClick={handleTagLocation}
             className="absolute right-2 top-1/2 -translate-y-1/2 text-muted-foreground hover:text-foreground"
+            aria-label="Tag current location"
           >
             <MapPin className="h-5 w-5" />
           </button>
@@ -160,7 +164,11 @@ export function CalendarNotepad({ chatId }: CalendarNotepadProps) {
                   <p className="text-sm whitespace-pre-wrap break-words">{note.content}</p>
                 </div>
                 {note.locationTags && (
-                  <button onClick={() => handleFlyTo(note.locationTags)} className="text-muted-foreground hover:text-foreground ml-2">
+                  <button
+                    onClick={() => handleFlyTo(note.locationTags)}
+                    className="text-muted-foreground hover:text-foreground ml-2"
+                    aria-label="Fly to tagged location"
+                  >
                     <MapPin className="h-5 w-5" />
                   </button>
                 )}
diff --git a/components/chat-panel.tsx b/components/chat-panel.tsx
index ca2fbc6f..8eeffc27 100644
--- a/components/chat-panel.tsx
+++ b/components/chat-panel.tsx
@@ -177,6 +177,7 @@ export const ChatPanel = forwardRef<ChatPanelRef, ChatPanelProps>(({ messages, i
           onClick={() => handleClear()}
           data-testid="new-chat-button"
           title="New Chat"
+          aria-label="New chat"
         >
           <Sprout size={28} className="fill-primary/20" />
         </Button>
@@ -225,6 +226,7 @@ export const ChatPanel = forwardRef<ChatPanelRef, ChatPanelProps>(({ messages, i
               )}
               onClick={handleAttachmentClick}
               data-testid="desktop-attachment-button"
+              aria-label="Attach file"
             >
               <Paperclip size={isMobile ? 18 : 20} />
             </Button>
@@ -295,7 +297,7 @@ 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">
+            <Button variant="ghost" size="icon" onClick={clearAttachment} data-testid="clear-attachment-button" aria-label="Clear attachment">
               <X size={16} />
             </Button>
           </div>
diff --git a/components/followup-panel.tsx b/components/followup-panel.tsx
index 53321e1a..8c4e0fbb 100644
--- a/components/followup-panel.tsx
+++ b/components/followup-panel.tsx
@@ -59,6 +59,7 @@ export function FollowupPanel() {
         disabled={input.length === 0}
         variant={'ghost'}
         className="absolute right-1"
+        aria-label="Send message"
       >
         <ArrowRight size={20} />
       </Button>
diff --git a/components/header-search-button.tsx b/components/header-search-button.tsx
index 04896457..e65e86f3 100644
--- a/components/header-search-button.tsx
+++ b/components/header-search-button.tsx
@@ -154,6 +154,7 @@ export function HeaderSearchButton() {
       onClick={handleResolutionSearch}
       disabled={isAnalyzing || !map || !actions}
       title="Analyze current map view"
+      aria-label="Analyze current map view"
     >
       {isAnalyzing ? (
         <div className="h-5 w-5 animate-spin rounded-full border-b-2 border-current"></div>
diff --git a/components/header.tsx b/components/header.tsx
index fd80bc44..5d3edbcd 100644
--- a/components/header.tsx
+++ b/components/header.tsx
@@ -52,7 +52,13 @@ export const Header = () => {
       </div>
       
       <div className="absolute left-1 flex items-center">
-        <Button variant="ghost" size="icon" onClick={toggleHistory} data-testid="logo-history-toggle">
+        <Button
+          variant="ghost"
+          size="icon"
+          onClick={toggleHistory}
+          data-testid="logo-history-toggle"
+          aria-label="Toggle history"
+        >
           <Image
             src="/images/logo.svg"
             alt="Logo"
@@ -71,13 +77,25 @@ export const Header = () => {
         
         <MapToggle />
         
-        <Button variant="ghost" size="icon" onClick={toggleCalendar} title="Open Calendar" data-testid="calendar-toggle">
+        <Button
+          variant="ghost"
+          size="icon"
+          onClick={toggleCalendar}
+          title="Open Calendar"
+          data-testid="calendar-toggle"
+          aria-label="Open calendar"
+        >
           <CalendarDays className="h-[1.2rem] w-[1.2rem]" />
         </Button>
         
         <div id="header-search-portal" className="contents" />
         
-        <Button variant="ghost" size="icon" onClick={handleUsageToggle}>
+        <Button
+          variant="ghost"
+          size="icon"
+          onClick={handleUsageToggle}
+          aria-label="Toggle usage"
+        >
           <TentTree className="h-[1.2rem] w-[1.2rem]" />
         </Button>
         
@@ -89,7 +107,12 @@ 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="Toggle usage"
+        >
           <TentTree className="h-[1.2rem] w-[1.2rem]" />
         </Button>
         <ProfileToggle/>
diff --git a/components/history.tsx b/components/history.tsx
index 5bae1a39..ebbfc5c5 100644
--- a/components/history.tsx
+++ b/components/history.tsx
@@ -19,6 +19,7 @@ export function History({ location }: HistoryProps) {
       })}
       data-testid="history-button"
       onClick={toggleHistory}
+      aria-label="Toggle history"
     >
       {location === 'header' ? <Menu /> : <ChevronLeft size={16} />}
     </Button>
diff --git a/components/mobile-icons-bar.tsx b/components/mobile-icons-bar.tsx
index d0db2cfa..9cffdae1 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} title="Open Calendar" data-testid="mobile-calendar-button" aria-label="Open calendar">
         <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="Upgrade">
           <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" />