🎨 Palette: Add dynamic ARIA labels to icon-only buttons

.Jules/palette.md

@@ -0,0 +1,3 @@
+## 2024-03-03 - Missing ARIA Labels on Icon-Only Actions
+**Learning:** Across the dashboard components (Notification Bell, Friends Card, Community Card), icon-only interactive elements (`<Button size="icon">`) frequently omit `aria-label` attributes. This is particularly critical when these buttons contain dynamically updated information (like unread counts) or loop-generated content (like messaging a specific user).
+**Action:** When working with or creating new icon-only buttons, always ensure an `aria-label` is present. If the button acts on a specific item or has a dynamic state (e.g., notification count), the `aria-label` should reflect that dynamic context (e.g., `aria-label={"Message " + user.name}`).

src/components/dashboard/community-card.tsx

@@ -45,7 +45,7 @@ export async function CommunityCard() {
           <CardTitle className="text-xl font-editorial font-light text-card-foreground tracking-wide">
             Community
           </CardTitle>
-          <Button variant="ghost" size="icon" className="h-8 w-8 text-muted-foreground hover:text-foreground rounded-full hover:bg-muted" asChild>
+          <Button aria-label="View full community" variant="ghost" size="icon" className="h-8 w-8 text-muted-foreground hover:text-foreground rounded-full hover:bg-muted" asChild>
             <div className="cursor-pointer">
               <ArrowUpRight className="w-4 h-4" />
             </div>

src/components/dashboard/friends-card.tsx

@@ -92,6 +92,7 @@ export async function FriendsCard() {
               <Button
                 variant="ghost"
                 size="icon"
+                aria-label={`Message ${friend.username}`}
                 className="h-9 w-9 rounded-full text-muted-foreground hover:text-foreground hover:bg-muted opacity-0 group-hover/item:opacity-100 transition-all translate-x-2 group-hover/item:translate-x-0"
               >
                 <MessageSquare className="w-4 h-4" />

src/components/notifications/notification-bell.tsx

@@ -81,6 +81,7 @@ export function NotificationBell() {
         <Button
           variant="ghost"
           size="icon"
+          aria-label={`Notifications, ${count} unread`}
           className="relative text-foreground/70 hover:text-foreground hover:bg-accent/10"
         >
           <Bell className="w-5 h-5" />