Skip to content

🎨 Palette: Contextual ARIA labels for list action buttons #36

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
yashrastogi wants to merge 1 commit into from
Closed

🎨 Palette: Contextual ARIA labels for list action buttons #36

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 3 additions & 0 deletions .Jules/palette.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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.
5 changes: 3 additions & 2 deletions src/app/components/dashboard/dashboard.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
2 changes: 1 addition & 1 deletion src/app/components/decision-list/decision-list.component.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
6 changes: 3 additions & 3 deletions src/app/components/signal-board/signal-board.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
7 changes: 4 additions & 3 deletions src/app/components/workspace-members/workspace-members.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down Expand Up @@ -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>
Expand Down
Loading