From 190ed65f9ed50d97b30c1fea128a2848a2da8636 Mon Sep 17 00:00:00 2001
From: Dexploarer <211557447+Dexploarer@users.noreply.github.com>
Date: Sat, 25 Apr 2026 00:50:01 +0000
Subject: [PATCH] Add ARIA labels to conversation sidebar delete buttons

---
 .jules/palette.md                                | 3 +++
 apps/app/src/components/ConversationsSidebar.tsx | 3 +++
 2 files changed, 6 insertions(+)
 create mode 100644 .jules/palette.md

diff --git a/.jules/palette.md b/.jules/palette.md
new file mode 100644
index 0000000000..1aed49296c
--- /dev/null
+++ b/.jules/palette.md
@@ -0,0 +1,3 @@
+## 2025-04-24 - Dynamic ARIA Labels in Lists
+**Learning:** When adding ARIA labels to repeating elements in a list (like delete/confirmation buttons in a sidebar chat list), injecting dynamic context (e.g., `conv.title`) is essential for screen reader users to distinguish which item they are acting upon, rather than hearing repeating identical labels.
+**Action:** Always look for and utilize existing dynamic data (like titles or IDs) within mapping functions to create unique, descriptive ARIA labels for list item actions.
diff --git a/apps/app/src/components/ConversationsSidebar.tsx b/apps/app/src/components/ConversationsSidebar.tsx
index 75d768bee2..280282d3b3 100644
--- a/apps/app/src/components/ConversationsSidebar.tsx
+++ b/apps/app/src/components/ConversationsSidebar.tsx
@@ -199,6 +199,7 @@ export function ConversationsSidebar({
                           className="px-1.5 py-0.5 text-[10px] border border-danger bg-danger text-white cursor-pointer hover:opacity-90 disabled:opacity-50 disabled:cursor-not-allowed"
                           onClick={() => void handleConfirmDelete(conv.id)}
                           disabled={deletingId === conv.id}
+                          aria-label={`Confirm delete conversation: ${conv.title}`}
                         >
                           {deletingId === conv.id ? "..." : "Yes"}
                         </button>
@@ -207,6 +208,7 @@ export function ConversationsSidebar({
                           className="px-1.5 py-0.5 text-[10px] border border-border bg-card text-muted cursor-pointer hover:border-accent hover:text-accent disabled:opacity-50 disabled:cursor-not-allowed"
                           onClick={() => setConfirmDeleteId(null)}
                           disabled={deletingId === conv.id}
+                          aria-label={`Cancel delete conversation: ${conv.title}`}
                         >
                           No
                         </button>
@@ -221,6 +223,7 @@ export function ConversationsSidebar({
                           setConfirmDeleteId(conv.id);
                         }}
                         title="Delete conversation"
+                        aria-label={`Delete conversation: ${conv.title}`}
                       >
                         ×
                       </button>