From 014eb106622d926e4592bfce4e4f6562e002b652 Mon Sep 17 00:00:00 2001
From: Daniel Lew <dlew@users.noreply.github.com>
Date: Wed, 19 Nov 2025 16:10:10 -0600
Subject: [PATCH] =?UTF-8?q?=F0=9F=93=A2=20fix:=20Resolved=20Screen=20Reade?=
 =?UTF-8?q?r=20Issues=20with=20`TooltipAnchor`=20(#10580)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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.
---
 .../components/Artifacts/ArtifactVersion.tsx  |  7 ++++-
 client/src/components/Chat/Landing.tsx        |  1 +
 .../Chat/Messages/Content/DialogImage.tsx     | 26 ++++++++++++++-----
 .../ConvoOptions/SharedLinkButton.tsx         | 19 +++++++++++---
 .../Builder/AssistantConversationStarters.tsx | 12 +++++----
 packages/client/src/components/Tooltip.tsx    |  3 ---
 6 files changed, 49 insertions(+), 19 deletions(-)

diff --git a/client/src/components/Artifacts/ArtifactVersion.tsx b/client/src/components/Artifacts/ArtifactVersion.tsx
index 1998ff02..7d17416c 100644
--- a/client/src/components/Artifacts/ArtifactVersion.tsx
+++ b/client/src/components/Artifacts/ArtifactVersion.tsx
@@ -59,7 +59,12 @@ export default function ArtifactVersion({
         <TooltipAnchor
           description={localize('com_ui_change_version')}
           render={
-            <Button size="icon" variant="ghost" asChild>
+            <Button
+              size="icon"
+              variant="ghost"
+              asChild
+              aria-label={localize('com_ui_change_version')}
+            >
               <MenuButton>
                 <History
                   size={18}
diff --git a/client/src/components/Chat/Landing.tsx b/client/src/components/Chat/Landing.tsx
index 15e53aba..c0148a43 100644
--- a/client/src/components/Chat/Landing.tsx
+++ b/client/src/components/Chat/Landing.tsx
@@ -166,6 +166,7 @@ export default function Landing({ centerFormOnLanding }: { centerFormOnLanding:
               <TooltipAnchor
                 className="absolute bottom-[27px] right-2"
                 description={localize('com_ui_happy_birthday')}
+                aria-label={localize('com_ui_happy_birthday')}
               >
                 <BirthdayIcon />
               </TooltipAnchor>
diff --git a/client/src/components/Chat/Messages/Content/DialogImage.tsx b/client/src/components/Chat/Messages/Content/DialogImage.tsx
index 9eb5f9e7..6923f151 100644
--- a/client/src/components/Chat/Messages/Content/DialogImage.tsx
+++ b/client/src/components/Chat/Messages/Content/DialogImage.tsx
@@ -180,6 +180,10 @@ export default function DialogImage({ isOpen, onOpenChange, src = '', downloadIm
     }
   }, [isPromptOpen, zoom]);
 
+  const imageDetailsLabel = isPromptOpen
+    ? localize('com_ui_hide_image_details')
+    : localize('com_ui_show_image_details');
+
   return (
     <OGDialog open={isOpen} onOpenChange={onOpenChange}>
       <OGDialogContent
@@ -198,6 +202,7 @@ export default function DialogImage({ isOpen, onOpenChange, src = '', downloadIm
                 onClick={() => onOpenChange(false)}
                 variant="ghost"
                 className="h-10 w-10 p-0 hover:bg-surface-hover"
+                aria-label={localize('com_ui_close')}
               >
                 <X className="size-7 sm:size-6" />
               </Button>
@@ -208,7 +213,12 @@ export default function DialogImage({ isOpen, onOpenChange, src = '', downloadIm
               <TooltipAnchor
                 description={localize('com_ui_reset_zoom')}
                 render={
-                  <Button onClick={resetZoom} variant="ghost" className="h-10 w-10 p-0">
+                  <Button
+                    onClick={resetZoom}
+                    variant="ghost"
+                    className="h-10 w-10 p-0"
+                    aria-label={localize('com_ui_reset_zoom')}
+                  >
                     <RotateCcw className="size-6" />
                   </Button>
                 }
@@ -217,22 +227,24 @@ export default function DialogImage({ isOpen, onOpenChange, src = '', downloadIm
             <TooltipAnchor
               description={localize('com_ui_download')}
               render={
-                <Button onClick={() => downloadImage()} variant="ghost" className="h-10 w-10 p-0">
+                <Button
+                  onClick={() => downloadImage()}
+                  variant="ghost"
+                  className="h-10 w-10 p-0"
+                  aria-label={localize('com_ui_download')}
+                >
                   <ArrowDownToLine className="size-6" />
                 </Button>
               }
             />
             <TooltipAnchor
-              description={
-                isPromptOpen
-                  ? localize('com_ui_hide_image_details')
-                  : localize('com_ui_show_image_details')
-              }
+              description={imageDetailsLabel}
               render={
                 <Button
                   onClick={() => setIsPromptOpen(!isPromptOpen)}
                   variant="ghost"
                   className="h-10 w-10 p-0"
+                  aria-label={imageDetailsLabel}
                 >
                   {isPromptOpen ? (
                     <PanelLeftOpen className="size-7 sm:size-6" />
diff --git a/client/src/components/Conversations/ConvoOptions/SharedLinkButton.tsx b/client/src/components/Conversations/ConvoOptions/SharedLinkButton.tsx
index 9a2b7409..e5d1dbfb 100644
--- a/client/src/components/Conversations/ConvoOptions/SharedLinkButton.tsx
+++ b/client/src/components/Conversations/ConvoOptions/SharedLinkButton.tsx
@@ -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>
               )}
diff --git a/client/src/components/SidePanel/Builder/AssistantConversationStarters.tsx b/client/src/components/SidePanel/Builder/AssistantConversationStarters.tsx
index 9c8da37b..01b45c27 100644
--- a/client/src/components/SidePanel/Builder/AssistantConversationStarters.tsx
+++ b/client/src/components/SidePanel/Builder/AssistantConversationStarters.tsx
@@ -59,6 +59,10 @@ const AssistantConversationStarters: React.FC<AssistantConversationStartersProps
 
   const hasReachedMax = field.value.length >= Constants.MAX_CONVO_STARTERS;
 
+  const addConversationStarterLabel = hasReachedMax
+    ? localize('com_assistants_max_starters_reached')
+    : localize('com_ui_add');
+
   return (
     <div className="relative">
       <label className={labelClass} htmlFor="conversation_starters">
@@ -108,11 +112,8 @@ const AssistantConversationStarters: React.FC<AssistantConversationStartersProps
               >
                 <TooltipAnchor
                   side="top"
-                  description={
-                    hasReachedMax
-                      ? localize('com_assistants_max_starters_reached')
-                      : localize('com_ui_add')
-                  }
+                  description={addConversationStarterLabel}
+                  aria-label={addConversationStarterLabel}
                   className="flex size-7 items-center justify-center rounded-lg transition-colors duration-200 hover:bg-surface-hover"
                   onClick={handleAddStarter}
                   disabled={hasReachedMax}
@@ -140,6 +141,7 @@ const AssistantConversationStarters: React.FC<AssistantConversationStartersProps
             <TooltipAnchor
               side="top"
               description={localize('com_ui_delete')}
+              aria-label={localize('com_ui_delete')}
               className="absolute right-1 top-1 flex size-7 items-center justify-center rounded-lg transition-colors duration-200 hover:bg-surface-hover"
               onClick={() => handleDeleteStarter(index)}
             >
diff --git a/packages/client/src/components/Tooltip.tsx b/packages/client/src/components/Tooltip.tsx
index b9bc87fd..ed42cd1c 100644
--- a/packages/client/src/components/Tooltip.tsx
+++ b/packages/client/src/components/Tooltip.tsx
@@ -21,7 +21,6 @@ export const TooltipAnchor = forwardRef<HTMLDivElement, TooltipAnchorProps>(func
   const mounted = Ariakit.useStoreState(tooltip, (state) => state.mounted);
   const placement = Ariakit.useStoreState(tooltip, (state) => state.placement);
 
-  const id = useId();
   const sanitizer = useMemo(() => {
     const instance = DOMPurify();
     instance.addHook('afterSanitizeAttributes', (node) => {
@@ -79,7 +78,6 @@ export const TooltipAnchor = forwardRef<HTMLDivElement, TooltipAnchorProps>(func
         {...props}
         ref={ref}
         role={role}
-        aria-describedby={id}
         onKeyDown={handleKeyDown}
         className={cn('cursor-pointer', className)}
       />
@@ -89,7 +87,6 @@ export const TooltipAnchor = forwardRef<HTMLDivElement, TooltipAnchorProps>(func
             gutter={4}
             alwaysVisible
             className="tooltip"
-            id={id}
             render={
               <motion.div
                 initial={{ opacity: 0, x, y }}
-- 
2.51.2