From 3ce041cf20130d3a3d33ce9e93ea8bcecf724574 Mon Sep 17 00:00:00 2001
From: "google-labs-jules[bot]"
 <161369871+google-labs-jules[bot]@users.noreply.github.com>
Date: Wed, 28 Jan 2026 21:56:03 +0000
Subject: [PATCH] =?UTF-8?q?=F0=9F=8E=A8=20Palette:=20Enhance=20TaskList=20?=
 =?UTF-8?q?empty=20state=20and=20accessibility?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Improved the empty state of the TaskList component with a visually rich, centered layout including an icon and better typography.
- Added `aria-expanded` attributes to task description and subtasks toggle buttons.
- Added dynamic `aria-label` to subtasks toggle button for better screen reader feedback.
- Fixed Spanish typos in UI text (descripción, Mañana, más).
- Added .Jules/palette.md with UX/accessibility learnings.

Co-authored-by: Rumazor <87402949+Rumazor@users.noreply.github.com>
---
 .Jules/palette.md                       |  3 +++
 frontend/components/tasks/task-list.tsx | 24 ++++++++++++++++++------
 2 files changed, 21 insertions(+), 6 deletions(-)
 create mode 100644 .Jules/palette.md

diff --git a/.Jules/palette.md b/.Jules/palette.md
new file mode 100644
index 0000000..d2ae2e9
--- /dev/null
+++ b/.Jules/palette.md
@@ -0,0 +1,3 @@
+## 2025-05-22 - [Enhancing Task Empty States]
+**Learning:** Initial exploration revealed that empty states for tasks were text-only and lacked visual hierarchy. Additionally, interactive toggle elements for task descriptions and subtasks were missing `aria-expanded` attributes, which hinders accessibility for screen reader users.
+**Action:** Use visually rich empty states with icons and descriptive headings to improve engagement, and ensure all toggleable UI elements explicitly manage their expanded state via ARIA attributes.
diff --git a/frontend/components/tasks/task-list.tsx b/frontend/components/tasks/task-list.tsx
index 5420bf5..fce1f05 100644
--- a/frontend/components/tasks/task-list.tsx
+++ b/frontend/components/tasks/task-list.tsx
@@ -13,6 +13,7 @@ import {
   Clock,
   AlertTriangle,
   ChevronRight,
+  ClipboardList,
 } from "lucide-react";
 import type { Task } from "@/lib/types";
 import { useState } from "react";
@@ -66,7 +67,7 @@ function getDueDateInfo(dueDate: string) {
   }
   if (isTomorrow(date)) {
     return {
-      label: "Manana",
+      label: "Mañana",
       className: "text-blue-600 dark:text-blue-400",
       icon: Calendar,
     };
@@ -92,9 +93,17 @@ export default function TaskList({
 
   if (tasks.length === 0) {
     return (
-      <p className="text-center py-4 text-muted-foreground">
-        No se encontraron tareas. Crea una para empezar!
-      </p>
+      <div className="flex flex-col items-center justify-center py-12 px-4 text-center space-y-4 border-2 border-dashed rounded-2xl bg-muted/20 animate-in fade-in duration-500">
+        <div className="bg-background p-4 rounded-full shadow-sm ring-1 ring-black/5 dark:ring-white/10">
+          <ClipboardList className="w-8 h-8 text-muted-foreground/60" />
+        </div>
+        <div className="space-y-1">
+          <h3 className="font-semibold text-lg tracking-tight">No hay tareas pendientes</h3>
+          <p className="text-sm text-muted-foreground max-w-[280px] leading-relaxed">
+            ¡Todo despejado! Has completado tus tareas o aún no has empezado. Crea una nueva para organizarte.
+          </p>
+        </div>
+      </div>
     );
   }
 
@@ -177,7 +186,8 @@ export default function TaskList({
                           size="sm"
                           className="h-6 w-6 p-0"
                           onClick={() => toggleTaskExpansion(task.id)}
-                          aria-label={isExpanded ? "Contraer descripcion" : "Expandir descripcion"}
+                          aria-label={isExpanded ? "Contraer descripción" : "Expandir descripción"}
+                          aria-expanded={isExpanded}
                         >
                           {isExpanded ? (
                             <ChevronUp className="h-4 w-4" />
@@ -203,7 +213,7 @@ export default function TaskList({
                           onClick={() => toggleTaskExpansion(task.id)}
                           className="text-xs font-semibold text-primary hover:underline mt-1 focus:outline-none"
                         >
-                          {isExpanded ? "Ver menos" : "Ver mas"}
+                          {isExpanded ? "Ver menos" : "Ver más"}
                         </button>
                       )}
                     </div>
@@ -236,6 +246,8 @@ export default function TaskList({
                         size="sm"
                         className="h-6 px-2 text-xs text-muted-foreground hover:text-foreground"
                         onClick={() => toggleSubtasksExpansion(task.id)}
+                        aria-expanded={subtasksExpanded}
+                        aria-label={`${subtasksExpanded ? 'Contraer' : 'Expandir'} subtareas`}
                       >
                         <ChevronRight
                           className={`h-3 w-3 mr-1 transition-transform ${