Skip to content

🎨 Palette: Add aria-labels to icon-only buttons in ChatInterface #9

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

Open
vireapp wants to merge 1 commit into
base: main
Choose a base branch
from
Open

🎨 Palette: Add aria-labels to icon-only buttons in ChatInterface #9

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-05-18 - Missing ARIA Labels on Icon-Only Buttons
**Learning:** Found a recurring accessibility pattern in the app's components, particularly in `ChatInterface` and potentially other room/dashboard components, where `Button` elements with `size="icon"` lack `aria-label` attributes. This makes them invisible or confusing to screen reader users.
**Action:** When creating or reviewing icon-only buttons (especially those used for actions like edit, delete, attach, emoji, gift, go back), always ensure a descriptive `aria-label` is included. This pattern should be checked across the entire app, especially in action-heavy interfaces like chat and room settings.
11 changes: 6 additions & 5 deletions src/app/dashboard/messages/chat-interface.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -232,6 +232,7 @@ export function ChatInterface({
<Button
variant="ghost"
size="icon"
aria-label="Go back"
className="md:hidden -ml-2 h-8 w-8 rounded-full bg-muted text-muted-foreground mr-1"
onClick={() => router.push("/dashboard/messages")}
>
Expand Down Expand Up @@ -383,10 +384,10 @@ export function ChatInterface({
{/* Manage Buttons (Floating) */}
{isMe && !isEditing && (
<div className="absolute right-4 top-0 -translate-y-1/2 bg-popover border border-border rounded-md shadow-lg opacity-0 group-hover:opacity-100 transition-opacity flex items-center z-10">
<Button variant="ghost" size="icon" className="h-8 w-8 hover:bg-muted rounded-l-md" onClick={() => startEdit(msg)}>
<Button variant="ghost" size="icon" aria-label="Edit message" className="h-8 w-8 hover:bg-muted rounded-l-md" onClick={() => startEdit(msg)}>
<Pencil className="w-3.5 h-3.5 text-muted-foreground" />
</Button>
<Button variant="ghost" size="icon" className="h-8 w-8 hover:bg-destructive/10 hover:text-destructive rounded-r-md" onClick={() => handleDelete(msg.id)}>
<Button variant="ghost" size="icon" aria-label="Delete message" className="h-8 w-8 hover:bg-destructive/10 hover:text-destructive rounded-r-md" onClick={() => handleDelete(msg.id)}>
<Trash2 className="w-3.5 h-3.5" />
</Button>
</div>
Expand All @@ -400,7 +401,7 @@ export function ChatInterface({
<div className="px-6 pb-2 pt-2 shrink-0 z-20">
<div className="bg-muted/50 backdrop-blur-xl rounded-2xl flex items-center p-2 gap-3 border border-border focus-within:ring-1 focus-within:ring-primary/20 focus-within:border-primary/20 transition-all shadow-sm">
<div className="flex -space-x-1">
<Button size="icon" variant="ghost" className="rounded-full h-9 w-9 text-muted-foreground hover:text-foreground hover:bg-muted transition-colors">
<Button size="icon" variant="ghost" aria-label="Add attachment" className="rounded-full h-9 w-9 text-muted-foreground hover:text-foreground hover:bg-muted transition-colors">
<Plus className="w-5 h-5" />
</Button>
</div>
Expand All @@ -415,10 +416,10 @@ export function ChatInterface({
</form>

<div className="flex items-center gap-1.5 shrink-0 pr-1">
<Button size="icon" variant="ghost" className="rounded-full h-9 w-9 text-muted-foreground hover:text-foreground hover:bg-muted hover:rotate-12 transition-all duration-300">
<Button size="icon" variant="ghost" aria-label="Send a gift" className="rounded-full h-9 w-9 text-muted-foreground hover:text-foreground hover:bg-muted hover:rotate-12 transition-all duration-300">
<Gift className="w-5 h-5" />
</Button>
<Button size="icon" variant="ghost" className="rounded-full h-9 w-9 text-muted-foreground hover:text-foreground hover:bg-muted hover:scale-110 transition-all duration-300">
<Button size="icon" variant="ghost" aria-label="Add emoji" className="rounded-full h-9 w-9 text-muted-foreground hover:text-foreground hover:bg-muted hover:scale-110 transition-all duration-300">
<Smile className="w-5 h-5" />
</Button>
</div>
Expand Down