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({