From c5b74128ce086b2d70bf6c0811001385f7287ad0 Mon Sep 17 00:00:00 2001
From: "google-labs-jules[bot]"
 <161369871+google-labs-jules[bot]@users.noreply.github.com>
Date: Sat, 25 Apr 2026 18:16:18 +0000
Subject: [PATCH] feat(a11y): add contextual aria-labels to generic list action
 buttons

Generic list action buttons (like "Open", "Edit", "Delete", "Remove") lack context for screen reader users when navigating list structures. This change adds dynamic `aria-label`s to these buttons in the dashboard, workspace members, decision list, and signal board components to provide clear, actionable context.

Co-authored-by: yashrastogi <4853337+yashrastogi@users.noreply.github.com>
---
 .Jules/palette.md                                          | 3 +++
 src/app/components/dashboard/dashboard.html                | 5 +++--
 .../components/decision-list/decision-list.component.html  | 2 +-
 src/app/components/signal-board/signal-board.html          | 6 +++---
 .../components/workspace-members/workspace-members.html    | 7 ++++---
 5 files changed, 14 insertions(+), 9 deletions(-)
 create mode 100644 .Jules/palette.md

diff --git a/.Jules/palette.md b/.Jules/palette.md
new file mode 100644
index 0000000..ad8d08b
--- /dev/null
+++ b/.Jules/palette.md
@@ -0,0 +1,3 @@
+## 2024-04-25 - Contextual Action Buttons in Lists
+**Learning:** Screen readers announce repetitive, generic action buttons like "Open", "Edit", "Delete", "Remove", "Resend", and "Archive" poorly when they are within lists (workspaces, members, decisions, signals), making it ambiguous which specific item the button acts upon.
+**Action:** Always add dynamic `aria-label`s to generic list action buttons using Angular property binding (e.g., `[attr.aria-label]="'Edit ' + itemName"`) to provide clear, actionable context for screen reader users.
diff --git a/src/app/components/dashboard/dashboard.html b/src/app/components/dashboard/dashboard.html
index 16775f5..aa5e75a 100644
--- a/src/app/components/dashboard/dashboard.html
+++ b/src/app/components/dashboard/dashboard.html
@@ -41,13 +41,14 @@ <h3>{{ ws.name }}</h3>
         <p>{{ ws.description || 'No description yet.' }}</p>
         <small>Created: {{ ws.createdDate | date: 'mediumDate' }}</small>
         <div class="card-actions">
-          <a [routerLink]="['/workspaces', ws.id, 'decisions']" class="action-btn open-btn">Open</a>
-          <a [routerLink]="['/workspaces', ws.id, 'edit']" class="action-btn edit-btn">Edit</a>
+          <a [routerLink]="['/workspaces', ws.id, 'decisions']" class="action-btn open-btn" [attr.aria-label]="'Open workspace ' + ws.name">Open</a>
+          <a [routerLink]="['/workspaces', ws.id, 'edit']" class="action-btn edit-btn" [attr.aria-label]="'Edit workspace ' + ws.name">Edit</a>
           <button
             type="button"
             class="action-btn delete-btn"
             (click)="requestDeleteWorkspace(ws)"
             [disabled]="isDeletingWorkspace && isWorkspacePendingDelete(ws)"
+            [attr.aria-label]="'Delete workspace ' + ws.name"
           >
             {{ isDeletingWorkspace && isWorkspacePendingDelete(ws) ? 'Deleting...' : 'Delete' }}
           </button>
diff --git a/src/app/components/decision-list/decision-list.component.html b/src/app/components/decision-list/decision-list.component.html
index 72f8661..111caa8 100644
--- a/src/app/components/decision-list/decision-list.component.html
+++ b/src/app/components/decision-list/decision-list.component.html
@@ -25,7 +25,7 @@ <h3>{{ decision.title }}</h3>
                 </span>
             </div>
             <div class="decision-actions">
-                <button (click)="deleteDecision(decision.id)" class="btn-danger">Delete</button>
+                <button (click)="deleteDecision(decision.id)" class="btn-danger" [attr.aria-label]="'Delete decision: ' + decision.title">Delete</button>
             </div>
         </div>
     </div>
diff --git a/src/app/components/signal-board/signal-board.html b/src/app/components/signal-board/signal-board.html
index c6f11b3..4bc436d 100644
--- a/src/app/components/signal-board/signal-board.html
+++ b/src/app/components/signal-board/signal-board.html
@@ -29,9 +29,9 @@ <h3>{{ signal.title }}</h3>
     </div>
 
     <div class="signal-actions">
-      <a class="link-btn" *ngIf="signal.url" [href]="signal.url" target="_blank" rel="noreferrer">{{ getOpenLabel(signal) }}</a>
-      <button type="button" class="ghost-btn" (click)="markAsRead.emit(signal.id)">Mark as read</button>
-      <button type="button" class="ghost-btn" (click)="archive.emit(signal.id)">Archive</button>
+      <a class="link-btn" *ngIf="signal.url" [href]="signal.url" target="_blank" rel="noreferrer" [attr.aria-label]="getOpenLabel(signal) + ' for signal: ' + signal.title">{{ getOpenLabel(signal) }}</a>
+      <button type="button" class="ghost-btn" (click)="markAsRead.emit(signal.id)" [attr.aria-label]="'Mark signal as read: ' + signal.title">Mark as read</button>
+      <button type="button" class="ghost-btn" (click)="archive.emit(signal.id)" [attr.aria-label]="'Archive signal: ' + signal.title">Archive</button>
     </div>
   </article>
 </section>
diff --git a/src/app/components/workspace-members/workspace-members.html b/src/app/components/workspace-members/workspace-members.html
index 87d26a1..3869340 100644
--- a/src/app/components/workspace-members/workspace-members.html
+++ b/src/app/components/workspace-members/workspace-members.html
@@ -68,11 +68,12 @@ <h4>{{ member.email }}</h4>
             [disabled]="member.role === 'owner'"
             [ngModel]="member.role"
             (ngModelChange)="updateMemberRole(member, $event)"
+            [attr.aria-label]="'Update role for ' + member.email"
           >
             <option *ngFor="let role of availableRoles" [value]="role">{{ role }}</option>
           </select>
 
-          <button type="button" class="secondary-btn" [disabled]="member.role === 'owner'" (click)="removeMember(member)">
+          <button type="button" class="secondary-btn" [disabled]="member.role === 'owner'" (click)="removeMember(member)" [attr.aria-label]="'Remove member ' + member.email">
             Remove
           </button>
         </div>
@@ -103,8 +104,8 @@ <h4>{{ invitation.email }}</h4>
         </div>
 
         <div class="member-actions">
-          <button type="button" class="secondary-btn" (click)="resendInvitation(invitation)">Resend</button>
-          <button type="button" class="danger-btn" (click)="cancelInvitation(invitation)">Cancel</button>
+          <button type="button" class="secondary-btn" (click)="resendInvitation(invitation)" [attr.aria-label]="'Resend invitation to ' + invitation.email">Resend</button>
+          <button type="button" class="danger-btn" (click)="cancelInvitation(invitation)" [attr.aria-label]="'Cancel invitation for ' + invitation.email">Cancel</button>
         </div>
       </article>
     </div>