From e24c203730c4f1bc89f6f18f54715ae8947dd8b6 Mon Sep 17 00:00:00 2001
From: "google-labs-jules[bot]"
 <161369871+google-labs-jules[bot]@users.noreply.github.com>
Date: Fri, 30 Jan 2026 17:37:33 +0000
Subject: [PATCH] =?UTF-8?q?=F0=9F=8E=A8=20Palette:=20Improve=20GoalsList?=
 =?UTF-8?q?=20accessibility=20and=20keyboard=20nav?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

💡 What: Added aria-labels to Edit/Delete buttons and enabled keyboard visibility.
🎯 Why: Icon-only buttons were inaccessible to screen readers. Action buttons were invisible to keyboard users (tab focus).
♿ Accessibility: Added aria-labels and group-focus-within styles.

Co-authored-by: criptogus <128640021+criptogus@users.noreply.github.com>
---
 .Jules/palette.md                       |  4 ++
 src/components/goals/GoalsList.tsx      |  6 +--
 src/tests/components/GoalsList.test.tsx | 60 +++++++++++++++++++++++++
 3 files changed, 67 insertions(+), 3 deletions(-)
 create mode 100644 src/tests/components/GoalsList.test.tsx

diff --git a/.Jules/palette.md b/.Jules/palette.md
index bbbd06dfd..3c352a63d 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-01-24 - Keyboard Visibility for Hover Actions
+**Learning:** In `GoalsList.tsx`, action buttons were hidden using `opacity-0 group-hover:opacity-100`, making them invisible to keyboard users who tabbed into the card. Focus does not trigger hover styles by default.
+**Action:** Always add `group-focus-within:opacity-100` alongside `group-hover:opacity-100` for containers of interactive elements to ensure they become visible when a user focuses on them.
diff --git a/src/components/goals/GoalsList.tsx b/src/components/goals/GoalsList.tsx
index 7e6053de0..20ea71bea 100644
--- a/src/components/goals/GoalsList.tsx
+++ b/src/components/goals/GoalsList.tsx
@@ -75,13 +75,13 @@ 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">
                       <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">
                           <CyberIcon name="trash" className="h-4 w-4" />
                         </Button>
                       </AlertDialogTrigger>
diff --git a/src/tests/components/GoalsList.test.tsx b/src/tests/components/GoalsList.test.tsx
new file mode 100644
index 000000000..e9075c38d
--- /dev/null
+++ b/src/tests/components/GoalsList.test.tsx
@@ -0,0 +1,60 @@
+import { render, screen } from '@testing-library/react';
+import { GoalsList } from '../../components/goals/GoalsList';
+import { Goal } from '../../hooks/useGoals';
+import React from 'react';
+import { vi, describe, it, expect } from 'vitest';
+
+// Mock CyberIcon to avoid rendering issues and focus on logic
+vi.mock('@/components/ui/cyber-icons', () => ({
+  CyberIcon: ({ name }: { name: string }) => <span data-testid={`icon-${name}`}>{name}</span>,
+}));
+
+// Mock ElectricBorder to avoid complex rendering
+vi.mock('@/components/ui/electric-border', () => ({
+  ElectricBorder: ({ children, className }: { children: React.ReactNode; className?: string }) => (
+    <div className={className} data-testid="electric-border">{children}</div>
+  ),
+}));
+
+describe('GoalsList', () => {
+  const mockGoal: Goal = {
+    id: '1',
+    title: 'Test Goal',
+    description: 'Test Description',
+    category: 'personal',
+    status: 'active',
+    progress_percentage: 50,
+    created_at: new Date().toISOString(),
+    goal_milestones: [],
+    goal_checkins: [],
+  };
+
+  const defaultProps = {
+    goals: [mockGoal],
+    onEdit: vi.fn(),
+    onDelete: vi.fn(),
+    onPlan: vi.fn(),
+    onStatusChange: vi.fn(),
+    onAddTask: vi.fn(),
+  };
+
+  it('renders goals with accessible actions', () => {
+    render(<GoalsList {...defaultProps} />);
+
+    // Check if goal title is rendered
+    expect(screen.getByText('Test Goal')).toBeInTheDocument();
+
+    // Check for Edit button accessibility
+    const editButton = screen.getByRole('button', { name: /editar meta/i });
+    expect(editButton).toBeInTheDocument();
+
+    // Check for Delete button accessibility (it's inside AlertDialogTrigger)
+    const deleteButton = screen.getByRole('button', { name: /excluir meta/i });
+    expect(deleteButton).toBeInTheDocument();
+
+    // Check for container visibility class
+    // We find the container by finding the edit button and looking at its parent
+    const buttonContainer = editButton.parentElement;
+    expect(buttonContainer).toHaveClass('group-focus-within:opacity-100');
+  });
+});