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({ > - - - {children} - - - + + + + {children} + + + + 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(({ messages, i 'fixed bottom-4 left-4 flex justify-start items-center pointer-events-none z-50' )} > - handleClear()} - data-testid="new-chat-button" - title="New Chat" - > - - + + + handleClear()} + data-testid="new-chat-button" + aria-label="New Chat" + > + + + + New Chat + ) } @@ -216,18 +222,24 @@ export const ChatPanel = forwardRef(({ messages, i accept="text/plain,image/png,image/jpeg,image/webp" /> {!isMobile && ( - - - + + + + + + + Attach File + )} (({ messages, i {selectedFile.name} - - - + + + + + + + Clear attachment + )} 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 = () => { - - - + + + + + + + History + QCX @@ -71,15 +77,25 @@ export const Header = () => { - - - + + + + + + + Calendar + - - - + + + + + + + Usage + @@ -89,7 +105,7 @@ export const Header = () => { {/* Mobile menu buttons */} - + 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 = ({ onAttachmentClic return ( - + - + - + - + - + - +