From 9b60a43082e8d8c62a765adeee76e1f6f91a7980 Mon Sep 17 00:00:00 2001
From: "google-labs-jules[bot]"
 <161369871+google-labs-jules[bot]@users.noreply.github.com>
Date: Thu, 25 Jun 2026 11:32:34 +0000
Subject: [PATCH] =?UTF-8?q?=F0=9F=8E=A8=20Palette:=20Add=20context-aware?=
 =?UTF-8?q?=20ARIA=20labels=20to=20sortable=20citation=20action=20buttons?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-authored-by: aicoder2009 <127642633+aicoder2009@users.noreply.github.com>
---
 .jules/palette.md                         |  4 ++++
 src/components/wiki/sortable-citation.tsx | 10 ++++++++++
 2 files changed, 14 insertions(+)

diff --git a/.jules/palette.md b/.jules/palette.md
index 752c04a..043c9e0 100644
--- a/.jules/palette.md
+++ b/.jules/palette.md
@@ -5,3 +5,7 @@
 ## 2024-05-17 - Generic Visual Text Buttons and ARIA Context
 **Learning:** Components frequently use generic visual text buttons like `[hide]`, `[show]`, `[edit]`, or `[delete]` within lists or loops. Screen readers read these buttons without surrounding visual context, confusing users.
 **Action:** Always provide a contextual `aria-label` (e.g., `aria-label="Hide ${title}"`) for generic visual text buttons so screen reader users have proper context.
+
+## 2024-05-19 - Added ARIA labels to repeating text links in lists
+**Learning:** Repetitive text link buttons like `[edit]`, `[delete]`, or `[copy]` within list items (like citations) become ambiguous for screen reader users who hear the same generic action multiple times without context (e.g., "edit what?").
+**Action:** Always add descriptive, context-aware `aria-label` attributes (e.g., `aria-label="Edit citation"`) to generic action buttons so that screen readers announce the action with its specific context, improving overall accessibility.
diff --git a/src/components/wiki/sortable-citation.tsx b/src/components/wiki/sortable-citation.tsx
index da2d6d6..7789824 100644
--- a/src/components/wiki/sortable-citation.tsx
+++ b/src/components/wiki/sortable-citation.tsx
@@ -359,6 +359,7 @@ export function SortableCitation({
                   setTimeout(() => setCopiedKey(null), 1500);
                 }}
                 className="text-wiki-link text-sm hover:underline focus-visible:outline-dotted focus-visible:outline-1 focus-visible:outline-wiki-text"
+                aria-label={copiedKey === "copy" ? "Copied citation to clipboard" : "Copy citation to clipboard"}
               >
                 {copiedKey === "copy" ? "[copied!]" : "[copy]"}
               </button>
@@ -376,6 +377,7 @@ export function SortableCitation({
                   }}
                   className="text-wiki-link text-sm hover:underline focus-visible:outline-dotted focus-visible:outline-1 focus-visible:outline-wiki-text"
                   title={`In-text citation (${citation.style.toUpperCase()})`}
+                  aria-label={copiedKey === "copy-in-text" ? "Copied in-text citation to clipboard" : "Copy in-text citation to clipboard"}
                 >
                   {copiedKey === "copy-in-text" ? "[copied!]" : "[copy in-text]"}
                 </button>
@@ -383,6 +385,7 @@ export function SortableCitation({
               <button
                 onClick={startEditing}
                 className="text-wiki-link text-sm hover:underline focus-visible:outline-dotted focus-visible:outline-1 focus-visible:outline-wiki-text"
+                aria-label="Edit citation"
               >
                 [edit]
               </button>
@@ -390,6 +393,7 @@ export function SortableCitation({
                 <button
                   onClick={() => onShare(citation.id)}
                   className="text-wiki-link text-sm hover:underline focus-visible:outline-dotted focus-visible:outline-1 focus-visible:outline-wiki-text"
+                  aria-label="Share citation"
                 >
                   [share]
                 </button>
@@ -397,6 +401,7 @@ export function SortableCitation({
               <button
                 onClick={() => onDelete(citation.id)}
                 className="text-wiki-link text-sm hover:underline focus-visible:outline-dotted focus-visible:outline-1 focus-visible:outline-wiki-text"
+                aria-label="Delete citation"
               >
                 [delete]
               </button>
@@ -446,6 +451,7 @@ export function SortableCitation({
                       setEditingNotes(true);
                     }}
                     className="text-wiki-link text-xs hover:underline focus-visible:outline-dotted focus-visible:outline-1 focus-visible:outline-wiki-text"
+                    aria-label="Edit notes"
                   >
                     [edit]
                   </button>
@@ -456,6 +462,7 @@ export function SortableCitation({
                       if (confirm(`Clear notes for "${label}"?`)) onSaveNotes(citation.id, "");
                     }}
                     className="text-wiki-link text-xs hover:underline focus-visible:outline-dotted focus-visible:outline-1 focus-visible:outline-wiki-text"
+                    aria-label="Clear notes"
                   >
                     [clear]
                   </button>
@@ -469,6 +476,7 @@ export function SortableCitation({
                   setEditingNotes(true);
                 }}
                 className="text-wiki-link text-xs hover:underline focus-visible:outline-dotted focus-visible:outline-1 focus-visible:outline-wiki-text"
+                aria-label="Add notes"
               >
                 [+ add notes]
               </button>
@@ -563,6 +571,7 @@ export function SortableCitation({
                       setEditingQuotes(true);
                     }}
                     className="text-wiki-link text-xs hover:underline focus-visible:outline-dotted focus-visible:outline-1 focus-visible:outline-wiki-text"
+                    aria-label="Edit quotes"
                   >
                     [edit]
                   </button>
@@ -587,6 +596,7 @@ export function SortableCitation({
                   setEditingQuotes(true);
                 }}
                 className="text-wiki-link text-xs hover:underline focus-visible:outline-dotted focus-visible:outline-1 focus-visible:outline-wiki-text"
+                aria-label="Add quote"
               >
                 [+ add quote]
               </button>