fix: set a preferred body tag for iframeRef

Author: Kaushik Shetty

dist/index.js

@@ -44,7 +44,7 @@ declare class Extension {
     }>;
     getCurrentLocation: () => ILocation;
     /**
-     * Conditionally gets and returns the app version if not present already
+     * Conditionally retrieves and returns the app version if not present already
      * @returns version of the app currently running.
      */
     getAppVersion: () => Promise<number | null>;

dist/index.js.map

@@ -4,4 +4,5 @@ export declare function onData<Data extends Record<string, any>>(data: {
 }): Promise<Data>;
 export declare function onError(error: Error): Promise<never>;
 export declare function formatAppRegion(region: string): Region;
+export declare function getPreferredBodyElement(nodeCollection: HTMLCollection): Element;
 //# sourceMappingURL=utils.d.ts.map

dist/src/extension.d.ts

@@ -374,7 +374,7 @@ class Extension {
     };
 
     /**
-     * Conditionally gets and returns the app version if not present already
+     * Conditionally retrieves and returns the app version if not present already
      * @returns version of the app currently running.
      */
     getAppVersion = async (): Promise<number | null> => {

dist/src/modal.d.ts.map

@@ -1,9 +1,15 @@
+import { getPreferredBodyElement } from "./utils/utils";
+
 class Modal {
     constructor() {
         if (!Object.prototype.hasOwnProperty.call(window, "iframeRef")) {
-            window["iframeRef"] = document?.body?.children[0];
+            const rootElement = getPreferredBodyElement(
+                document?.body?.children
+            );
+            window["iframeRef"] = rootElement;
         }
     }
+
     setBackgroundElement(element: HTMLElement) {
         window["iframeRef"] = element;
     }

dist/src/types.d.ts.map

@@ -25,3 +25,34 @@ export function formatAppRegion(region: string): Region {
             return Region.UNKNOWN;
     }
 }
+
+export function getPreferredBodyElement(nodeCollection: HTMLCollection) {
+    let rootElementIndex = Infinity;
+    let rootElement: Element | undefined;
+    const elementPreferenceList = [
+        "HEADER",
+        "NAV",
+        "MAIN",
+        "SECTION",
+        "ARTICLE",
+        "ASIDE",
+        "FOOTER",
+        "DIV",
+    ];
+    const nonRenderingTags = ["SCRIPT", "NOSCRIPT", "STYLE", "TEMPLATE"];
+    // ? choose higher preference semantic HTML tags
+    Array.from(nodeCollection).forEach((el) => {
+        const elIndex = elementPreferenceList.indexOf(el.nodeName);
+        if (elIndex >= 0 && elIndex < rootElementIndex) {
+            rootElementIndex = elIndex;
+            rootElement = el;
+        }
+    });
+    // ? choose the first rendering HTML tag found if no semantic tags found
+    if (!rootElement) {
+        rootElement = Array.from(nodeCollection).find(
+            (el) => !nonRenderingTags.includes(el.nodeName)
+        );
+    }
+    return rootElement || nodeCollection[0];
+}