Enhance dropdown behavior in ConnectWallet and MobileNavigation components

- Added state management for dropdown visibility in ConnectWallet to prevent conflicts with open Sheets/Dialogs.
- Implemented periodic checks to close the dropdown when a Sheet/Dialog is opened, improving accessibility and user experience.
- Updated MobileNavigation to close any open dropdowns when the navigation menu is opened, ensuring consistent behavior across components.
- Enhanced focus management in MobileNavigation to prevent aria-hidden conflicts and improve keyboard navigation.

Author: QSchlegel

src/components/common/cardano-objects/connect-wallet.tsx

@@ -102,10 +102,43 @@ function ConnectWalletContent({
 
   // Track wallet detection state
   const [detectingWallets, setDetectingWallets] = useState(true);
+  const [dropdownOpen, setDropdownOpen] = useState(false);
   const walletsRef = useRef(wallets);
   const hasInitializedPersist = useRef(false);
   const hasAttemptedAutoConnect = useRef(false);
 
+  // Check if any Sheet/Dialog is open to prevent dropdown from opening
+  const checkIfSheetOpen = useCallback(() => {
+    if (typeof window === "undefined") return false;
+    const sheets = document.querySelectorAll('[data-radix-dialog-content], [data-radix-sheet-content]');
+    return Array.from(sheets).some(
+      (sheet) => sheet.getAttribute('data-state') === 'open'
+    );
+  }, []);
+
+  // Close dropdown when a Sheet/Dialog opens to prevent aria-hidden conflicts
+  useEffect(() => {
+    if (!dropdownOpen) return;
+
+    const checkForOpenSheets = () => {
+      if (checkIfSheetOpen()) {
+        setDropdownOpen(false);
+      }
+    };
+
+    // Check periodically when dropdown is open
+    const interval = setInterval(checkForOpenSheets, 100);
+    return () => clearInterval(interval);
+  }, [dropdownOpen, checkIfSheetOpen]);
+
+  // Prevent dropdown from opening if Sheet is already open
+  const handleDropdownOpenChange = useCallback((open: boolean) => {
+    if (open && checkIfSheetOpen()) {
+      return; // Don't open if Sheet is open
+    }
+    setDropdownOpen(open);
+  }, [checkIfSheetOpen]);
+
 
 
   // Keep wallets ref in sync
@@ -317,7 +350,7 @@ function ConnectWalletContent({
   };
 
   return (
-    <DropdownMenu>
+    <DropdownMenu open={dropdownOpen} onOpenChange={handleDropdownOpenChange}>
       <DropdownMenuTrigger asChild>
         <Button
           variant="secondary"

src/components/ui/mobile-navigation.tsx

@@ -32,6 +32,20 @@ export function MobileNavigation({ showWalletMenu, isLoggedIn, walletId, fallbac
   const router = useRouter();
   const [open, setOpen] = useState(false);
 
+  // Close any open dropdowns when sheet opens to prevent aria-hidden conflicts
+  React.useEffect(() => {
+    if (open) {
+      // Close any open Radix dropdown menus
+      const dropdownTriggers = document.querySelectorAll('[data-radix-dropdown-menu-trigger]');
+      dropdownTriggers.forEach((trigger) => {
+        const button = trigger as HTMLElement;
+        if (button.getAttribute('data-state') === 'open') {
+          button.click();
+        }
+      });
+    }
+  }, [open]);
+
   return (
     <>
       {/* Custom overlay - rendered outside of Sheet via Portal */}
@@ -108,6 +122,22 @@ export function MobileNavigation({ showWalletMenu, isLoggedIn, walletId, fallbac
             "data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left"
           )}
           style={{ top: '56px', height: 'calc(100vh - 56px)' }}
+          onOpenAutoFocus={(e) => {
+            // Blur any focused elements in the header to prevent aria-hidden conflicts
+            const header = document.querySelector('[data-header="main"]');
+            if (header) {
+              const focusedElement = header.querySelector(':focus');
+              if (focusedElement && focusedElement instanceof HTMLElement) {
+                focusedElement.blur();
+              }
+            }
+            // Focus the first focusable element in the sheet content
+            e.preventDefault();
+            const firstFocusable = e.currentTarget.querySelector('a, button, [tabindex]:not([tabindex="-1"])');
+            if (firstFocusable && firstFocusable instanceof HTMLElement) {
+              firstFocusable.focus();
+            }
+          }}
           onInteractOutside={(e) => {
             // Check if click was in header
             const header = document.querySelector('[data-header="main"]');