From aa8c2a5006f0aab4361516f10f2dbed8e1a50dfe Mon Sep 17 00:00:00 2001
From: "google-labs-jules[bot]"
<161369871+google-labs-jules[bot]@users.noreply.github.com>
Date: Sun, 26 Apr 2026 13:13:49 +0000
Subject: [PATCH 1/2] =?UTF-8?q?=F0=9F=8E=A8=20Palette:=20Add=20context-awa?=
=?UTF-8?q?re=20ARIA=20labels=20to=20NoteCard=20action=20buttons?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
💡 What: Added context-aware `aria-label`s to the "Ask AI", "Share", and "Delete" icon-only buttons in `web/src/components/NoteCard.tsx` (e.g., `aria-label="Delete Meeting Notes"`).
🎯 Why: To provide better context for screen reader users when navigating through a list of NoteCards, avoiding the ambiguity of multiple identical generic "Delete" buttons.
♿ Accessibility: Improves accessibility for screen reader users navigating icon-only buttons.
Co-authored-by: julwrites <18639913+julwrites@users.noreply.github.com>
---
web/src/components/NoteCard.tsx | 3 +++
1 file changed, 3 insertions(+)
diff --git a/web/src/components/NoteCard.tsx b/web/src/components/NoteCard.tsx
index 33ae4099..547a0548 100644
--- a/web/src/components/NoteCard.tsx
+++ b/web/src/components/NoteCard.tsx
@@ -60,6 +60,7 @@ export function NoteCard({ note, onDelete, onShare, onAskAI }: NoteCardProps) {
onAskAI(note);
}}
title="Ask AI"
+ aria-label={`Ask AI about ${note.title || "Untitled Note"}`}
>
@@ -73,6 +74,7 @@ export function NoteCard({ note, onDelete, onShare, onAskAI }: NoteCardProps) {
onShare(note);
}}
title="Share"
+ aria-label={`Share ${note.title || "Untitled Note"}`}
>
@@ -86,6 +88,7 @@ export function NoteCard({ note, onDelete, onShare, onAskAI }: NoteCardProps) {
onDelete(note);
}}
title="Delete"
+ aria-label={`Delete ${note.title || "Untitled Note"}`}
>
From f746e6df7686639ccd571c1acac6641ef924a61d Mon Sep 17 00:00:00 2001
From: "google-labs-jules[bot]"
<161369871+google-labs-jules[bot]@users.noreply.github.com>
Date: Sun, 26 Apr 2026 13:28:45 +0000
Subject: [PATCH 2/2] =?UTF-8?q?=F0=9F=8E=A8=20Palette:=20Add=20context-awa?=
=?UTF-8?q?re=20ARIA=20labels=20to=20NoteCard=20action=20buttons=20and=20f?=
=?UTF-8?q?ix=20tests?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
💡 What:
- Added context-aware `aria-label`s to the "Ask AI", "Share", and "Delete" icon-only buttons in `web/src/components/NoteCard.tsx` (e.g., `aria-label="Delete Meeting Notes"`).
- Updated `web/src/components/NoteCard.test.tsx` to handle testing coverage and ensure all NoteCard behaviors are correctly verified in the frontend component suite.
🎯 Why: To provide better context for screen reader users when navigating through a list of NoteCards, avoiding the ambiguity of multiple identical generic "Delete" buttons, and ensure proper frontend test coverage on the updated component.
♿ Accessibility: Improves accessibility for screen reader users navigating icon-only buttons.
Co-authored-by: julwrites <18639913+julwrites@users.noreply.github.com>
---
web/src/components/NoteCard.test.tsx | 53 ++++++++++++++++++++++++----
1 file changed, 47 insertions(+), 6 deletions(-)
diff --git a/web/src/components/NoteCard.test.tsx b/web/src/components/NoteCard.test.tsx
index ac2744d1..156c69ca 100644
--- a/web/src/components/NoteCard.test.tsx
+++ b/web/src/components/NoteCard.test.tsx
@@ -44,9 +44,6 @@ describe('NoteCard', () => {
expect(screen.getByText('Test Note')).toBeInTheDocument();
expect(screen.getByText('Faith')).toBeInTheDocument();
expect(screen.getByText('Prayer')).toBeInTheDocument();
- // Date formatting might depend on locale, but let's check basic presence
- // 1/1/2023 or similar
- // expect(screen.getByText(/2023/)).toBeInTheDocument();
});
it('navigates to note detail on card click', () => {
@@ -62,7 +59,7 @@ describe('NoteCard', () => {
expect(mockNavigate).toHaveBeenCalledWith('/notes/1');
});
- it('navigates on Enter key', () => {
+ it('navigates on Enter key and Space key', () => {
render(
@@ -70,9 +67,53 @@ describe('NoteCard', () => {
);
const card = screen.getByRole('link');
- fireEvent.keyDown(card, { key: 'Enter', code: 'Enter' });
+ fireEvent.keyDown(card, { key: 'Enter', code: 'Enter' });
expect(mockNavigate).toHaveBeenCalledWith('/notes/1');
+
+ fireEvent.keyDown(card, { key: ' ', code: 'Space' });
+ expect(mockNavigate).toHaveBeenCalledTimes(2);
+ });
+
+ it('ignores other key presses', () => {
+ render(
+
+
+
+ );
+
+ const card = screen.getByRole('link');
+ fireEvent.keyDown(card, { key: 'A', code: 'KeyA' });
+
+ expect(mockNavigate).not.toHaveBeenCalled();
+ });
+
+ it('renders untitled note if title is missing', () => {
+ render(
+
+
+
+ );
+
+ expect(screen.getByText('Untitled Note')).toBeInTheDocument();
+ });
+
+ it('renders correctly without tags', () => {
+ render(
+
+
+
+ );
+ expect(screen.queryByText('Faith')).not.toBeInTheDocument();
+ });
+
+ it('renders empty tag list correctly', () => {
+ render(
+
+
+
+ );
+ expect(screen.queryByText('Faith')).not.toBeInTheDocument();
});
it('triggers actions without navigation', () => {
@@ -88,7 +129,7 @@ describe('NoteCard', () => {
fireEvent.click(deleteButton);
expect(mockHandlers.onDelete).toHaveBeenCalledWith(mockNote);
- expect(mockNavigate).not.toHaveBeenCalled(); // Should assume test isolation or clear mocks
+ expect(mockNavigate).not.toHaveBeenCalled();
fireEvent.click(shareButton);
expect(mockHandlers.onShare).toHaveBeenCalledWith(mockNote);