Skip to content

🎨 Palette: Accessibility improvements for Goals and Tasks #408

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
criptogus wants to merge 1 commit into
base: main
Choose a base branch
from
Open

🎨 Palette: Accessibility improvements for Goals and Tasks #408

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 4 additions & 0 deletions .Jules/palette.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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.
19 changes: 16 additions & 3 deletions src/components/goals/GoalsList.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
8 changes: 7 additions & 1 deletion src/components/tasks/TaskCard.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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"
Expand All @@ -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>
Expand All @@ -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>
Expand All @@ -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>
Expand Down
Loading