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

@@ -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>