From d4eb8e4b3a9296f3b8c5cd2fd03247a574a9074a Mon Sep 17 00:00:00 2001
From: "devin-ai-integration[bot]"
 <158243242+devin-ai-integration[bot]@users.noreply.github.com>
Date: Fri, 11 Apr 2025 15:42:14 +0000
Subject: [PATCH] fix: ensure only top tip has focusable elements (#20661)

* fix: ensure only top tip has focusable elements

Co-Authored-By: sean@cal.com <sean@cal.com>

* fix: disable all interactive elements for non-top tips

Co-Authored-By: sean@cal.com <sean@cal.com>

---------

Co-authored-by: Devin AI <158243242+devin-ai-integration[bot]@users.noreply.github.com>
Co-authored-by: sean@cal.com <sean@cal.com>
---
 packages/features/tips/Tips.tsx | 13 ++++++++++---
 1 file changed, 10 insertions(+), 3 deletions(-)

diff --git a/packages/features/tips/Tips.tsx b/packages/features/tips/Tips.tsx
index f7fc3af7c4..7163410885 100644
--- a/packages/features/tips/Tips.tsx
+++ b/packages/features/tips/Tips.tsx
@@ -193,6 +193,7 @@ function Tips() {
         gridTemplateColumns: "1fr",
       }}>
       {list.map((tip) => {
+        const isTopTip = baseOriginalList.indexOf(tip) === 0;
         return (
           <div
             className="relative"
@@ -211,11 +212,17 @@ function Tips() {
               <Card
                 variant="SidebarCard"
                 thumbnailUrl={tip.thumbnailUrl}
-                mediaLink={tip.mediaLink}
+                mediaLink={isTopTip ? tip.mediaLink : undefined}
                 title={tip.title}
                 description={tip.description}
-                learnMore={{ href: tip.href, text: t("learn_more") }}
-                actionButton={{ onClick: () => handleRemoveItem(tip.id), child: t("dismiss") }}
+                learnMore={isTopTip ? { href: tip.href, text: t("learn_more") } : undefined}
+                actionButton={
+                  isTopTip ? { onClick: () => handleRemoveItem(tip.id), child: t("dismiss") } : undefined
+                }
+                containerProps={{
+                  tabIndex: isTopTip ? undefined : -1,
+                  "aria-hidden": isTopTip ? undefined : "true",
+                }}
               />
             </div>
           </div>