From cc3904f0262ce0148328910d159e56c41ec6358a Mon Sep 17 00:00:00 2001
From: Tommaso Sciortino <sciortino@gmail.com>
Date: Tue, 21 Oct 2025 17:39:49 -0700
Subject: [PATCH] Add aria labels to Todo list display (#11621)

---
 .../cli/src/ui/components/messages/Todo.tsx   | 41 +++++++++++++------
 1 file changed, 29 insertions(+), 12 deletions(-)

diff --git a/packages/cli/src/ui/components/messages/Todo.tsx b/packages/cli/src/ui/components/messages/Todo.tsx
index 9d27c24852..a7d630a93d 100644
--- a/packages/cli/src/ui/components/messages/Todo.tsx
+++ b/packages/cli/src/ui/components/messages/Todo.tsx
@@ -33,7 +33,7 @@ const TodoTitleDisplay: React.FC<{ todos: TodoList }> = ({ todos }) => {
 
   return (
     <Box flexDirection="row" columnGap={2} height={1}>
-      <Text color={theme.text.primary} bold>
+      <Text color={theme.text.primary} bold aria-label="Todo list">
         📝 Todo
       </Text>
       <Text color={theme.text.secondary}>{score} (ctrl+t to toggle)</Text>
@@ -44,22 +44,39 @@ const TodoTitleDisplay: React.FC<{ todos: TodoList }> = ({ todos }) => {
 const TodoStatusDisplay: React.FC<{ status: TodoStatus }> = ({ status }) => {
   switch (status) {
     case 'completed':
-      return <Text color={theme.status.success}>✓</Text>;
+      return (
+        <Text color={theme.status.success} aria-label="Completed">
+          ✓
+        </Text>
+      );
     case 'in_progress':
-      return <Text color={theme.text.accent}>»</Text>;
+      return (
+        <Text color={theme.text.accent} aria-label="In Progress">
+          »
+        </Text>
+      );
     case 'pending':
-      return <Text color={theme.text.primary}>☐</Text>;
+      return (
+        <Text color={theme.text.primary} aria-label="Pending">
+          ☐
+        </Text>
+      );
     case 'cancelled':
     default:
-      return <Text color={theme.status.error}>✗</Text>;
+      return (
+        <Text color={theme.status.error} aria-label="Cancelled">
+          ✗
+        </Text>
+      );
   }
 };
 
-const TodoItemDisplay: React.FC<{ todo: Todo; wrap?: 'truncate' }> = ({
-  todo,
-  wrap,
-}) => (
-  <Box flexDirection="row" columnGap={1}>
+const TodoItemDisplay: React.FC<{
+  todo: Todo;
+  wrap?: 'truncate';
+  role?: 'listitem';
+}> = ({ todo, wrap, role: ariaRole }) => (
+  <Box flexDirection="row" columnGap={1} aria-role={ariaRole}>
     <TodoStatusDisplay status={todo.status} />
     <Box flexShrink={1}>
       <Text color={theme.text.primary} wrap={wrap}>
@@ -140,9 +157,9 @@ interface TodoListDisplayProps {
 }
 
 const TodoListDisplay: React.FC<TodoListDisplayProps> = ({ todos }) => (
-  <Box flexDirection="column">
+  <Box flexDirection="column" aria-role="list">
     {todos.todos.map((todo: Todo, index: number) => (
-      <TodoItemDisplay todo={todo} key={index} />
+      <TodoItemDisplay todo={todo} key={index} role="listitem" />
     ))}
   </Box>
 );