feat: enhance audio testing functionality with microphone and speaker state management

src/app/components/Modal500.tsx

@@ -1,6 +1,6 @@
-import React, { ReactNode } from 'react';
+import React, { ReactNode, useCallback, useState } from 'react';
 import FocusTrap from 'focus-trap-react';
-import { Modal, Overlay, OverlayBackdrop, OverlayCenter } from 'folds';
+import { Modal, Overlay, OverlayBackdrop, OverlayCenter, PopOutContainerProvider } from 'folds';
 import { stopPropagation } from '../utils/keyboard';
 
 type Modal500Props = {
@@ -8,23 +8,8 @@ type Modal500Props = {
   children: ReactNode;
 };
 export function Modal500({ requestClose, children }: Modal500Props) {
-  const handleClickOutside = (e: MouseEvent | TouchEvent | FocusEvent) => {
-    const target = e.target as HTMLElement;
-    
-    // Don't close if clicking on a popout menu, overlay, or other portaled content
-    // Check for common portal container elements and popout menus
-    if (
-      target.closest('[role="menu"]') ||
-      target.closest('[role="dialog"]') ||
-      target.closest('[data-floating-ui-portal]') ||
-      target.closest('.folds-overlay') ||
-      target.closest('.popout')
-    ) {
-      return false;
-    }
-    
-    return true;
-  };
+  const [modalEl, setModalEl] = useState<HTMLDivElement | null>(null);
+  const modalRef = useCallback((el: HTMLDivElement | null) => setModalEl(el), []);
 
   return (
     <Overlay open backdrop={<OverlayBackdrop />}>
@@ -32,13 +17,15 @@ export function Modal500({ requestClose, children }: Modal500Props) {
         <FocusTrap
           focusTrapOptions={{
             initialFocus: false,
-            clickOutsideDeactivates: handleClickOutside,
+            clickOutsideDeactivates: true,
             onDeactivate: requestClose,
             escapeDeactivates: stopPropagation,
           }}
         >
-          <Modal size="500" variant="Background">
-            {children}
+          <Modal ref={modalRef} size="500" variant="Background">
+            <PopOutContainerProvider value={modalEl ?? undefined}>
+              {children}
+            </PopOutContainerProvider>
           </Modal>
         </FocusTrap>
       </OverlayCenter>