diff --git a/.jules/palette.md b/.jules/palette.md
index 752c04a..a8c08cd 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-06-25 - Contextual ARIA labels for repeated bracket-style inline action buttons
+**Learning:** Bracket-style inline action buttons (e.g., `[edit]`, `[delete]`, `[remove]`, `[cancel]`, `[+ add tag]`) are frequently repeated in lists (like `SortableCitation`). When screen readers navigate through these buttons, they announce the visible text. If the visible text is generic, screen reader users lack context on *what* is being edited, deleted, or canceled.
+**Action:** Always provide dynamically contextual `aria-label` attributes to these repeated generic buttons, incorporating the relevant entity's name or title (e.g., `aria-label={\`Edit citation \${citation.title}\`}`). Provide descriptive static labels for general actions (e.g., `aria-label="Cancel adding tag"` instead of just `aria-label="Cancel"` or missing label).
diff --git a/src/components/wiki/share-dialog.tsx b/src/components/wiki/share-dialog.tsx
index 532d6a6..86f2b19 100644
--- a/src/components/wiki/share-dialog.tsx
+++ b/src/components/wiki/share-dialog.tsx
@@ -515,6 +515,7 @@ export function ShareDialog({
diff --git a/src/components/wiki/sortable-citation.tsx b/src/components/wiki/sortable-citation.tsx
index da2d6d6..e85acc2 100644
--- a/src/components/wiki/sortable-citation.tsx
+++ b/src/components/wiki/sortable-citation.tsx
@@ -383,6 +383,7 @@ export function SortableCitation({
@@ -390,6 +391,7 @@ export function SortableCitation({
@@ -397,6 +399,7 @@ export function SortableCitation({
@@ -446,6 +449,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 for ${citation.fields?.title || 'citation'}`}
>
[edit]
@@ -469,6 +473,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 to ${citation.fields?.title || 'citation'}`}
>
[+ add notes]
@@ -515,6 +520,7 @@ export function SortableCitation({
setQuotesDraft(quotesDraft.filter((_, idx) => idx !== i))
}
className="text-wiki-link text-xs hover:underline pt-1 focus-visible:outline-dotted focus-visible:outline-1 focus-visible:outline-wiki-text"
+ aria-label={`Remove quote ${i + 1}`}
>
[remove]
@@ -563,6 +569,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 for ${citation.fields?.title || 'citation'}`}
>
[edit]
@@ -587,6 +594,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 to ${citation.fields?.title || 'citation'}`}
>
[+ add quote]
@@ -637,6 +645,7 @@ export function SortableCitation({
@@ -646,6 +655,7 @@ export function SortableCitation({
setNewTagInput("");
}}
className="text-wiki-text-muted text-xs hover:underline focus-visible:outline-dotted focus-visible:outline-1 focus-visible:outline-wiki-text"
+ aria-label="Cancel adding tag"
>
[cancel]
@@ -682,6 +692,7 @@ export function SortableCitation({