babylonjs-accessibility 5.17.1 → 5.18.0

package/babylon.accessibility.max.js

@@ -31084,130 +31084,130 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony import */ var gui_2D_controls_button__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! gui/2D/math2D */ "gui/2D/advancedDynamicTexture");
 /* harmony import */ var gui_2D_controls_button__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(gui_2D_controls_button__WEBPACK_IMPORTED_MODULE_1__);
 /* harmony import */ var _htmlTwinItem__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./htmlTwinItem */ "../../../tools/accessibility/dist/HtmlTwin/htmlTwinItem.js");
-
-
-
-
-
-
-/**
- * A abstract layer to store the html twin tree structure. It is constructed from the BabylonJS scene entities that need to be accessible. It informs the parent-children relationship of html twin tree, and informs how to render: description, isActionable, onclick/onrightclick/onfocus/onblur.
- */
-class HTMLTwinGUIItem extends _htmlTwinItem__WEBPACK_IMPORTED_MODULE_2__.HTMLTwinItem {
-    constructor(entity, scene, children) {
-        super(entity, scene, children);
-    }
-    /**
-     * The text content displayed in HTML element.
-     */
-    get description() {
-        let description = "";
-        if (this.entity.accessibilityTag?.description) {
-            description = this.entity.accessibilityTag.description;
-        }
-        else if (this.entity instanceof gui_2D_controls_button__WEBPACK_IMPORTED_MODULE_1__.TextBlock) {
-            description = this.entity.text;
-        }
-        else if (this.entity instanceof gui_2D_controls_button__WEBPACK_IMPORTED_MODULE_1__.Button) {
-            description = this.entity.textBlock?.text ?? "";
-        }
-        else if (this.entity instanceof gui_2D_controls_button__WEBPACK_IMPORTED_MODULE_1__.Image) {
-            description = this.entity.alt ?? "";
-        }
-        return description;
-    }
-    /**
-     * If this entity is actionable (can be clicked).
-     */
-    get isActionable() {
-        if (this._isActionable) {
-            return this._isActionable;
-        }
-        // If defined onclick, override default.
-        const eventHandler = this.entity.accessibilityTag?.eventHandler;
-        if (eventHandler?.click || eventHandler?.contextmenu) {
-            this._isActionable = true;
-        }
-        else {
-            if (this.entity instanceof gui_2D_controls_button__WEBPACK_IMPORTED_MODULE_1__.Button) {
-                this._isActionable = true;
-            }
-            else {
-                this._isActionable = false;
-            }
-        }
-        return this._isActionable;
-    }
-    /**
-     * If this entity is focusable (can be focused by tab key pressing).
-     */
-    get isFocusable() {
-        if (this._isFocusable) {
-            return this._isFocusable;
-        }
-        if (this.entity instanceof gui_2D_controls_button__WEBPACK_IMPORTED_MODULE_1__.Button) {
-            this._isFocusable = true;
-        }
-        else {
-            this._isFocusable = false;
-        }
-        return this._isFocusable;
-    }
-    /**
-     * Callback when the HTML element is focused. Show visual indication on BabylonJS entity.
-     */
-    focus() {
-        // If defined eventHandler, override default.
-        const eventHandler = this.entity.accessibilityTag?.eventHandler;
-        if (eventHandler?.focus) {
-            eventHandler.focus();
-            return;
-        }
-        const control = this.entity;
-        control.highlightLineWidth = 10;
-        control.isHighlighted = true;
-    }
-    /**
-     * Callback when the HTML element is blured. Dismiss visual indication on BabylonJS entity.
-     */
-    blur() {
-        // If defined eventHandler, override default.
-        const eventHandler = this.entity.accessibilityTag?.eventHandler;
-        if (eventHandler?.blur) {
-            eventHandler.blur();
-            return;
-        }
-        const control = this.entity;
-        control.isHighlighted = false;
-    }
-    /**
-     * Callback when an event (e.g. click/right click) happens on the HTML element.
-     * Implemented by child classes
-     * @param eventType - Which event is triggered. E.g. "click", "contextmenu"
-     */
-    triggerEvent(eventType) {
-        const eventHandler = this.entity.accessibilityTag?.eventHandler;
-        switch (eventType) {
-            case "click":
-                if (eventHandler?.click) {
-                    eventHandler.click();
-                    return;
-                }
-                if (!this.isActionable)
-                    return;
-                this.entity.onPointerClickObservable.notifyObservers(new gui_2D_controls_button__WEBPACK_IMPORTED_MODULE_1__.Vector2WithInfo(new core_Maths_math__WEBPACK_IMPORTED_MODULE_0__.Vector2(this.scene.pointerX, this.scene.pointerY)));
-                break;
-            case "contextmenu":
-                if (eventHandler?.contextmenu) {
-                    eventHandler.contextmenu();
-                    return;
-                }
-                break;
-            default:
-                break;
-        }
-    }
-}
+
+
+
+
+
+
+/**
+ * A abstract layer to store the html twin tree structure. It is constructed from the BabylonJS scene entities that need to be accessible. It informs the parent-children relationship of html twin tree, and informs how to render: description, isActionable, onclick/onrightclick/onfocus/onblur.
+ */
+class HTMLTwinGUIItem extends _htmlTwinItem__WEBPACK_IMPORTED_MODULE_2__.HTMLTwinItem {
+    constructor(entity, scene, children) {
+        super(entity, scene, children);
+    }
+    /**
+     * The text content displayed in HTML element.
+     */
+    get description() {
+        let description = "";
+        if (this.entity.accessibilityTag?.description) {
+            description = this.entity.accessibilityTag.description;
+        }
+        else if (this.entity instanceof gui_2D_controls_button__WEBPACK_IMPORTED_MODULE_1__.TextBlock) {
+            description = this.entity.text;
+        }
+        else if (this.entity instanceof gui_2D_controls_button__WEBPACK_IMPORTED_MODULE_1__.Button) {
+            description = this.entity.textBlock?.text ?? "";
+        }
+        else if (this.entity instanceof gui_2D_controls_button__WEBPACK_IMPORTED_MODULE_1__.Image) {
+            description = this.entity.alt ?? "";
+        }
+        return description;
+    }
+    /**
+     * If this entity is actionable (can be clicked).
+     */
+    get isActionable() {
+        if (this._isActionable) {
+            return this._isActionable;
+        }
+        // If defined onclick, override default.
+        const eventHandler = this.entity.accessibilityTag?.eventHandler;
+        if (eventHandler?.click || eventHandler?.contextmenu) {
+            this._isActionable = true;
+        }
+        else {
+            if (this.entity instanceof gui_2D_controls_button__WEBPACK_IMPORTED_MODULE_1__.Button) {
+                this._isActionable = true;
+            }
+            else {
+                this._isActionable = false;
+            }
+        }
+        return this._isActionable;
+    }
+    /**
+     * If this entity is focusable (can be focused by tab key pressing).
+     */
+    get isFocusable() {
+        if (this._isFocusable) {
+            return this._isFocusable;
+        }
+        if (this.entity instanceof gui_2D_controls_button__WEBPACK_IMPORTED_MODULE_1__.Button) {
+            this._isFocusable = true;
+        }
+        else {
+            this._isFocusable = false;
+        }
+        return this._isFocusable;
+    }
+    /**
+     * Callback when the HTML element is focused. Show visual indication on BabylonJS entity.
+     */
+    focus() {
+        // If defined eventHandler, override default.
+        const eventHandler = this.entity.accessibilityTag?.eventHandler;
+        if (eventHandler?.focus) {
+            eventHandler.focus();
+            return;
+        }
+        const control = this.entity;
+        control.highlightLineWidth = 10;
+        control.isHighlighted = true;
+    }
+    /**
+     * Callback when the HTML element is blured. Dismiss visual indication on BabylonJS entity.
+     */
+    blur() {
+        // If defined eventHandler, override default.
+        const eventHandler = this.entity.accessibilityTag?.eventHandler;
+        if (eventHandler?.blur) {
+            eventHandler.blur();
+            return;
+        }
+        const control = this.entity;
+        control.isHighlighted = false;
+    }
+    /**
+     * Callback when an event (e.g. click/right click) happens on the HTML element.
+     * Implemented by child classes
+     * @param eventType - Which event is triggered. E.g. "click", "contextmenu"
+     */
+    triggerEvent(eventType) {
+        const eventHandler = this.entity.accessibilityTag?.eventHandler;
+        switch (eventType) {
+            case "click":
+                if (eventHandler?.click) {
+                    eventHandler.click();
+                    return;
+                }
+                if (!this.isActionable)
+                    return;
+                this.entity.onPointerClickObservable.notifyObservers(new gui_2D_controls_button__WEBPACK_IMPORTED_MODULE_1__.Vector2WithInfo(new core_Maths_math__WEBPACK_IMPORTED_MODULE_0__.Vector2(this.scene.pointerX, this.scene.pointerY)));
+                break;
+            case "contextmenu":
+                if (eventHandler?.contextmenu) {
+                    eventHandler.contextmenu();
+                    return;
+                }
+                break;
+            default:
+                break;
+        }
+    }
+}
 
 
 /***/ }),
@@ -31231,186 +31231,186 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony import */ var core_Meshes_abstractMesh__WEBPACK_IMPORTED_MODULE_5___default = /*#__PURE__*/__webpack_require__.n(core_Meshes_abstractMesh__WEBPACK_IMPORTED_MODULE_5__);
 /* harmony import */ var gui_2D_advancedDynamicTexture__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! gui/2D/controls/container */ "gui/2D/advancedDynamicTexture");
 /* harmony import */ var gui_2D_advancedDynamicTexture__WEBPACK_IMPORTED_MODULE_6___default = /*#__PURE__*/__webpack_require__.n(gui_2D_advancedDynamicTexture__WEBPACK_IMPORTED_MODULE_6__);
-
-
-
-
-
-
-
-
-
-class HTMLTwinHostComponent extends react__WEBPACK_IMPORTED_MODULE_1__.Component {
-    constructor(props) {
-        super(props);
-        this._observersMap = new Map();
-        const a11yTreeItems = this._updateHTMLTwinItems();
-        this.state = {
-            a11yTreeItems: a11yTreeItems,
-        };
-    }
-    componentDidMount() {
-        const scene = this.props.scene;
-        // Find all a11y entities in the scene, assemble the a11y forest (a11yTreeItems), and update React state to let React update DOM.
-        const updateA11yTree = () => {
-            const a11yTreeItems = this._updateHTMLTwinItems();
-            this.setState({
-                a11yTreeItems: a11yTreeItems,
-            });
-        };
-        const addGUIObservers = (control) => {
-            // observe isVisible changed
-            if (!this._observersMap.has(control.onIsVisibleChangedObservable)) {
-                this._observersMap.set(control.onIsVisibleChangedObservable, control.onIsVisibleChangedObservable.add(updateA11yTree));
-            }
-            if (!this._observersMap.has(control.onAccessibilityTagChangedObservable)) {
-                this._observersMap.set(control.onAccessibilityTagChangedObservable, control.onAccessibilityTagChangedObservable.add(updateA11yTree));
-            }
-            if (control instanceof gui_2D_advancedDynamicTexture__WEBPACK_IMPORTED_MODULE_6__.Container) {
-                const container = control;
-                // observe add control and deal with new controls
-                if (!this._observersMap.has(container.onControlAddedObservable)) {
-                    this._observersMap.set(container.onControlAddedObservable, container.onControlAddedObservable.add((newControl) => {
-                        if (newControl) {
-                            // deal with the new added control
-                            addGUIObservers(newControl);
-                        }
-                        updateA11yTree();
-                    }));
-                }
-                // observe remove control
-                if (!this._observersMap.has(container.onControlRemovedObservable)) {
-                    this._observersMap.set(container.onControlRemovedObservable, container.onControlRemovedObservable.add((removedControl) => {
-                        updateA11yTree();
-                    }));
-                }
-                // deal with children
-                control._children.forEach((child) => {
-                    addGUIObservers(child);
-                });
-            }
-        };
-        const addNodeObservers = (node) => {
-            if (!this._observersMap.has(node.onEnabledStateChangedObservable)) {
-                this._observersMap.set(node.onEnabledStateChangedObservable, node.onEnabledStateChangedObservable.add(updateA11yTree));
-            }
-            if (!this._observersMap.has(node.onAccessibilityTagChangedObservable)) {
-                this._observersMap.set(node.onAccessibilityTagChangedObservable, node.onAccessibilityTagChangedObservable.add(updateA11yTree));
-            }
-            // If the node has GUI, add observer to the controls
-            if (this._isGUI(node)) {
-                const curMesh = node;
-                const adt = curMesh.material?.getActiveTextures()[0];
-                const guiRoot = adt.getChildren();
-                guiRoot.forEach((control) => addGUIObservers(control));
-            }
-        };
-        // observe add node and deal with new nodes
-        if (!this._observersMap.has(scene.onNewMeshAddedObservable)) {
-            this._observersMap.set(scene.onNewMeshAddedObservable, scene.onNewMeshAddedObservable.add((newNode) => {
-                updateA11yTree();
-                addNodeObservers(newNode);
-            }));
-        }
-        if (!this._observersMap.has(scene.onNewTransformNodeAddedObservable)) {
-            this._observersMap.set(scene.onNewTransformNodeAddedObservable, scene.onNewTransformNodeAddedObservable.add((newNode) => {
-                updateA11yTree();
-                addNodeObservers(newNode);
-            }));
-        }
-        // observe remove node
-        if (!this._observersMap.has(scene.onMeshRemovedObservable)) {
-            this._observersMap.set(scene.onMeshRemovedObservable, scene.onMeshRemovedObservable.add(updateA11yTree));
-        }
-        if (!this._observersMap.has(scene.onTransformNodeRemovedObservable)) {
-            this._observersMap.set(scene.onTransformNodeRemovedObservable, scene.onTransformNodeRemovedObservable.add(updateA11yTree));
-        }
-        // observe node enabled changed
-        scene.getNodes().forEach((node) => {
-            addNodeObservers(node);
-        });
-    }
-    componentWillUnmount() {
-        this._observersMap.forEach((observer, observable) => {
-            observable.remove(observer);
-        });
-        this._observersMap.clear();
-    }
-    render() {
-        return ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div", { id: "accessibility-host", children: this.state.a11yTreeItems.map((item) => {
-                return ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_htmlTwinTreeComponent__WEBPACK_IMPORTED_MODULE_2__.HTMLTwinItemComponent, { a11yItem: item, level: 1 }, item.entity.uniqueId !== undefined && item.entity.uniqueId !== null ? item.entity.uniqueId : item.entity.name));
-            }) }));
-    }
-    _updateHTMLTwinItems() {
-        // Get html twin tree's root nodes
-        const rootNodes = this.props.scene.rootNodes.slice(0);
-        for (const mesh of this.props.scene.meshes) {
-            // Adding nodes that are parented to a bone
-            if (mesh.parent && mesh.parent.getClassName() === "Bone") {
-                rootNodes.push(mesh);
-            }
-        }
-        const a11yTreeItems = this._getHTMLTwinItemsFromNodes(rootNodes);
-        return a11yTreeItems;
-    }
-    _getHTMLTwinItemsFromNodes(rootItems) {
-        if (!rootItems || rootItems.length === 0) {
-            return [];
-        }
-        const result = [];
-        const queue = [...rootItems];
-        for (let i = 0; i < queue.length; i++) {
-            const curNode = queue[i];
-            if (!curNode.isEnabled()) {
-                continue;
-            }
-            if (this._isGUI(curNode)) {
-                // if node texture is GUI, add that as a a11y GUI item (renders differently)
-                const curMesh = curNode;
-                const adt = curMesh.material?.getActiveTextures()[0];
-                const guiRoot = adt.getChildren();
-                result.push(new _htmlTwinNodeItem__WEBPACK_IMPORTED_MODULE_4__.HTMLTwinNodeItem(curNode, this.props.scene, this._getHTMLTwinItemsFromGUI(guiRoot)));
-            }
-            else if (curNode.accessibilityTag) {
-                result.push(new _htmlTwinNodeItem__WEBPACK_IMPORTED_MODULE_4__.HTMLTwinNodeItem(curNode, this.props.scene, this._getHTMLTwinItemsFromNodes(curNode.getChildren())));
-            }
-            else {
-                queue.push(...curNode.getChildren());
-            }
-        }
-        return result;
-    }
-    _getHTMLTwinItemsFromGUI(rootItems) {
-        if (!rootItems || rootItems.length === 0) {
-            return [];
-        }
-        const result = [];
-        const queue = [...rootItems];
-        for (let i = 0; i < queue.length; i++) {
-            const curNode = queue[i];
-            if (!curNode.isVisible) {
-                continue;
-            }
-            if (curNode instanceof gui_2D_advancedDynamicTexture__WEBPACK_IMPORTED_MODULE_6__.Container && curNode.children.length !== 0 && !(curNode instanceof gui_2D_advancedDynamicTexture__WEBPACK_IMPORTED_MODULE_6__.Button)) {
-                const curContainer = curNode;
-                result.push(new _htmlTwinGUIItem__WEBPACK_IMPORTED_MODULE_3__.HTMLTwinGUIItem(curContainer, this.props.scene, this._getHTMLTwinItemsFromGUI(curContainer.children)));
-            }
-            else {
-                result.push(new _htmlTwinGUIItem__WEBPACK_IMPORTED_MODULE_3__.HTMLTwinGUIItem(curNode, this.props.scene, []));
-            }
-        }
-        return result;
-    }
-    _isGUI(node) {
-        let isGUI = false;
-        if (node instanceof core_Meshes_abstractMesh__WEBPACK_IMPORTED_MODULE_5__.AbstractMesh) {
-            const curMesh = node;
-            const textures = curMesh.material?.getActiveTextures();
-            isGUI = !!textures && textures[0] instanceof gui_2D_advancedDynamicTexture__WEBPACK_IMPORTED_MODULE_6__.AdvancedDynamicTexture;
-        }
-        return isGUI;
-    }
-}
+
+
+
+
+
+
+
+
+
+class HTMLTwinHostComponent extends react__WEBPACK_IMPORTED_MODULE_1__.Component {
+    constructor(props) {
+        super(props);
+        this._observersMap = new Map();
+        const a11yTreeItems = this._updateHTMLTwinItems();
+        this.state = {
+            a11yTreeItems: a11yTreeItems,
+        };
+    }
+    componentDidMount() {
+        const scene = this.props.scene;
+        // Find all a11y entities in the scene, assemble the a11y forest (a11yTreeItems), and update React state to let React update DOM.
+        const updateA11yTree = () => {
+            const a11yTreeItems = this._updateHTMLTwinItems();
+            this.setState({
+                a11yTreeItems: a11yTreeItems,
+            });
+        };
+        const addGUIObservers = (control) => {
+            // observe isVisible changed
+            if (!this._observersMap.has(control.onIsVisibleChangedObservable)) {
+                this._observersMap.set(control.onIsVisibleChangedObservable, control.onIsVisibleChangedObservable.add(updateA11yTree));
+            }
+            if (!this._observersMap.has(control.onAccessibilityTagChangedObservable)) {
+                this._observersMap.set(control.onAccessibilityTagChangedObservable, control.onAccessibilityTagChangedObservable.add(updateA11yTree));
+            }
+            if (control instanceof gui_2D_advancedDynamicTexture__WEBPACK_IMPORTED_MODULE_6__.Container) {
+                const container = control;
+                // observe add control and deal with new controls
+                if (!this._observersMap.has(container.onControlAddedObservable)) {
+                    this._observersMap.set(container.onControlAddedObservable, container.onControlAddedObservable.add((newControl) => {
+                        if (newControl) {
+                            // deal with the new added control
+                            addGUIObservers(newControl);
+                        }
+                        updateA11yTree();
+                    }));
+                }
+                // observe remove control
+                if (!this._observersMap.has(container.onControlRemovedObservable)) {
+                    this._observersMap.set(container.onControlRemovedObservable, container.onControlRemovedObservable.add((removedControl) => {
+                        updateA11yTree();
+                    }));
+                }
+                // deal with children
+                control._children.forEach((child) => {
+                    addGUIObservers(child);
+                });
+            }
+        };
+        const addNodeObservers = (node) => {
+            if (!this._observersMap.has(node.onEnabledStateChangedObservable)) {
+                this._observersMap.set(node.onEnabledStateChangedObservable, node.onEnabledStateChangedObservable.add(updateA11yTree));
+            }
+            if (!this._observersMap.has(node.onAccessibilityTagChangedObservable)) {
+                this._observersMap.set(node.onAccessibilityTagChangedObservable, node.onAccessibilityTagChangedObservable.add(updateA11yTree));
+            }
+            // If the node has GUI, add observer to the controls
+            if (this._isGUI(node)) {
+                const curMesh = node;
+                const adt = curMesh.material?.getActiveTextures()[0];
+                const guiRoot = adt.getChildren();
+                guiRoot.forEach((control) => addGUIObservers(control));
+            }
+        };
+        // observe add node and deal with new nodes
+        if (!this._observersMap.has(scene.onNewMeshAddedObservable)) {
+            this._observersMap.set(scene.onNewMeshAddedObservable, scene.onNewMeshAddedObservable.add((newNode) => {
+                updateA11yTree();
+                addNodeObservers(newNode);
+            }));
+        }
+        if (!this._observersMap.has(scene.onNewTransformNodeAddedObservable)) {
+            this._observersMap.set(scene.onNewTransformNodeAddedObservable, scene.onNewTransformNodeAddedObservable.add((newNode) => {
+                updateA11yTree();
+                addNodeObservers(newNode);
+            }));
+        }
+        // observe remove node
+        if (!this._observersMap.has(scene.onMeshRemovedObservable)) {
+            this._observersMap.set(scene.onMeshRemovedObservable, scene.onMeshRemovedObservable.add(updateA11yTree));
+        }
+        if (!this._observersMap.has(scene.onTransformNodeRemovedObservable)) {
+            this._observersMap.set(scene.onTransformNodeRemovedObservable, scene.onTransformNodeRemovedObservable.add(updateA11yTree));
+        }
+        // observe node enabled changed
+        scene.getNodes().forEach((node) => {
+            addNodeObservers(node);
+        });
+    }
+    componentWillUnmount() {
+        this._observersMap.forEach((observer, observable) => {
+            observable.remove(observer);
+        });
+        this._observersMap.clear();
+    }
+    render() {
+        return ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div", { id: "accessibility-host", children: this.state.a11yTreeItems.map((item) => {
+                return ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_htmlTwinTreeComponent__WEBPACK_IMPORTED_MODULE_2__.HTMLTwinItemComponent, { a11yItem: item, level: 1 }, item.entity.uniqueId !== undefined && item.entity.uniqueId !== null ? item.entity.uniqueId : item.entity.name));
+            }) }));
+    }
+    _updateHTMLTwinItems() {
+        // Get html twin tree's root nodes
+        const rootNodes = this.props.scene.rootNodes.slice(0);
+        for (const mesh of this.props.scene.meshes) {
+            // Adding nodes that are parented to a bone
+            if (mesh.parent && mesh.parent.getClassName() === "Bone") {
+                rootNodes.push(mesh);
+            }
+        }
+        const a11yTreeItems = this._getHTMLTwinItemsFromNodes(rootNodes);
+        return a11yTreeItems;
+    }
+    _getHTMLTwinItemsFromNodes(rootItems) {
+        if (!rootItems || rootItems.length === 0) {
+            return [];
+        }
+        const result = [];
+        const queue = [...rootItems];
+        for (let i = 0; i < queue.length; i++) {
+            const curNode = queue[i];
+            if (!curNode.isEnabled()) {
+                continue;
+            }
+            if (this._isGUI(curNode)) {
+                // if node texture is GUI, add that as a a11y GUI item (renders differently)
+                const curMesh = curNode;
+                const adt = curMesh.material?.getActiveTextures()[0];
+                const guiRoot = adt.getChildren();
+                result.push(new _htmlTwinNodeItem__WEBPACK_IMPORTED_MODULE_4__.HTMLTwinNodeItem(curNode, this.props.scene, this._getHTMLTwinItemsFromGUI(guiRoot)));
+            }
+            else if (curNode.accessibilityTag) {
+                result.push(new _htmlTwinNodeItem__WEBPACK_IMPORTED_MODULE_4__.HTMLTwinNodeItem(curNode, this.props.scene, this._getHTMLTwinItemsFromNodes(curNode.getChildren())));
+            }
+            else {
+                queue.push(...curNode.getChildren());
+            }
+        }
+        return result;
+    }
+    _getHTMLTwinItemsFromGUI(rootItems) {
+        if (!rootItems || rootItems.length === 0) {
+            return [];
+        }
+        const result = [];
+        const queue = [...rootItems];
+        for (let i = 0; i < queue.length; i++) {
+            const curNode = queue[i];
+            if (!curNode.isVisible) {
+                continue;
+            }
+            if (curNode instanceof gui_2D_advancedDynamicTexture__WEBPACK_IMPORTED_MODULE_6__.Container && curNode.children.length !== 0 && !(curNode instanceof gui_2D_advancedDynamicTexture__WEBPACK_IMPORTED_MODULE_6__.Button)) {
+                const curContainer = curNode;
+                result.push(new _htmlTwinGUIItem__WEBPACK_IMPORTED_MODULE_3__.HTMLTwinGUIItem(curContainer, this.props.scene, this._getHTMLTwinItemsFromGUI(curContainer.children)));
+            }
+            else {
+                result.push(new _htmlTwinGUIItem__WEBPACK_IMPORTED_MODULE_3__.HTMLTwinGUIItem(curNode, this.props.scene, []));
+            }
+        }
+        return result;
+    }
+    _isGUI(node) {
+        let isGUI = false;
+        if (node instanceof core_Meshes_abstractMesh__WEBPACK_IMPORTED_MODULE_5__.AbstractMesh) {
+            const curMesh = node;
+            const textures = curMesh.material?.getActiveTextures();
+            isGUI = !!textures && textures[0] instanceof gui_2D_advancedDynamicTexture__WEBPACK_IMPORTED_MODULE_6__.AdvancedDynamicTexture;
+        }
+        return isGUI;
+    }
+}
 
 
 /***/ }),
@@ -31425,53 +31425,53 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony export */ __webpack_require__.d(__webpack_exports__, {
 /* harmony export */   "HTMLTwinItem": () => (/* binding */ HTMLTwinItem)
 /* harmony export */ });
-/**
- * A abstract layer to store the html twin tree structure. It is constructed from the BabylonJS scene entities that need to be accessible. It informs the parent-children relationship of html twin tree, and informs how to render: description, isActionable, onclick/onrightclick/onfocus/onblur.
- */
-class HTMLTwinItem {
-    constructor(entity, scene, children) {
-        this.entity = entity;
-        this.scene = scene;
-        this.children = children;
-    }
-    /**
-     * The text content displayed in HTML element.
-     * Returns the description in accessibilityTag, if defined (returns "" by default).
-     */
-    get description() {
-        return this.entity.accessibilityTag?.description ?? "";
-    }
-    /**
-     * If this entity is actionable (can be clicked).
-     * Implemented by child classes
-     */
-    get isActionable() {
-        return this._isActionable;
-    }
-    /**
-     * If this entity is focusable (can be focused by tab key pressing).
-     * Implemented by child classes
-     */
-    get isFocusable() {
-        return this._isFocusable;
-    }
-    /**
-     * Callback when the HTML element is focused. Show visual indication on BabylonJS entity.
-     * Implemented by child classes
-     */
-    focus() { }
-    /**
-     * Callback when the HTML element is blured. Dismiss visual indication on BabylonJS entity.
-     * Implemented by child classes
-     */
-    blur() { }
-    /**
-     * Callback when an event (e.g. click/right click) happens on the HTML element.
-     * Implemented by child classes
-     * @param _eventType - Which event is triggered. E.g. "click", "contextmenu"
-     */
-    triggerEvent(_eventType) { }
-}
+/**
+ * A abstract layer to store the html twin tree structure. It is constructed from the BabylonJS scene entities that need to be accessible. It informs the parent-children relationship of html twin tree, and informs how to render: description, isActionable, onclick/onrightclick/onfocus/onblur.
+ */
+class HTMLTwinItem {
+    constructor(entity, scene, children) {
+        this.entity = entity;
+        this.scene = scene;
+        this.children = children;
+    }
+    /**
+     * The text content displayed in HTML element.
+     * Returns the description in accessibilityTag, if defined (returns "" by default).
+     */
+    get description() {
+        return this.entity.accessibilityTag?.description ?? "";
+    }
+    /**
+     * If this entity is actionable (can be clicked).
+     * Implemented by child classes
+     */
+    get isActionable() {
+        return this._isActionable;
+    }
+    /**
+     * If this entity is focusable (can be focused by tab key pressing).
+     * Implemented by child classes
+     */
+    get isFocusable() {
+        return this._isFocusable;
+    }
+    /**
+     * Callback when the HTML element is focused. Show visual indication on BabylonJS entity.
+     * Implemented by child classes
+     */
+    focus() { }
+    /**
+     * Callback when the HTML element is blured. Dismiss visual indication on BabylonJS entity.
+     * Implemented by child classes
+     */
+    blur() { }
+    /**
+     * Callback when an event (e.g. click/right click) happens on the HTML element.
+     * Implemented by child classes
+     * @param _eventType - Which event is triggered. E.g. "click", "contextmenu"
+     */
+    triggerEvent(_eventType) { }
+}
 
 
 /***/ }),
@@ -31489,115 +31489,115 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony import */ var core_Engines_constants__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! core/Meshes/mesh */ "core/Meshes/abstractMesh");
 /* harmony import */ var core_Engines_constants__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(core_Engines_constants__WEBPACK_IMPORTED_MODULE_0__);
 /* harmony import */ var _htmlTwinItem__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./htmlTwinItem */ "../../../tools/accessibility/dist/HtmlTwin/htmlTwinItem.js");
-
-
-
-
-/**
- * A abstract layer to store the html twin tree structure. It is constructed from the BabylonJS scene entities that need to be accessible. It informs the parent-children relationship of html twin tree, and informs how to render: description, isActionable, onclick/onrightclick/onfocus/onblur.
- */
-class HTMLTwinNodeItem extends _htmlTwinItem__WEBPACK_IMPORTED_MODULE_1__.HTMLTwinItem {
-    constructor(entity, scene, children) {
-        super(entity, scene, children);
-    }
-    /**
-     * If this entity is actionable (can be clicked).
-     */
-    get isActionable() {
-        if (this._isActionable) {
-            return this._isActionable;
-        }
-        // If defined onclick, override default.
-        const eventHandler = this.entity.accessibilityTag?.eventHandler;
-        if (eventHandler?.click || eventHandler?.contextmenu) {
-            this._isActionable = true;
-        }
-        else {
-            this._isActionable = this.entity._getActionManagerForTrigger()?.hasPickTriggers;
-        }
-        return this._isActionable;
-    }
-    /**
-     * If this entity is focusable (can be focused by tab key pressing).
-     */
-    get isFocusable() {
-        if (this._isFocusable) {
-            return this._isFocusable;
-        }
-        else {
-            this._isFocusable = this.isActionable;
-        }
-        return this._isFocusable;
-    }
-    /**
-     * Callback when the HTML element is focused. Show visual indication on BabylonJS entity.
-     */
-    focus() {
-        // If defined eventHandler, override default.
-        const eventHandler = this.entity.accessibilityTag?.eventHandler;
-        if (eventHandler?.focus) {
-            eventHandler.focus();
-            return;
-        }
-        if (this.entity instanceof core_Engines_constants__WEBPACK_IMPORTED_MODULE_0__.Mesh) {
-            const mesh = this.entity;
-            mesh.enableEdgesRendering(0.999);
-            mesh.edgesWidth = 5;
-            mesh.edgesColor = new core_Engines_constants__WEBPACK_IMPORTED_MODULE_0__.Color4(0.25, 0.5, 1, 1);
-        }
-    }
-    /**
-     * Callback when the HTML element is blured. Dismiss visual indication on BabylonJS entity.
-     */
-    blur() {
-        // If defined eventHandler, override default.
-        const eventHandler = this.entity.accessibilityTag?.eventHandler;
-        if (eventHandler?.blur) {
-            eventHandler.blur();
-            return;
-        }
-        if (this.entity instanceof core_Engines_constants__WEBPACK_IMPORTED_MODULE_0__.Mesh) {
-            const mesh = this.entity;
-            mesh.disableEdgesRendering();
-        }
-    }
-    /**
-     * Callback when an event (e.g. click/right click) happens on the HTML element.
-     * Implemented by child classes
-     * @param eventType - Which event is triggered. E.g. "click", "contextmenu"
-     */
-    triggerEvent(eventType) {
-        const eventHandler = this.entity.accessibilityTag?.eventHandler;
-        const actions = [];
-        switch (eventType) {
-            case "click":
-                if (eventHandler?.click) {
-                    eventHandler.click();
-                    return;
-                }
-                actions.push(...this._getTriggerActions(this.entity, core_Engines_constants__WEBPACK_IMPORTED_MODULE_0__.Constants.ACTION_OnLeftPickTrigger));
-                actions.push(...this._getTriggerActions(this.entity, core_Engines_constants__WEBPACK_IMPORTED_MODULE_0__.Constants.ACTION_OnPickTrigger));
-                break;
-            case "contextmenu":
-                if (eventHandler?.contextmenu) {
-                    eventHandler.contextmenu();
-                    return;
-                }
-                actions.push(...this._getTriggerActions(this.entity, core_Engines_constants__WEBPACK_IMPORTED_MODULE_0__.Constants.ACTION_OnRightPickTrigger));
-                actions.push(...this._getTriggerActions(this.entity, core_Engines_constants__WEBPACK_IMPORTED_MODULE_0__.Constants.ACTION_OnPickTrigger));
-                break;
-            default:
-                break;
-        }
-        actions.forEach((action) => {
-            action._executeCurrent();
-        });
-    }
-    _getTriggerActions(node, trigger) {
-        const triggerActions = node._getActionManagerForTrigger(trigger)?.actions.filter((action) => action.trigger == trigger);
-        return triggerActions ?? [];
-    }
-}
+
+
+
+
+/**
+ * A abstract layer to store the html twin tree structure. It is constructed from the BabylonJS scene entities that need to be accessible. It informs the parent-children relationship of html twin tree, and informs how to render: description, isActionable, onclick/onrightclick/onfocus/onblur.
+ */
+class HTMLTwinNodeItem extends _htmlTwinItem__WEBPACK_IMPORTED_MODULE_1__.HTMLTwinItem {
+    constructor(entity, scene, children) {
+        super(entity, scene, children);
+    }
+    /**
+     * If this entity is actionable (can be clicked).
+     */
+    get isActionable() {
+        if (this._isActionable) {
+            return this._isActionable;
+        }
+        // If defined onclick, override default.
+        const eventHandler = this.entity.accessibilityTag?.eventHandler;
+        if (eventHandler?.click || eventHandler?.contextmenu) {
+            this._isActionable = true;
+        }
+        else {
+            this._isActionable = this.entity._getActionManagerForTrigger()?.hasPickTriggers;
+        }
+        return this._isActionable;
+    }
+    /**
+     * If this entity is focusable (can be focused by tab key pressing).
+     */
+    get isFocusable() {
+        if (this._isFocusable) {
+            return this._isFocusable;
+        }
+        else {
+            this._isFocusable = this.isActionable;
+        }
+        return this._isFocusable;
+    }
+    /**
+     * Callback when the HTML element is focused. Show visual indication on BabylonJS entity.
+     */
+    focus() {
+        // If defined eventHandler, override default.
+        const eventHandler = this.entity.accessibilityTag?.eventHandler;
+        if (eventHandler?.focus) {
+            eventHandler.focus();
+            return;
+        }
+        if (this.entity instanceof core_Engines_constants__WEBPACK_IMPORTED_MODULE_0__.Mesh) {
+            const mesh = this.entity;
+            mesh.enableEdgesRendering(0.999);
+            mesh.edgesWidth = 5;
+            mesh.edgesColor = new core_Engines_constants__WEBPACK_IMPORTED_MODULE_0__.Color4(0.25, 0.5, 1, 1);
+        }
+    }
+    /**
+     * Callback when the HTML element is blured. Dismiss visual indication on BabylonJS entity.
+     */
+    blur() {
+        // If defined eventHandler, override default.
+        const eventHandler = this.entity.accessibilityTag?.eventHandler;
+        if (eventHandler?.blur) {
+            eventHandler.blur();
+            return;
+        }
+        if (this.entity instanceof core_Engines_constants__WEBPACK_IMPORTED_MODULE_0__.Mesh) {
+            const mesh = this.entity;
+            mesh.disableEdgesRendering();
+        }
+    }
+    /**
+     * Callback when an event (e.g. click/right click) happens on the HTML element.
+     * Implemented by child classes
+     * @param eventType - Which event is triggered. E.g. "click", "contextmenu"
+     */
+    triggerEvent(eventType) {
+        const eventHandler = this.entity.accessibilityTag?.eventHandler;
+        const actions = [];
+        switch (eventType) {
+            case "click":
+                if (eventHandler?.click) {
+                    eventHandler.click();
+                    return;
+                }
+                actions.push(...this._getTriggerActions(this.entity, core_Engines_constants__WEBPACK_IMPORTED_MODULE_0__.Constants.ACTION_OnLeftPickTrigger));
+                actions.push(...this._getTriggerActions(this.entity, core_Engines_constants__WEBPACK_IMPORTED_MODULE_0__.Constants.ACTION_OnPickTrigger));
+                break;
+            case "contextmenu":
+                if (eventHandler?.contextmenu) {
+                    eventHandler.contextmenu();
+                    return;
+                }
+                actions.push(...this._getTriggerActions(this.entity, core_Engines_constants__WEBPACK_IMPORTED_MODULE_0__.Constants.ACTION_OnRightPickTrigger));
+                actions.push(...this._getTriggerActions(this.entity, core_Engines_constants__WEBPACK_IMPORTED_MODULE_0__.Constants.ACTION_OnPickTrigger));
+                break;
+            default:
+                break;
+        }
+        actions.forEach((action) => {
+            action._executeCurrent();
+        });
+    }
+    _getTriggerActions(node, trigger) {
+        const triggerActions = node._getActionManagerForTrigger(trigger)?.actions.filter((action) => action.trigger == trigger);
+        return triggerActions ?? [];
+    }
+}
 
 
 /***/ }),
@@ -31615,17 +31615,17 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react */ "../../../../node_modules/react/index.js");
 /* harmony import */ var react_dom__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! react-dom */ "../../../../node_modules/react-dom/index.js");
 /* harmony import */ var _htmlTwinHostComponent__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./htmlTwinHostComponent */ "../../../tools/accessibility/dist/HtmlTwin/htmlTwinHostComponent.js");
-
-
-
-class HTMLTwinRenderer {
-    static Render(scene) {
-        const htmlTwinHost = react__WEBPACK_IMPORTED_MODULE_0__.createElement(_htmlTwinHostComponent__WEBPACK_IMPORTED_MODULE_2__.HTMLTwinHostComponent, {
-            scene,
-        });
-        react_dom__WEBPACK_IMPORTED_MODULE_1__.render(htmlTwinHost, scene.getEngine().getRenderingCanvas());
-    }
-}
+
+
+
+class HTMLTwinRenderer {
+    static Render(scene) {
+        const htmlTwinHost = react__WEBPACK_IMPORTED_MODULE_0__.createElement(_htmlTwinHostComponent__WEBPACK_IMPORTED_MODULE_2__.HTMLTwinHostComponent, {
+            scene,
+        });
+        react_dom__WEBPACK_IMPORTED_MODULE_1__.render(htmlTwinHost, scene.getEngine().getRenderingCanvas());
+    }
+}
 
 
 /***/ }),
@@ -31642,54 +31642,54 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony export */ });
 /* harmony import */ var react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react/jsx-runtime */ "../../../../node_modules/react/jsx-runtime.js");
 /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! react */ "../../../../node_modules/react/index.js");
-
-
-class HTMLTwinItemComponent extends react__WEBPACK_IMPORTED_MODULE_1__.Component {
-    constructor(props) {
-        super(props);
-    }
-    render() {
-        const item = this.props.a11yItem;
-        if (item.children.length === 0) {
-            return this._renderLeafNode(item);
-        }
-        else {
-            return this._renderParentNode(item, this.props.level);
-        }
-    }
-    _renderLeafNode(a11yItem) {
-        if (a11yItem.isActionable) {
-            return ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("button", { onClick: () => {
-                    a11yItem.triggerEvent("click");
-                }, onContextMenu: () => {
-                    a11yItem.triggerEvent("contextmenu");
-                }, tabIndex: a11yItem.isFocusable ? 0 : -1, onFocus: () => {
-                    a11yItem.focus();
-                }, onBlur: () => {
-                    a11yItem.blur();
-                }, role: a11yItem.entity.accessibilityTag?.role, ...a11yItem.entity.accessibilityTag?.aria, children: a11yItem.description }));
-        }
-        else {
-            return ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div", { tabIndex: a11yItem.isFocusable ? 0 : -1, onFocus: () => {
-                    a11yItem.focus();
-                }, onBlur: () => {
-                    a11yItem.blur();
-                }, role: a11yItem.entity.accessibilityTag?.role, ...a11yItem.entity.accessibilityTag?.aria, children: a11yItem.description }));
-        }
-    }
-    _renderParentNode(a11yItem, level) {
-        return ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", { children: [!!a11yItem.description && ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div", { role: a11yItem.entity.accessibilityTag?.role ?? "heading", "aria-level": level, tabIndex: a11yItem.isFocusable ? 0 : -1, onFocus: () => {
-                        a11yItem.focus();
-                    }, onBlur: () => {
-                        a11yItem.blur();
-                    }, ...a11yItem.entity.accessibilityTag?.aria, children: a11yItem.description })), this._renderChildren(a11yItem.children, Math.min(level + 1, 6))] }));
-    }
-    _renderChildren(children, level) {
-        return children.map((child) => {
-            return ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(HTMLTwinItemComponent, { a11yItem: child, level: level }, child.entity.uniqueId !== undefined && child.entity.uniqueId !== null ? child.entity.uniqueId : child.entity.name));
-        });
-    }
-}
+
+
+class HTMLTwinItemComponent extends react__WEBPACK_IMPORTED_MODULE_1__.Component {
+    constructor(props) {
+        super(props);
+    }
+    render() {
+        const item = this.props.a11yItem;
+        if (item.children.length === 0) {
+            return this._renderLeafNode(item);
+        }
+        else {
+            return this._renderParentNode(item, this.props.level);
+        }
+    }
+    _renderLeafNode(a11yItem) {
+        if (a11yItem.isActionable) {
+            return ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("button", { onClick: () => {
+                    a11yItem.triggerEvent("click");
+                }, onContextMenu: () => {
+                    a11yItem.triggerEvent("contextmenu");
+                }, tabIndex: a11yItem.isFocusable ? 0 : -1, onFocus: () => {
+                    a11yItem.focus();
+                }, onBlur: () => {
+                    a11yItem.blur();
+                }, role: a11yItem.entity.accessibilityTag?.role, ...a11yItem.entity.accessibilityTag?.aria, children: a11yItem.description }));
+        }
+        else {
+            return ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div", { tabIndex: a11yItem.isFocusable ? 0 : -1, onFocus: () => {
+                    a11yItem.focus();
+                }, onBlur: () => {
+                    a11yItem.blur();
+                }, role: a11yItem.entity.accessibilityTag?.role, ...a11yItem.entity.accessibilityTag?.aria, children: a11yItem.description }));
+        }
+    }
+    _renderParentNode(a11yItem, level) {
+        return ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", { children: [!!a11yItem.description && ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div", { role: a11yItem.entity.accessibilityTag?.role ?? "heading", "aria-level": level, tabIndex: a11yItem.isFocusable ? 0 : -1, onFocus: () => {
+                        a11yItem.focus();
+                    }, onBlur: () => {
+                        a11yItem.blur();
+                    }, ...a11yItem.entity.accessibilityTag?.aria, children: a11yItem.description })), this._renderChildren(a11yItem.children, Math.min(level + 1, 6))] }));
+    }
+    _renderChildren(children, level) {
+        return children.map((child) => {
+            return ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(HTMLTwinItemComponent, { a11yItem: child, level: level }, child.entity.uniqueId !== undefined && child.entity.uniqueId !== null ? child.entity.uniqueId : child.entity.name));
+        });
+    }
+}
 
 
 /***/ }),
@@ -31705,7 +31705,7 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony export */   "HTMLTwinRenderer": () => (/* reexport safe */ _htmlTwinRenderer__WEBPACK_IMPORTED_MODULE_0__.HTMLTwinRenderer)
 /* harmony export */ });
 /* harmony import */ var _htmlTwinRenderer__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./htmlTwinRenderer */ "../../../tools/accessibility/dist/HtmlTwin/htmlTwinRenderer.js");
-
+
 
 
 /***/ }),
@@ -31721,8 +31721,8 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony export */   "HTMLTwinRenderer": () => (/* reexport safe */ _HtmlTwin_index__WEBPACK_IMPORTED_MODULE_0__.HTMLTwinRenderer)
 /* harmony export */ });
 /* harmony import */ var _HtmlTwin_index__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./HtmlTwin/index */ "../../../tools/accessibility/dist/HtmlTwin/index.js");
-// eslint-disable-next-line import/no-internal-modules
-
+// eslint-disable-next-line import/no-internal-modules
+
 
 
 /***/ }),
@@ -31738,17 +31738,17 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony export */   "HTMLTwinRenderer": () => (/* reexport safe */ _index__WEBPACK_IMPORTED_MODULE_0__.HTMLTwinRenderer)
 /* harmony export */ });
 /* harmony import */ var _index__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ../index */ "../../../tools/accessibility/dist/index.js");
-/* eslint-disable import/no-internal-modules */
-
-const globalObject = typeof __webpack_require__.g !== "undefined" ? __webpack_require__.g : typeof window !== "undefined" ? window : undefined;
-if (typeof globalObject !== "undefined") {
-    globalObject.BABYLON = globalObject.BABYLON || {};
-    // eslint-disable-next-line @typescript-eslint/naming-convention
-    globalObject.BABYLON.Accessibility = { HTMLTwinRenderer: _index__WEBPACK_IMPORTED_MODULE_0__.HTMLTwinRenderer };
-    // eslint-disable-next-line @typescript-eslint/naming-convention
-    globalObject.ACCESSIBILITY = { HTMLTwinRenderer: _index__WEBPACK_IMPORTED_MODULE_0__.HTMLTwinRenderer };
-}
-
+/* eslint-disable import/no-internal-modules */
+
+const globalObject = typeof __webpack_require__.g !== "undefined" ? __webpack_require__.g : typeof window !== "undefined" ? window : undefined;
+if (typeof globalObject !== "undefined") {
+    globalObject.BABYLON = globalObject.BABYLON || {};
+    // eslint-disable-next-line @typescript-eslint/naming-convention
+    globalObject.BABYLON.Accessibility = { HTMLTwinRenderer: _index__WEBPACK_IMPORTED_MODULE_0__.HTMLTwinRenderer };
+    // eslint-disable-next-line @typescript-eslint/naming-convention
+    globalObject.ACCESSIBILITY = { HTMLTwinRenderer: _index__WEBPACK_IMPORTED_MODULE_0__.HTMLTwinRenderer };
+}
+
 
 
 /***/ }),
@@ -31865,9 +31865,9 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony export */   "default": () => (__WEBPACK_DEFAULT_EXPORT__)
 /* harmony export */ });
 /* harmony import */ var accessibility_legacy_legacy__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! accessibility/legacy/legacy */ "../../../tools/accessibility/dist/legacy/legacy.js");
-
-
-/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (accessibility_legacy_legacy__WEBPACK_IMPORTED_MODULE_0__);
+
+
+/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (accessibility_legacy_legacy__WEBPACK_IMPORTED_MODULE_0__);
 
 })();