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 -