Skip to content

🎨 Palette: [UX improvement] Add aria-labels to icon-only buttons in AI Assistant #147

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
Cukurikik wants to merge 1 commit into
base: main
Choose a base branch
from
Open

🎨 Palette: [UX improvement] Add aria-labels to icon-only buttons in AI Assistant #147

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
8 changes: 5 additions & 3 deletions src/app/assistant/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -410,13 +410,13 @@ export default function DedicatedAssistantPage() {

{/* Attachments & Tools Header */}
<div className="flex items-center gap-2 px-4 py-2 border-b border-white/5">
<button className="p-1.5 rounded-lg hover:bg-white/5 text-slate-400 hover:text-indigo-400 transition-colors" title="Attach file">
<button className="p-1.5 rounded-lg hover:bg-white/5 text-slate-400 hover:text-indigo-400 transition-colors" title="Attach file" aria-label="Attach file">
<Paperclip className="w-4 h-4" />
</button>
<button className="p-1.5 rounded-lg hover:bg-white/5 text-slate-400 hover:text-emerald-400 transition-colors" title="Send Image to Vision Model">
<button className="p-1.5 rounded-lg hover:bg-white/5 text-slate-400 hover:text-emerald-400 transition-colors" title="Send Image to Vision Model" aria-label="Send Image to Vision Model">
<ImageIcon className="w-4 h-4" />
</button>
<button className="p-1.5 rounded-lg hover:bg-white/5 text-slate-400 hover:text-amber-400 transition-colors" title="Voice Input">
<button className="p-1.5 rounded-lg hover:bg-white/5 text-slate-400 hover:text-amber-400 transition-colors" title="Voice Input" aria-label="Voice Input">
<Mic className="w-4 h-4" />
</button>
<div className="flex-1" />
Expand All @@ -442,6 +442,7 @@ export default function DedicatedAssistantPage() {
<button
onClick={() => {/* Implement Cancel */}}
className="shrink-0 w-12 h-12 rounded-2xl bg-red-500/20 text-red-400 flex items-center justify-center hover:bg-red-500/30 transition-colors border border-red-500/30"
aria-label="Cancel response"
>
Comment on lines 443 to 446
Copy link
Copy Markdown
Contributor

@coderabbitai coderabbitai Bot Mar 28, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🟠 Major

Cancel response is still a no-op.

At Line 443, the handler is empty, so the Line 445 “Cancel response” control cannot cancel in-flight requests. This should be implemented (e.g., request abort) or temporarily hidden/disabled.

I can draft an AbortController implementation for this flow and provide a focused patch if you want.

🤖 Prompt for AI Agents 
Verify each finding against the current code and only fix it if needed.

In `@src/app/assistant/page.tsx` around lines 443 - 446, The Cancel response
button is a no-op; implement request abort by creating an AbortController (e.g.,
generationAbortControllerRef) when starting the in-flight request (in the
function that sends the chat/generation request, e.g.,
sendMessage/fetchChatResponse) and pass controller.signal into the fetch/axios
call; wire the onClick to call generationAbortControllerRef.current?.abort(),
clear/reset the ref and update UI state (e.g., setIsGenerating = false) when
aborting or on request completion, and disable or hide the Cancel response
button when there is no active controller to avoid no-op clicks.

<StopCircle className="w-5 h-5" />
</button>
Expand All @@ -450,6 +451,7 @@ export default function DedicatedAssistantPage() {
onClick={handleSubmit}
disabled={!inputValue.trim()}
className="shrink-0 w-12 h-12 rounded-2xl bg-indigo-600 text-white flex items-center justify-center hover:bg-indigo-500 transition-all disabled:opacity-30 disabled:hover:bg-indigo-600 border border-indigo-400/30 shadow-lg shadow-indigo-500/20 group"
aria-label="Send message"
>
<Send className="w-5 h-5 group-hover:translate-x-0.5 group-hover:-translate-y-0.5 transition-transform" />
</button>
Expand Down
Loading