feat(react-toast): use get-deep-active-element to cross the shadow DOM boundary

Author: cpsoinos

packages/react/toast/package.json

@@ -34,6 +34,7 @@
     "build": "radix-build"
   },
   "dependencies": {
+    "@radix-ui/deep-active-element": "workspace:*",
     "@radix-ui/primitive": "workspace:*",
     "@radix-ui/react-collection": "workspace:*",
     "@radix-ui/react-compose-refs": "workspace:*",

packages/react/toast/src/toast.tsx

@@ -14,6 +14,7 @@ import { useLayoutEffect } from '@radix-ui/react-use-layout-effect';
 import { VisuallyHidden } from '@radix-ui/react-visually-hidden';
 
 import type { Scope } from '@radix-ui/react-context';
+import { getDeepActiveElement } from '@radix-ui/deep-active-element'
 
 /* -------------------------------------------------------------------------------------------------
  * ToastProvider
@@ -193,7 +194,7 @@ const ToastViewport = React.forwardRef<ToastViewportElement, ToastViewportProps>
         };
 
         const handlePointerLeaveResume = () => {
-          const isFocusInside = wrapper.contains(document.activeElement);
+          const isFocusInside = wrapper.contains(getDeepActiveElement());
           if (!isFocusInside) handleResume();
         };
 
@@ -243,7 +244,7 @@ const ToastViewport = React.forwardRef<ToastViewportElement, ToastViewportProps>
           const isTabKey = event.key === 'Tab' && !isMetaKey;
 
           if (isTabKey) {
-            const focusedElement = document.activeElement;
+            const focusedElement = getDeepActiveElement();
             const isTabbingBackwards = event.shiftKey;
             const targetIsViewport = event.target === viewport;
 
@@ -491,7 +492,7 @@ const ToastImpl = React.forwardRef<ToastImplElement, ToastImplProps>(
     const handleClose = useCallbackRef(() => {
       // focus viewport if focus is within toast to read the remaining toast
       // count to SR users and ensure focus isn't lost
-      const isFocusInToast = node?.contains(document.activeElement);
+      const isFocusInToast = node?.contains(getDeepActiveElement());
       if (isFocusInToast) context.viewport?.focus();
       onClose();
     });
@@ -935,12 +936,12 @@ function getTabbableCandidates(container: HTMLElement) {
 }
 
 function focusFirst(candidates: HTMLElement[]) {
-  const previouslyFocusedElement = document.activeElement;
+  const previouslyFocusedElement = getDeepActiveElement();
   return candidates.some((candidate) => {
     // if focus is already where we want to go, we don't want to keep going through the candidates
     if (candidate === previouslyFocusedElement) return true;
     candidate.focus();
-    return document.activeElement !== previouslyFocusedElement;
+    return getDeepActiveElement() !== previouslyFocusedElement;
   });
 }