From eb840670a699784b0336f8fe917dd4cd41b09ee2 Mon Sep 17 00:00:00 2001
From: "google-labs-jules[bot]"
 <161369871+google-labs-jules[bot]@users.noreply.github.com>
Date: Wed, 4 Feb 2026 17:24:23 +0000
Subject: [PATCH] feat(ux): improve accessibility for GoalsList and TaskCard

- Add `aria-label` and `title` to icon-only buttons in `GoalsList.tsx` (edit, delete) and `TaskCard.tsx` (edit, delete, menu).
- Add `group-focus-within:opacity-100` to actions containers to ensure buttons are visible when focused via keyboard navigation.
- Add journal entry to `.Jules/palette.md` regarding keyboard accessibility for hover-revealed actions.

Co-authored-by: criptogus <128640021+criptogus@users.noreply.github.com>
---
 .Jules/palette.md                  |  4 ++++
 src/components/goals/GoalsList.tsx | 19 ++++++++++++++++---
 src/components/tasks/TaskCard.tsx  |  8 +++++++-
 3 files changed, 27 insertions(+), 4 deletions(-)

diff --git a/.Jules/palette.md b/.Jules/palette.md
index bbbd06dfd..ad6bd1364 100644
--- a/.Jules/palette.md
+++ b/.Jules/palette.md
@@ -29,3 +29,7 @@
 ## 2026-01-22 - Replacing Text Characters with Semantic Icons
 **Learning:** In `AppSidebar.tsx`, a text character "▼" was used for the expand/collapse arrow. Screen readers might announce this as "Black Down-Pointing Triangle" or similar, which is distracting. Text characters also don't scale or style as consistently as SVGs.
 **Action:** Replace decorative text characters with `CyberIcon` (or proper SVG icons) and add `aria-hidden="true"` to ensure they are treated as visual decoration only.
+
+## 2026-02-17 - Keyboard Visibility for Hover Actions
+**Learning:** In components like `GoalsList.tsx` and `TaskCard.tsx`, action buttons were hidden by default and only revealed on `group-hover`. This makes them invisible to keyboard users who tab through the interface.
+**Action:** Always add `group-focus-within:opacity-100` alongside `group-hover:opacity-100` to ensure that when a user tabs into the action buttons, the container becomes visible.
diff --git a/src/components/goals/GoalsList.tsx b/src/components/goals/GoalsList.tsx
index 7e6053de0..336cefb5b 100644
--- a/src/components/goals/GoalsList.tsx
+++ b/src/components/goals/GoalsList.tsx
@@ -75,13 +75,26 @@ export function GoalsList({ goals, onEdit, onDelete, onPlan, onStatusChange, onA
                     </div>
                   </div>
 
-                  <div className="flex items-center gap-1 opacity-0 group-hover:opacity-100 transition-opacity">
-                    <Button variant="ghost" size="sm" onClick={() => onEdit(goal)} className="h-8 w-8 p-0 hover:bg-violet-500/20">
+                  <div className="flex items-center gap-1 opacity-0 group-hover:opacity-100 group-focus-within:opacity-100 transition-opacity">
+                    <Button
+                      variant="ghost"
+                      size="sm"
+                      onClick={() => onEdit(goal)}
+                      className="h-8 w-8 p-0 hover:bg-violet-500/20"
+                      aria-label="Editar meta"
+                      title="Editar meta"
+                    >
                       <CyberIcon name="edit" className="h-4 w-4" />
                     </Button>
                     <AlertDialog>
                       <AlertDialogTrigger asChild>
-                        <Button variant="ghost" size="sm" className="h-8 w-8 p-0 text-destructive hover:text-destructive hover:bg-destructive/10">
+                        <Button
+                          variant="ghost"
+                          size="sm"
+                          className="h-8 w-8 p-0 text-destructive hover:text-destructive hover:bg-destructive/10"
+                          aria-label="Excluir meta"
+                          title="Excluir meta"
+                        >
                           <CyberIcon name="trash" className="h-4 w-4" />
                         </Button>
                       </AlertDialogTrigger>
diff --git a/src/components/tasks/TaskCard.tsx b/src/components/tasks/TaskCard.tsx
index a639f6805..4455013ad 100644
--- a/src/components/tasks/TaskCard.tsx
+++ b/src/components/tasks/TaskCard.tsx
@@ -319,7 +319,7 @@ export function TaskCard({
                     </div>
 
                     {/* Actions */}
-                    <div className="flex items-center gap-1.5 opacity-100 sm:opacity-0 sm:group-hover:opacity-100 transition-opacity flex-shrink-0 z-10">
+                    <div className="flex items-center gap-1.5 opacity-100 sm:opacity-0 sm:group-hover:opacity-100 sm:group-focus-within:opacity-100 transition-opacity flex-shrink-0 z-10">
                         <Button
                             variant="ghost"
                             size="sm"
@@ -328,6 +328,8 @@ export function TaskCard({
                                 e.stopPropagation();
                                 onEdit(task);
                             }}
+                            aria-label="Editar tarefa"
+                            title="Editar tarefa"
                         >
                             <CyberIcon name="edit" size={16} className="h-4 w-4 text-current" />
                         </Button>
@@ -339,6 +341,8 @@ export function TaskCard({
                                 e.stopPropagation();
                                 onDelete(task);
                             }}
+                            aria-label="Excluir tarefa"
+                            title="Excluir tarefa"
                         >
                             <CyberIcon name="trash" size={16} className="h-4 w-4 text-current" />
                         </Button>
@@ -349,6 +353,8 @@ export function TaskCard({
                                     size="sm"
                                     className="h-9 w-9 p-0 hover:bg-violet-500/20 hover:text-violet-400 transition-colors touch-manipulation"
                                     onClick={(e) => e.stopPropagation()}
+                                    aria-label="Mais opções"
+                                    title="Mais opções"
                                 >
                                     <CyberIcon name="more" size={16} className="h-4 w-4 text-current" />
                                 </Button>