Andreas/LibreChat
1
0
Fork 0
mirror of https://github.com/danny-avila/LibreChat.git synced 2025-12-27 13:48:51 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions 3

📢 fix: Resolved Screen Reader Issues with TooltipAnchor (#10580)

Browse source 
TooltipAnchor was automatically adding an `aria-describedby`
tag which often duplicated the labeling already present inside
of the anchor. E.g., the screen reader might say
"New Chat, New Chat, button" instead of just "New Chat, button."

I've removed the TooltipAnchor's automatic `aria-describedby` and
worked to make sure that anyone using TooltipAnchor properly defines
its labeling.
This commit is contained in:
Daniel Lew 2025-11-19 16:10:10 -06:00 • committed by GitHub
parent 8b9afd5965
commit 014eb10662
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
6 changed files with 49 additions and 19 deletions
Download patch file Download diff file Expand all files Collapse all files

19
client/src/components/Conversations/ConvoOptions/SharedLinkButton.tsx
View file

@ -113,6 +113,8 @@ export default function SharedLinkButton({
}
};
const qrCodeLabel = showQR ? localize('com_ui_hide_qr') : localize('com_ui_show_qr');
return (
<>
<div className="flex gap-2">
@ -130,6 +132,7 @@ export default function SharedLinkButton({
<Button
{...props}
onClick={() => updateSharedLink()}
aria-label={localize('com_ui_refresh_link')}
variant="outline"
disabled={isUpdateLoading}
>
@ -143,9 +146,14 @@ export default function SharedLinkButton({
/>
<TooltipAnchor
description={showQR ? localize('com_ui_hide_qr') : localize('com_ui_show_qr')}
description={qrCodeLabel}
render={(props) => (
<Button {...props} onClick={() => setShowQR(!showQR)} variant="outline">
<Button
{...props}
onClick={() => setShowQR(!showQR)}
variant="outline"
aria-label={qrCodeLabel}
>
<QrCode className="size-4" />
</Button>
)}
@ -154,7 +162,12 @@ export default function SharedLinkButton({
<TooltipAnchor
description={localize('com_ui_delete')}
render={(props) => (
<Button {...props} onClick={() => setShowDeleteDialog(true)} variant="destructive">
<Button
{...props}
onClick={() => setShowDeleteDialog(true)}
variant="destructive"
aria-label={localize('com_ui_delete')}
>
<Trash2 className="size-4" />
</Button>
)}