Skip to content

Fix accessibility of icon-only buttons in ConversationsSidebar #155

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

Draft
Dexploarer wants to merge 1 commit into
base: main
Choose a base branch
from
Draft

Fix accessibility of icon-only buttons in ConversationsSidebar #155

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
5 changes: 3 additions & 2 deletions apps/app/src/components/ConversationsSidebar.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -119,7 +119,7 @@ export function ConversationsSidebar({
onClick={onClose}
Copy link

@codereviewbot-ai codereviewbot-ai bot Feb 27, 2026

Choose a reason for hiding this comment

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

The onClick={onClose} handler assumes that onClose is always defined, but the prop is optional. This could result in a runtime error if onClose is not provided. To improve robustness, use a conditional invocation: onClick={onClose ?? (() => {})} or onClick={() => onClose?.()}.

aria-label="Close chats panel"
>
×
<span aria-hidden="true">&times;</span>
</button>
</div>
)}
Expand Down Expand Up @@ -221,8 +221,9 @@ export function ConversationsSidebar({
setConfirmDeleteId(conv.id);
}}
Comment on lines 221 to 222
Copy link

@codereviewbot-ai codereviewbot-ai bot Feb 27, 2026

Choose a reason for hiding this comment

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

The current logic allows multiple conversations to enter the 'confirm delete' state if the user clicks delete on several items in quick succession. This can lead to a confusing user experience. Consider restricting the confirmation state to a single conversation at a time, or disabling other delete buttons while one is active.

title="Delete conversation"
aria-label={`Delete conversation: ${conv.title}`}
Copy link

@gemini-code-assist gemini-code-assist bot Feb 27, 2026

Choose a reason for hiding this comment

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

medium

This is a great addition for screen reader users. For consistency and to provide better context to mouse users via the tooltip, consider also making the title attribute on the previous line dynamic to match this aria-label:

title={`Delete conversation: ${conv.title}`}

>
×
<span aria-hidden="true">×</span>
</button>
)}
</>
Expand Down
Loading