From 2ed2b87c305af9bc41c2744e62b0a644b2fc035a Mon Sep 17 00:00:00 2001
From: Dustin Healy <54083382+dustinhealy@users.noreply.github.com>
Date: Tue, 9 Dec 2025 17:13:21 -0800
Subject: [PATCH] =?UTF-8?q?=E2=84=B9=EF=B8=8F=20feat:=20Dismissible=20Tool?=
 =?UTF-8?q?tips=20in=20Modals=20(#10851)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../client/src/components/OriginalDialog.tsx  | 87 ++++++++++++++-----
 1 file changed, 65 insertions(+), 22 deletions(-)

diff --git a/packages/client/src/components/OriginalDialog.tsx b/packages/client/src/components/OriginalDialog.tsx
index 08f6ef6bba..206cca87fe 100644
--- a/packages/client/src/components/OriginalDialog.tsx
+++ b/packages/client/src/components/OriginalDialog.tsx
@@ -66,28 +66,71 @@ type DialogContentProps = React.ComponentPropsWithoutRef<typeof DialogPrimitive.
 const DialogContent = React.forwardRef<
   React.ElementRef<typeof DialogPrimitive.Content>,
   DialogContentProps
->(({ className, overlayClassName, showCloseButton = true, children, ...props }, ref) => (
-  <DialogPortal>
-    <DialogOverlay className={overlayClassName} />
-    <DialogPrimitive.Content
-      ref={ref}
-      className={cn(
-        'max-w-11/12 fixed left-[50%] top-[50%] z-50 grid max-h-[90vh] w-full translate-x-[-50%] translate-y-[-50%] gap-4 overflow-y-auto rounded-2xl bg-background p-6 text-text-primary shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%]',
-        className,
-      )}
-      {...props}
-    >
-      {children}
-      {showCloseButton && (
-        <DialogPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 ring-ring-primary ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground">
-          <X className="h-6 w-6" aria-hidden="true" />
-          {/* eslint-disable-next-line i18next/no-literal-string */}
-          <span className="sr-only">Close</span>
-        </DialogPrimitive.Close>
-      )}
-    </DialogPrimitive.Content>
-  </DialogPortal>
-));
+>(
+  (
+    {
+      className,
+      overlayClassName,
+      showCloseButton = true,
+      children,
+      onEscapeKeyDown: propsOnEscapeKeyDown,
+      ...props
+    },
+    ref,
+  ) => {
+    /* Handle Escape key to prevent closing dialog if a tooltip is open 
+    (this is a workaround in order to achieve WCAG compliance which requires
+    that our tooltips be dismissable with Escape key) */
+    const handleEscapeKeyDown = React.useCallback(
+      (event: KeyboardEvent) => {
+        const tooltips = document.querySelectorAll('.tooltip');
+
+        for (const tooltip of Array.from(tooltips)) {
+          const computedStyle = window.getComputedStyle(tooltip);
+          const opacity = parseFloat(computedStyle.opacity);
+
+          if (
+            tooltip.parentElement &&
+            computedStyle.display !== 'none' &&
+            computedStyle.visibility !== 'hidden' &&
+            opacity > 0
+          ) {
+            event.preventDefault();
+            return;
+          }
+        }
+
+        // Call the original handler if it exists
+        propsOnEscapeKeyDown?.(event);
+      },
+      [propsOnEscapeKeyDown],
+    );
+
+    return (
+      <DialogPortal>
+        <DialogOverlay className={overlayClassName} />
+        <DialogPrimitive.Content
+          ref={ref}
+          onEscapeKeyDown={handleEscapeKeyDown}
+          className={cn(
+            'max-w-11/12 fixed left-[50%] top-[50%] z-50 grid max-h-[90vh] w-full translate-x-[-50%] translate-y-[-50%] gap-4 overflow-y-auto rounded-2xl bg-background p-6 text-text-primary shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%]',
+            className,
+          )}
+          {...props}
+        >
+          {children}
+          {showCloseButton && (
+            <DialogPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 ring-ring-primary ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground">
+              <X className="h-6 w-6" aria-hidden="true" />
+              {/* eslint-disable-next-line i18next/no-literal-string */}
+              <span className="sr-only">Close</span>
+            </DialogPrimitive.Close>
+          )}
+        </DialogPrimitive.Content>
+      </DialogPortal>
+    );
+  },
+);
 DialogContent.displayName = DialogPrimitive.Content.displayName;
 
 const DialogHeader = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (