fix(ui): improve accessibility for chat and sidebar buttons#103
fix(ui): improve accessibility for chat and sidebar buttons#103Dexploarer wants to merge 1 commit intodevelopfrom
Conversation
- Add aria-label to delete button in ConversationsSidebar and make it visible on focus - Add aria-label to avatar, mute, and mic buttons in ChatView - Add aria-hidden to decorative SVGs - Add aria-label to chat input textarea
|
👋 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. |
|
Important Review skippedDraft detected. Please check the settings in the CodeRabbit UI or the You can disable this status message by setting the Use the checkbox below for a quick retry:
✨ Finishing Touches🧪 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 |
![codereviewbot-ai[bot]](https://avatars.githubusercontent.com/in/309638?s=60&v=4){kind=small}
| if (muting) voice.stopSpeaking(); | ||
| }} |
There was a problem hiding this comment.
Potential Race Condition in Mute Toggle
The mute toggle handler sets agentVoiceMuted and then immediately calls voice.stopSpeaking() if muting. If setAgentVoiceMuted is asynchronous (as is typical with React state setters), there is a risk that voice.stopSpeaking() may not reflect the latest mute state, especially if other logic depends on agentVoiceMuted.
Recommendation:
Call voice.stopSpeaking() before updating the state, or use a functional update to ensure the correct order:
onClick={() => {
setAgentVoiceMuted((muting) => {
if (!muting) voice.stopSpeaking();
return !muting;
});
}}This ensures voice.stopSpeaking() is called at the correct time.
| @@ -408,6 +411,7 @@ export function ChatView() { | |||
| onChange={(e) => setState("chatInput", e.target.value)} | |||
| onKeyDown={handleKeyDown} | |||
| disabled={chatSending} | |||
There was a problem hiding this comment.
Potential UX Issue: Disabling Textarea During Sending
Disabling the textarea when chatSending is true (disabled={chatSending}) may cause users to lose unsent input if they are typing when a send is triggered. This can lead to a frustrating user experience if input is not preserved.
Recommendation:
Instead of disabling the textarea, consider keeping it enabled and preventing further sends until the current send completes. Alternatively, preserve the input value so it is restored after sending.
| onClick={(e) => { | ||
| e.stopPropagation(); | ||
| void handleDeleteConversation(conv.id); | ||
| }} |
There was a problem hiding this comment.
Lack of error handling for conversation deletion
The handleDeleteConversation(conv.id) call is executed without any error handling or user feedback. If the deletion fails (e.g., due to a network error or server issue), the user will not be informed, and the UI may become inconsistent.
Recommendation:
Wrap the delete operation in a try-catch block and provide user feedback in case of failure. For example:
onClick={async (e) => {
e.stopPropagation();
try {
await handleDeleteConversation(conv.id);
} catch (err) {
// Show error notification or message to user
}
}}| <button | ||
| data-testid="conv-delete" | ||
| className="opacity-0 group-hover:opacity-100 transition-opacity border-none bg-transparent text-muted hover:text-danger hover:bg-destructive-subtle cursor-pointer text-sm px-1 py-0.5 rounded flex-shrink-0" | ||
| className="opacity-0 group-hover:opacity-100 focus:opacity-100 transition-opacity border-none bg-transparent text-muted hover:text-danger hover:bg-destructive-subtle cursor-pointer text-sm px-1 py-0.5 rounded flex-shrink-0" | ||
| onClick={(e) => { | ||
| e.stopPropagation(); | ||
| void handleDeleteConversation(conv.id); | ||
| }} | ||
| title="Delete conversation" | ||
| aria-label="Delete conversation" | ||
| > | ||
| × | ||
| <span aria-hidden="true">×</span> | ||
| </button> |
There was a problem hiding this comment.
No confirmation before conversation deletion
The delete button immediately deletes the conversation upon click, which increases the risk of accidental deletions. There is no confirmation dialog or undo option.
Recommendation:
Add a confirmation step before performing the deletion, such as a modal dialog or a browser confirm() prompt:
onClick={(e) => {
e.stopPropagation();
if (window.confirm('Are you sure you want to delete this conversation?')) {
void handleDeleteConversation(conv.id);
}
}}
Summary of ChangesHello @Dexploarer, I'm Gemini Code Assist1! I'm currently reviewing this pull request and will post my feedback shortly. In the meantime, here's a summary to help you and other reviewers quickly get up to speed! This pull request significantly improves the accessibility of key interactive elements within the chat interface and conversations sidebar. The changes ensure that users relying on keyboard navigation and screen readers have a more robust and understandable experience, particularly for icon-only buttons and input fields that previously lacked proper semantic information or visual cues on focus. Highlights
🧠 New Feature in Public Preview: You can now enable Memory to help Gemini Code Assist learn from your team's feedback. This makes future code reviews more consistent and personalized to your project's style. Click here to enable Memory in your admin console. Changelog
Activity
Using Gemini Code AssistThe full guide for Gemini Code Assist can be found on our documentation page, here are some quick tips. Invoking Gemini You can request assistance from Gemini at any point by creating a comment using either
Customization To customize Gemini Code Assist for GitHub experience, repository maintainers can create a configuration file and/or provide a custom code review style guide (such as PEP-8 for Python) by creating and adding files to a Limitations & Feedback Gemini Code Assist may make mistakes. Please leave feedback on any instances where its feedback is incorrect or counter productive. You can react with 👍 and 👎 on @gemini-code-assist comments. If you're interested in giving your feedback about your experience with Gemini Code Assist for Github and other Google products, sign up here. You can also get AI-powered code generation, chat, as well as code reviews directly in the IDE at no cost with the Gemini Code Assist IDE Extension. Footnotes
|
![gemini-code-assist[bot]](https://avatars.githubusercontent.com/in/956858?s=60&v=4){kind=small}
There was a problem hiding this comment.
Code Review
This pull request significantly improves the accessibility of interactive elements in the chat and sidebar interfaces. By adding aria-label attributes to icon-only buttons and the chat input, and aria-hidden="true" to SVG icons, screen reader users will have a much better experience. The fix for the delete button's visibility on focus is also a crucial accessibility improvement. The addition to the .jules/palette.md journal is a good practice for documenting learning and actions related to accessibility.
1 participant
Improved accessibility for icon-only buttons in the chat interface and conversations sidebar.
opacity-0and only visible on hover. Addedfocus:opacity-100to ensure keyboard users can see the button when focused. Addedaria-label="Delete conversation"and hid the "×" character from screen readers.aria-labelattributes to the avatar toggle, mute button, and voice input button. Addedaria-hidden="true"to the SVG icons to prevent redundant announcements. Addedaria-labelto the chat input textarea..jules/palette.mdregarding invisible interactive elements.Verified with Playwright script (headless) and visual inspection of screenshots confirming focus states and attribute presence. Ran existing tests to ensure no regressions.
PR created automatically by Jules for task 16450050347844987900 started by @Dexploarer