diff --git a/.Jules/palette.md b/.Jules/palette.md index bbbd06dfd..d822cc3e7 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-01 - Keyboard Visibility for Hover Actions +**Learning:** Buttons hidden with `opacity-0` and shown only on `group-hover:opacity-100` create a "ghost focus" problem for keyboard users. The element receives focus but remains invisible, confusing the user. +**Action:** Always pair `group-hover:opacity-100` with `group-focus-within:opacity-100` to ensure interactive controls become visible when they receive keyboard focus. diff --git a/src/components/goals/GoalsList.tsx b/src/components/goals/GoalsList.tsx index 7e6053de0..2d8856486 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 -