ℹ️ feat: Dismissible Tooltips in Modals (#10851)

packages/client/src/components/OriginalDialog.tsx

@@ -66,11 +66,52 @@ type DialogContentProps = React.ComponentPropsWithoutRef<typeof DialogPrimitive.
 const DialogContent = React.forwardRef<
   React.ElementRef<typeof DialogPrimitive.Content>,
   DialogContentProps
->(({ className, overlayClassName, showCloseButton = true, children, ...props }, ref) => (
+>(
+  (
+    {
+      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,
@@ -87,7 +128,9 @@ const DialogContent = React.forwardRef<
           )}
         </DialogPrimitive.Content>
       </DialogPortal>
-));
+    );
+  },
+);
 DialogContent.displayName = DialogPrimitive.Content.displayName;
 
 const DialogHeader = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (