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]"}
@@ -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]"}
@@ -383,6 +385,7 @@ export function SortableCitation({
@@ -390,6 +393,7 @@ export function SortableCitation({
@@ -397,6 +401,7 @@ export function SortableCitation({
@@ -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]
@@ -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]
@@ -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]
@@ -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]
@@ -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]