🎨 Palette: [UX improvement] Add aria-labels to icon-only buttons in AI Assistant#147
🎨 Palette: [UX improvement] Add aria-labels to icon-only buttons in AI Assistant#147Cukurikik wants to merge 1 commit into
Conversation
…I Assistant Added explicit aria-labels to the icon-only buttons (Attach file, Send Image, Voice Input, Cancel response, Send message) in the AI Assistant interface to improve accessibility for screen readers. Co-authored-by: Cukurikik <266119688+Cukurikik@users.noreply.github.com>
|
👋 Jules, reporting for duty! I'm here to lend a hand with this pull request. When you start a review, I'll add a 👀 emoji to each comment to let you know I've read it. I'll focus on feedback directed at me and will do my best to stay out of conversations between you and other bots or reviewers to keep the noise down. I'll push a commit with your requested changes shortly after. Please note there might be a delay between these steps, but rest assured I'm on the job! For more direct control, you can switch me to Reactive Mode. When this mode is on, I will only act on comments where you specifically mention me with New to Jules? Learn more at jules.google/docs. For security, I will only act on instructions from the user who triggered this task. |
📝 WalkthroughWalkthroughEnhanced accessibility of button controls in the assistant page by adding explicit Changes
Estimated code review effort🎯 1 (Trivial) | ⏱️ ~3 minutes Poem
🚥 Pre-merge checks | ✅ 2 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (2 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches📝 Generate docstrings
🧪 Generate unit tests (beta)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 1
🧹 Nitpick comments (1)
src/app/assistant/page.tsx (1)
413-420: Avoid active affordance for currently unimplemented tool buttons.Line 413, Line 416, and Line 419 expose clickable controls with labels but no action. Either wire handlers or mark them as unavailable to prevent misleading UX for mouse/keyboard/screen-reader users.
Optional hardening diff (apply similarly to all three tool buttons)
-<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"> +<button + type="button" + disabled + aria-disabled="true" + className="p-1.5 rounded-lg text-slate-500 cursor-not-allowed" + title="Attach file (coming soon)" + aria-label="Attach file (coming soon)" +>🤖 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 413 - 420, The three tool buttons (the Paperclip, ImageIcon, and Mic buttons in page.tsx) present active affordances but have no handlers; update each button to reflect unavailability by either wiring the proper onClick handlers or disabling them: add disabled attribute (or aria-disabled="true" and tabIndex={-1} for non-button elements), ensure aria-labels remain descriptive, and add a tooltip/title indicating "Unavailable" (or similar) and a passive visual style (e.g., muted text class) so screen-reader and keyboard users are not misled; target the JSX elements containing Paperclip, ImageIcon, and Mic to apply these changes.
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Inline comments:
In `@src/app/assistant/page.tsx`:
- Around line 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.
---
Nitpick comments:
In `@src/app/assistant/page.tsx`:
- Around line 413-420: The three tool buttons (the Paperclip, ImageIcon, and Mic
buttons in page.tsx) present active affordances but have no handlers; update
each button to reflect unavailability by either wiring the proper onClick
handlers or disabling them: add disabled attribute (or aria-disabled="true" and
tabIndex={-1} for non-button elements), ensure aria-labels remain descriptive,
and add a tooltip/title indicating "Unavailable" (or similar) and a passive
visual style (e.g., muted text class) so screen-reader and keyboard users are
not misled; target the JSX elements containing Paperclip, ImageIcon, and Mic to
apply these changes.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: defaults
Review profile: CHILL
Plan: Pro
Run ID: 69241704-7851-4eed-9bf7-f5b58c3e119a
📒 Files selected for processing (1)
src/app/assistant/page.tsx
| 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" | ||
| > |
There was a problem hiding this comment.
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.
1 participant
💡 What: Added explicit
aria-labelattributes to the icon-only buttons in the AI Assistant interface (src/app/assistant/page.tsx). Specifically the paperclip, image icon, mic, cancel, and send buttons.🎯 Why: Icon-only buttons without an accessible name are inaccessible to users relying on screen readers. Adding
aria-labelensures the purpose of these interactive elements is clearly announced by assistive technologies.📸 Before/After: Visual presentation remains completely unchanged.
♿ Accessibility: Ensures that screen reader users can identify and interact with the primary messaging and attachment controls in the AI Assistant interface.
PR created automatically by Jules for task 18103435036469900804 started by @Cukurikik
Summary by CodeRabbit