ECHOES-891 Make toasts & modals compatible (#614)

Author: jeremy-davis-sonarsource

src/common/components/Toast.tsx

@@ -269,6 +269,9 @@ const toastGlobalStyles = css`
   [data-sonner-toast] {
     border-radius: ${cssVar('border-radius-400')};
 
+    /* This is important to allow toasts to be interacted with when a Modal is open */
+    pointer-events: auto;
+
     &:focus-visible {
       outline: ${cssVar('color-focus-default')} solid ${cssVar('focus-border-width-default')};
       outline-offset: ${cssVar('focus-border-offset-default')};

src/components/echoes-provider/EchoesProvider.tsx

@@ -24,6 +24,7 @@ import { useIntl } from 'react-intl';
 import { Toaster as ToastContainer } from 'sonner';
 import { ToastGlobalStyles } from '~common/components/Toast';
 import { TooltipProvider, TooltipProviderProps, TypographyGlobalStyles } from '..';
+import { ModalPortal } from '../modals/ModalPortal';
 import { SelectGlobalStyles } from '../select/SelectCommons';
 
 export interface EchoesProviderProps {
@@ -96,7 +97,9 @@ export function EchoesProvider(props: PropsWithChildren<EchoesProviderProps>) {
       <SelectGlobalStyles />
       <ToastGlobalStyles />
       <TooltipProvider delayDuration={tooltipsDelayDuration}>
-        <HeadlessMantineProvider>{children}</HeadlessMantineProvider>
+        <ModalPortal>
+          <HeadlessMantineProvider>{children}</HeadlessMantineProvider>
+        </ModalPortal>
         <ToastContainer
           containerAriaLabel={intl.formatMessage({
             id: 'toasts.keyboard_shortcut_aria_label',

src/components/icons/__tests__/__snapshots__/IconWrapper-test.tsx.snap

@@ -17,13 +17,15 @@ exports[`should render material icon correctly 1`] = `
 }
 
 <div>
-  <span
-    aria-hidden="true"
-    class="emotion-0 emotion-1"
-    data-testid="icon"
-  >
-    
-  </span>
+  <div>
+    <span
+      aria-hidden="true"
+      class="emotion-0 emotion-1"
+      data-testid="icon"
+    >
+      
+    </span>
+  </div>
   <section
     aria-atomic="false"
     aria-label="Focus toasts messages with alt+T"

src/components/layout/__tests__/Layout-test.tsx

@@ -43,7 +43,7 @@ beforeEach(() => {
 it('should render correctly', () => {
   const { container } = render(<Layout>content</Layout>);
 
-  expect(container.childNodes[0]).toHaveStyle({ height: '100vh', width: '100vw' });
+  expect(container.childNodes[0].childNodes[0]).toHaveStyle({ height: '100vh', width: '100vw' });
   expect(screen.getByText('content')).toHaveStyle({ display: 'grid' });
 });
 

src/components/modals/Modal.tsx

@@ -28,6 +28,7 @@ import { ButtonGroup, ButtonIcon, ButtonSize, ButtonVariety } from '../buttons';
 import { isDropdownMenuItemComponent } from '../dropdown-menu/DropdownMenuItemBase';
 import { IconX } from '../icons';
 import { ModalBody } from './ModalBody';
+import { useModalPortalRef } from './ModalPortal';
 import {
   ModalContent,
   ModalFooter,
@@ -68,6 +69,8 @@ export const Modal = forwardRef<HTMLDivElement, ModalProps>((props, ref) => {
 
   const intl = useIntl();
 
+  const modalPortalRef = useModalPortalRef();
+
   const hasActionButtons = isDefined(primaryButton) || isDefined(secondaryButton);
   const hasFooter = hasActionButtons || isDefined(footerLink);
   const isControlled = isDefined(isOpen) && isDefined(onOpenChange);
@@ -86,17 +89,29 @@ export const Modal = forwardRef<HTMLDivElement, ModalProps>((props, ref) => {
     [onClose, onOpenChange],
   );
 
+  /**
+   * This allows Modals to stay open when the user interacts with toast messages
+   */
+  const clickHandler = useCallback((e: CustomEvent) => {
+    const isToastItem = (e.target as Element)?.closest('[data-sonner-toaster]');
+    if (isToastItem) {
+      e.preventDefault();
+    }
+  }, []);
+
   return (
     <RadixDialog.Root defaultOpen={isDefaultOpen} onOpenChange={handleOpenChange} open={isOpen}>
       <RadixDialog.Trigger
         asChild
         {...(isDropdownMenuItemComponent(children) && { onSelect: handleSelectForDropdownMenu })}>
         {children}
       </RadixDialog.Trigger>
-      <RadixDialog.Portal>
+      <RadixDialog.Portal container={modalPortalRef}>
         <ModalOverlay />
         <ModalWrapper
           {...(!isDefined(description) && { 'aria-describedby': undefined })}
+          onInteractOutside={clickHandler}
+          onPointerDownOutside={clickHandler}
           ref={ref}
           size={size}
           {...radixProps}>

src/components/modals/ModalPortal.tsx

@@ -0,0 +1,54 @@
+/*
+ * Echoes React
+ * Copyright (C) 2023-2025 SonarSource Sàrl
+ * mailto:info AT sonarsource DOT com
+ *
+ * This program is free software; you can redistribute it and/or
+ * modify it under the terms of the GNU Lesser General Public
+ * License as published by the Free Software Foundation; either
+ * version 3 of the License, or (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU
+ * Lesser General Public License for more details.
+ *
+ * You should have received a copy of the GNU Lesser General Public License
+ * along with this program; if not, write to the Free Software Foundation,
+ * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
+ */
+
+import { createContext, PropsWithChildren, useContext, useMemo, useState } from 'react';
+
+interface ModalPortalContextValue {
+  portalRef: HTMLDivElement | null;
+}
+
+const ModalPortalRefContext = createContext<ModalPortalContextValue | null>(null);
+
+/**
+ * This component:
+ *  - creates a node that modals can attach their portal to
+ *  - provides the context containing the node's ref
+ *
+ * Modals can use the custom hook `useModalPortalRef` to consume it
+ */
+export function ModalPortal({ children }: Readonly<PropsWithChildren>) {
+  const [portalNode, setPortalNode] = useState<HTMLDivElement | null>(null);
+
+  const value = useMemo(() => ({ portalRef: portalNode }), [portalNode]);
+
+  return (
+    <div ref={setPortalNode}>
+      <ModalPortalRefContext.Provider value={value}>{children}</ModalPortalRefContext.Provider>
+    </div>
+  );
+}
+
+/**
+ * Returns the node ref created and provided by `ModalPortal`
+ */
+export function useModalPortalRef() {
+  const context = useContext(ModalPortalRefContext);
+  return context?.portalRef;
+}

src/components/modals/__tests__/Modal-test.tsx

@@ -108,7 +108,7 @@ it('should be triggered by DropdownMenu Items', async () => {
 });
 
 it("shouldn't have any a11y violation", async () => {
-  const { container } = renderModal({ isDefaultOpen: true });
+  const { container } = renderModal({ isDefaultOpen: true, title: 'title' });
 
   await expect(container).toHaveNoA11yViolations();
 });

src/components/typography/__tests__/__snapshots__/Heading-test.tsx.snap

@@ -10,11 +10,13 @@ exports[`renders a Heading as an h1 with no bottom margin 1`] = `
 }
 
 <div>
-  <h1
-    class="emotion-0 emotion-1"
-  >
-    This is a heading rendered as "h1" with no bottom margin
-  </h1>
+  <div>
+    <h1
+      class="emotion-0 emotion-1"
+    >
+      This is a heading rendered as "h1" with no bottom margin
+    </h1>
+  </div>
   <section
     aria-atomic="false"
     aria-label="Focus toasts messages with alt+T"
@@ -35,11 +37,13 @@ exports[`renders a Heading as an h2 with no bottom margin 1`] = `
 }
 
 <div>
-  <h2
-    class="emotion-0 emotion-1"
-  >
-    This is a heading rendered as "h2" with no bottom margin
-  </h2>
+  <div>
+    <h2
+      class="emotion-0 emotion-1"
+    >
+      This is a heading rendered as "h2" with no bottom margin
+    </h2>
+  </div>
   <section
     aria-atomic="false"
     aria-label="Focus toasts messages with alt+T"
@@ -60,11 +64,13 @@ exports[`renders a Heading as an h3 with no bottom margin 1`] = `
 }
 
 <div>
-  <h3
-    class="emotion-0 emotion-1"
-  >
-    This is a heading rendered as "h3" with no bottom margin
-  </h3>
+  <div>
+    <h3
+      class="emotion-0 emotion-1"
+    >
+      This is a heading rendered as "h3" with no bottom margin
+    </h3>
+  </div>
   <section
     aria-atomic="false"
     aria-label="Focus toasts messages with alt+T"
@@ -85,11 +91,13 @@ exports[`renders a Heading as an h4 with no bottom margin 1`] = `
 }
 
 <div>
-  <h4
-    class="emotion-0 emotion-1"
-  >
-    This is a heading rendered as "h4" with no bottom margin
-  </h4>
+  <div>
+    <h4
+      class="emotion-0 emotion-1"
+    >
+      This is a heading rendered as "h4" with no bottom margin
+    </h4>
+  </div>
   <section
     aria-atomic="false"
     aria-label="Focus toasts messages with alt+T"
@@ -110,11 +118,13 @@ exports[`renders a Heading as an h5 with no bottom margin 1`] = `
 }
 
 <div>
-  <h5
-    class="emotion-0 emotion-1"
-  >
-    This is a heading rendered as "h5" with no bottom margin
-  </h5>
+  <div>
+    <h5
+      class="emotion-0 emotion-1"
+    >
+      This is a heading rendered as "h5" with no bottom margin
+    </h5>
+  </div>
   <section
     aria-atomic="false"
     aria-label="Focus toasts messages with alt+T"
@@ -136,10 +146,12 @@ exports[`renders a Heading with size large and a bottom margin 1`] = `
 }
 
 <div>
-  <div
-    class="emotion-0 emotion-1"
-  >
-    This is a heading with size "large" with a bottom margin
+  <div>
+    <div
+      class="emotion-0 emotion-1"
+    >
+      This is a heading with size "large" with a bottom margin
+    </div>
   </div>
   <section
     aria-atomic="false"
@@ -162,10 +174,12 @@ exports[`renders a Heading with size medium and a bottom margin 1`] = `
 }
 
 <div>
-  <div
-    class="emotion-0 emotion-1"
-  >
-    This is a heading with size "medium" with a bottom margin
+  <div>
+    <div
+      class="emotion-0 emotion-1"
+    >
+      This is a heading with size "medium" with a bottom margin
+    </div>
   </div>
   <section
     aria-atomic="false"
@@ -188,10 +202,12 @@ exports[`renders a Heading with size small and a bottom margin 1`] = `
 }
 
 <div>
-  <div
-    class="emotion-0 emotion-1"
-  >
-    This is a heading with size "small" with a bottom margin
+  <div>
+    <div
+      class="emotion-0 emotion-1"
+    >
+      This is a heading with size "small" with a bottom margin
+    </div>
   </div>
   <section
     aria-atomic="false"
@@ -214,10 +230,12 @@ exports[`renders a Heading with size xlarge and a bottom margin 1`] = `
 }
 
 <div>
-  <div
-    class="emotion-0 emotion-1"
-  >
-    This is a heading with size "xlarge" with a bottom margin
+  <div>
+    <div
+      class="emotion-0 emotion-1"
+    >
+      This is a heading with size "xlarge" with a bottom margin
+    </div>
   </div>
   <section
     aria-atomic="false"
@@ -240,10 +258,12 @@ exports[`renders a Heading with size xsmall and a bottom margin 1`] = `
 }
 
 <div>
-  <div
-    class="emotion-0 emotion-1"
-  >
-    This is a heading with size "xsmall" with a bottom margin
+  <div>
+    <div
+      class="emotion-0 emotion-1"
+    >
+      This is a heading with size "xsmall" with a bottom margin
+    </div>
   </div>
   <section
     aria-atomic="false"
@@ -265,11 +285,13 @@ exports[`uses the default size 1`] = `
 }
 
 <div>
-  <h1
-    class="emotion-0 emotion-1"
-  >
-    Text goes here
-  </h1>
+  <div>
+    <h1
+      class="emotion-0 emotion-1"
+    >
+      Text goes here
+    </h1>
+  </div>
   <section
     aria-atomic="false"
     aria-label="Focus toasts messages with alt+T"

src/components/typography/__tests__/__snapshots__/HelperText-test.tsx.snap

@@ -8,10 +8,12 @@ exports[`renders correctly 1`] = `
 }
 
 <div>
-  <div
-    class="emotion-0 emotion-1"
-  >
-    The helper text
+  <div>
+    <div
+      class="emotion-0 emotion-1"
+    >
+      The helper text
+    </div>
   </div>
   <section
     aria-atomic="false"