chore(modal): code clean up/clarification

Author: ShaneK

core/src/components/modal/modal.tsx

@@ -784,18 +784,19 @@ export class Modal implements ComponentInterface, OverlayInterface {
     this.cachedPageParent = this.getOriginalPageParent();
     const pageParent = this.cachedPageParent;
 
-    // Skip ion-app (controller modals) and pages with other content (inline modals)
+    // Skip ion-app (controller modals) and pages with visible sibling content next to the modal
     if (!pageParent || pageParent.tagName === 'ION-APP') {
       return;
     }
 
-    const hasVisibleContent = Array.from(pageParent.children).some((child) => {
-      if (child === this.el) return false;
-      if (child instanceof HTMLElement && window.getComputedStyle(child).display === 'none') return false;
-      if (child.tagName === 'TEMPLATE' || child.tagName === 'SLOT') return false;
-      if (child.nodeType === Node.TEXT_NODE && !child.textContent?.trim()) return false;
-      return true;
-    });
+    const hasVisibleContent = Array.from(pageParent.children).some(
+      (child) =>
+        child !== this.el &&
+        !(child instanceof HTMLElement && window.getComputedStyle(child).display === 'none') &&
+        child.tagName !== 'TEMPLATE' &&
+        child.tagName !== 'SLOT' &&
+        !(child.nodeType === Node.TEXT_NODE && !child.textContent?.trim())
+    );
 
     if (hasVisibleContent) {
       return;

core/src/utils/overlays.ts

@@ -45,10 +45,10 @@ type OverlayWithFocusTrapProps = HTMLIonOverlayElement & {
 };
 
 /**
- * Determines if the overlay's backdrop is always active (no background interaction).
+ * Determines if the overlay's backdrop is always blocking (no background interaction).
  * Returns false if showBackdrop=false or backdropBreakpoint > 0.
  */
-const isBackdropAlwaysActive = (el: OverlayWithFocusTrapProps): boolean => {
+const isBackdropAlwaysBlocking = (el: OverlayWithFocusTrapProps): boolean => {
   return el.showBackdrop !== false && !((el.backdropBreakpoint ?? 0) > 0);
 };
 
@@ -555,7 +555,7 @@ export const present = async <OverlayPresentOptions>(
    */
   const overlayEl = overlay.el as OverlayWithFocusTrapProps;
   const shouldTrapFocus = overlayEl.tagName !== 'ION-TOAST' && overlayEl.focusTrap !== false;
-  const shouldLockRoot = shouldTrapFocus && isBackdropAlwaysActive(overlayEl);
+  const shouldLockRoot = shouldTrapFocus && isBackdropAlwaysBlocking(overlayEl);
 
   overlay.presented = true;
   overlay.willPresent.emit();
@@ -693,11 +693,11 @@ export const dismiss = async <OverlayDismissOptions>(
    */
   const overlaysLockingRoot = presentedOverlays.filter((o) => {
     const el = o as OverlayWithFocusTrapProps;
-    return el.tagName !== 'ION-TOAST' && el.focusTrap !== false && isBackdropAlwaysActive(el);
+    return el.tagName !== 'ION-TOAST' && el.focusTrap !== false && isBackdropAlwaysBlocking(el);
   });
   const overlayEl = overlay.el as OverlayWithFocusTrapProps;
   const locksRoot =
-    overlayEl.tagName !== 'ION-TOAST' && overlayEl.focusTrap !== false && isBackdropAlwaysActive(overlayEl);
+    overlayEl.tagName !== 'ION-TOAST' && overlayEl.focusTrap !== false && isBackdropAlwaysBlocking(overlayEl);
 
   /**
    * If this is the last visible overlay that is trapping focus