Skip to content

🎨 Palette: [UX improvement] Add ARIA labels to assistant icon buttons #145

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 assistant icon buttons #145

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 aria-label="Attach file" className="p-1.5 rounded-lg hover:bg-white/5 text-slate-400 hover:text-indigo-400 transition-colors" title="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 aria-label="Send Image to Vision Model" 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">
<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 aria-label="Voice Input" className="p-1.5 rounded-lg hover:bg-white/5 text-slate-400 hover:text-amber-400 transition-colors" title="Voice Input">
<Mic className="w-4 h-4" />
</button>
<div className="flex-1" />
Expand All @@ -440,13 +440,15 @@ export default function DedicatedAssistantPage() {

{isLoading ? (
<button
aria-label="Cancel request"
onClick={() => {/* Implement Cancel */}}
Copy link
Copy Markdown
Contributor

@coderabbitai coderabbitai Bot Mar 27, 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 handler is not implemented.

The onClick handler contains only a placeholder comment. Users can click this button while a request is loading, but nothing happens. This creates a confusing experience where a prominent "Cancel" button appears non-functional.

Do you want me to generate an implementation for request cancellation using AbortController, or would you prefer to track this as a separate issue?

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

In `@src/app/assistant/page.tsx` at line 444, Implement a real cancel handler
using AbortController: create and store an AbortController instance (e.g., in a
React ref like requestAbortControllerRef) when starting the request in the
function that sends the request (e.g., sendRequest/fetchAssistantResponse), pass
controller.signal into the fetch/axios call there, and wire the Cancel button's
onClick to call requestAbortControllerRef.current?.abort() and then clear/reset
any loading state and controller ref; also ensure the request promise catch
handles AbortError specifically to avoid showing an error toast. Reference the
onClick placeholder in page.tsx, the request-sending function
(sendRequest/fetchAssistantResponse), and a requestAbortControllerRef (or
similar) when making these changes.

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"
>
<StopCircle className="w-5 h-5" />
</button>
) : (
<button
aria-label="Send message"
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"
Expand Down
Loading