From fa64d2d3e70a041450a0b2b9bb3c7fbbc8b06a8d Mon Sep 17 00:00:00 2001
From: Richard Knoll <riknoll@microsoft.com>
Date: Fri, 3 Apr 2026 10:52:06 -0700
Subject: [PATCH] hide modal siblings from screen reader

---
 react-common/components/controls/Modal.tsx | 27 +++++++++++++++++++++-
 1 file changed, 26 insertions(+), 1 deletion(-)

diff --git a/react-common/components/controls/Modal.tsx b/react-common/components/controls/Modal.tsx
index b5955a193962..b40de569354c 100644
--- a/react-common/components/controls/Modal.tsx
+++ b/react-common/components/controls/Modal.tsx
@@ -61,9 +61,34 @@ export const Modal = (props: ModalProps) => {
         className
     );
 
+    const modalRef = React.useRef<HTMLDivElement>(null);
+
+    React.useEffect(() => {
+        const root = parentElement || document.body;
+        const parent = modalRef.current?.parentElement;
+
+        const hiddenSiblings: Element[] = [];
+
+        for (const child of root.children) {
+            if (child !== parent) {
+                if (!child.hasAttribute("aria-hidden") || child.getAttribute("aria-hidden") === "false") {
+                    (child as HTMLElement).setAttribute("aria-hidden", "true");
+                    hiddenSiblings.push(child);
+                }
+            }
+        }
+
+        return () => {
+            for (const child of hiddenSiblings) {
+                (child as HTMLElement).removeAttribute("aria-hidden");
+            }
+        };
+    }, [parentElement])
+
     return ReactDOM.createPortal(<FocusTrap className={classes} onEscape={closeClickHandler}>
         <div id={id}
             className="common-modal"
+            ref={modalRef}
             role={role || "dialog"}
             aria-hidden={ariaHidden}
             aria-label={ariaLabel}
@@ -131,5 +156,5 @@ export const Modal = (props: ModalProps) => {
                 </div>
             }
         </div>
-    </FocusTrap>, parentElement || document.getElementById("root") || document.body)
+    </FocusTrap>, parentElement || document.body)
 }