Skip to content

🎨 Palette: Improve Chat Interface Accessibility #15

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: Improve Chat Interface Accessibility #15

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 @@
## 2025-03-07 - Icon-only buttons lacking aria-labels
**Learning:** Found multiple instances where icon-only buttons (like Plus, Gift, Smile, Voice Call, Video Call) don't have aria-labels, which hurts accessibility for screen readers. Some use `title` but `aria-label` is much better for a11y.
**Action:** When finding icon-only buttons, add `aria-label` instead of or in addition to `title`.
16 changes: 9 additions & 7 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 @@ -234,6 +234,7 @@ export function ChatInterface({
size="icon"
className="md:hidden -ml-2 h-8 w-8 rounded-full bg-muted text-muted-foreground mr-1"
onClick={() => router.push("/dashboard/messages")}
aria-label="Back to messages"
>
<ArrowLeft className="w-5 h-5" />
</Button>
Expand All @@ -258,10 +259,10 @@ export function ChatInterface({
</div>

<div className="flex items-center gap-1 text-muted-foreground">
<Button variant="ghost" size="icon" className="hover:text-foreground hover:bg-muted rounded-full" title="Start Voice Call" onClick={() => handleStartCall("voice")}>
<Button variant="ghost" size="icon" className="hover:text-foreground hover:bg-muted rounded-full" title="Start Voice Call" aria-label="Start Voice Call" onClick={() => handleStartCall("voice")}>
<Phone className="w-5 h-5" />
</Button>
<Button variant="ghost" size="icon" className="hover:text-foreground hover:bg-muted rounded-full" title="Start Video Call" onClick={() => handleStartCall("video")}>
<Button variant="ghost" size="icon" className="hover:text-foreground hover:bg-muted rounded-full" title="Start Video Call" aria-label="Start Video Call" onClick={() => handleStartCall("video")}>
<Video className="w-5 h-5" />
</Button>
<div className="w-px h-6 bg-border mx-2" />
Expand All @@ -270,6 +271,7 @@ export function ChatInterface({
size="icon"
className={cn("rounded-full transition-colors", showInfo ? "text-foreground bg-muted" : "hover:text-foreground hover:bg-muted")}
title="Conversation Details"
aria-label="Conversation Details"
onClick={() => setShowInfo(!showInfo)}
>
<Info className="w-5 h-5" />
Expand Down Expand Up @@ -383,10 +385,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" className="h-8 w-8 hover:bg-muted rounded-l-md" onClick={() => startEdit(msg)} aria-label="Edit message">
<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" className="h-8 w-8 hover:bg-destructive/10 hover:text-destructive rounded-r-md" onClick={() => handleDelete(msg.id)} aria-label="Delete message">
<Trash2 className="w-3.5 h-3.5" />
</Button>
</div>
Expand All @@ -400,7 +402,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" className="rounded-full h-9 w-9 text-muted-foreground hover:text-foreground hover:bg-muted transition-colors" aria-label="Add attachment">
<Plus className="w-5 h-5" />
</Button>
</div>
Expand All @@ -415,10 +417,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" className="rounded-full h-9 w-9 text-muted-foreground hover:text-foreground hover:bg-muted hover:rotate-12 transition-all duration-300" aria-label="Send gift">
<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" className="rounded-full h-9 w-9 text-muted-foreground hover:text-foreground hover:bg-muted hover:scale-110 transition-all duration-300" aria-label="Send emoji">
<Smile className="w-5 h-5" />
</Button>
</div>
Expand Down