[3.1] A11y/ManagerMenu: hotfix for links not clickable 3th level

manager/assets/modext/core/modx.layout.js

@@ -62,14 +62,9 @@ Ext.extend(MODx.Layout, Ext.Viewport, {
     ,splitBarMargin: 8
 
     /**
-     * @property {Array} focusRestoreEls - Set Focus back on the last Element in array on close
+     * @property {Object} focusRestoreEl - Set Focus back on this Element
      */
-    ,focusRestoreEls: []
-
-    /**
-     * @property {bool} subNavOpen - Check if Subnav is opened
-     */
-    ,subNavOpen: false
+    ,focusRestoreEl: []
 
     /**
      * @property {Function} getSplitBarMargin - Utility getter for splitBarMargin
@@ -493,9 +488,9 @@ Ext.extend(MODx.Layout, Ext.Viewport, {
                         }
                     }
                 });
-                buttons[i].addEventListener('click', function (e) {
+                buttons[i].addEventListener('click', function(e) {
                     e.stopPropagation();
-                    el.focusRestoreEls.push(this.querySelectorAll('a')[0]);
+                    el.focusRestoreEl = this.querySelectorAll('a')[0];
                     el.showMenu(this);
                 });
             }
@@ -514,30 +509,38 @@ Ext.extend(MODx.Layout, Ext.Viewport, {
             submenu.classList.remove('active');
         } else {
             this.hideMenu();
+            var isClick = false;
             submenu.classList.add('active');
             setTimeout(() => {
-                submenu.querySelectorAll('a')[0].focus();
+                var firstFocusEl = submenu.querySelectorAll('a')[0];
+                if (!firstFocusEl) {
+                    return;
+                }
+                firstFocusEl.focus();
             }, 50);
+            var menuItemClicked = (e) => {
+                isClick = true;
+                window.removeEventListener('click', menuItemClicked);
+            };
             var focusRestore = (e) => {
-                setTimeout(() => {
-                    if (this.subNavOpen) {
-                        return;
-                    }
+                requestAnimationFrame(() => {
                     if (!submenu.contains(document.activeElement)) {
-                        this.focusRestoreEls?.pop()?.focus();
+                        if (!isClick) {
+                            this.focusRestoreEl?.focus();
+                        }
                         this.hideMenu();
                         window.removeEventListener('focusout', focusRestore);
                     }
-                }, 1);
+                });
             };
             var menuArrowKeysNavigation = (e) => {
                 if (e.code == 'Escape') {
                     this.hideMenu();
-                    this.focusRestoreEls[0]?.focus();
-                    this.focusRestoreEls = [];
+                    this.focusRestoreEl?.focus();
                     window.removeEventListener('keyup', menuArrowKeysNavigation);
                 }
             };
+            window.addEventListener('click', menuItemClicked);
             window.addEventListener('focusout', focusRestore);
             window.addEventListener('keyup', menuArrowKeysNavigation);
         }
@@ -552,7 +555,6 @@ Ext.extend(MODx.Layout, Ext.Viewport, {
     ,initSubPopper: function () {
         var buttons = document.querySelectorAll('#modx-header .sub, #modx-footer .sub');
         var position = window.innerWidth <= 960 ? 'bottom' : 'right';
-        var _this = this;
         for (var i = 0; i < buttons.length; i++) {
             let popperInstance = null;
 
@@ -595,17 +597,14 @@ Ext.extend(MODx.Layout, Ext.Viewport, {
             }
 
             function show(button) {
-                var menu = button.getElementsByTagName('ul')[0];
+                var submenu = button.getElementsByTagName('ul')[0];
                 button.classList.add('active');
-                menu.classList.add('active');
-                _this.focusRestoreEls.push(button.querySelectorAll('a')[0]);
-                _this.subNavOpen = true;
-                create(button, menu);
+                submenu.classList.add('active');
+                create(button, submenu);
                 var focusRestore = (e) => {
                     requestAnimationFrame(() => {
-                        if (!menu.contains(document.activeElement)) {
-                            _this.focusRestoreEls?.pop()?.parentNode?.nextSibling?.focus();
-                            hide(button);
+                        if (!submenu.contains(document.activeElement)) {
+                            submenu.classList.remove('active');
                             window.removeEventListener('focusout', focusRestore);
                         }
                     });
@@ -623,7 +622,6 @@ Ext.extend(MODx.Layout, Ext.Viewport, {
                     submenu.removeAttribute('style');
                     buttons[i].classList.remove('active');
                 }
-                _this.subNavOpen = false;
                 destroy();
             }
             buttons[i].addEventListener('mouseenter', function (e) {
@@ -632,7 +630,9 @@ Ext.extend(MODx.Layout, Ext.Viewport, {
             });
             buttons[i].querySelectorAll('a')[0].addEventListener('focus', function (e) {
                 e.stopPropagation();
-                show(this.parentNode);
+                requestAnimationFrame(() => {
+                    show(this.parentNode);
+                });
             });
             buttons[i].addEventListener('mouseleave', function (e) {
                 e.stopPropagation();

manager/templates/default/css/index.css

@@ -1,6 +1,6 @@
 /*
 * 
-* Copyright (C) 2024 MODX LLC
+* Copyright (C) 2025 MODX LLC
 * 
 * This file is part of MODX Revolution and was compiled using Grunt.
 * 

manager/templates/default/css/login.css

@@ -1,6 +1,6 @@
 /*
 * 
-* Copyright (C) 2024 MODX LLC
+* Copyright (C) 2025 MODX LLC
 * 
 * This file is part of MODX Revolution and was compiled using Grunt.
 * 

manager/templates/default/footer.tpl

@@ -1,13 +1,6 @@
     </div>
     <!-- #modx-content-->
-    <div id="modx-footer">
-        {if $_search}
-            <div class="modx-subnav" id="modx-manager-search-icon-submenu">
-                <div class="modx-subnav-arrow"></div>
-                <div id="modx-manager-search" role="search"></div>
-            </div>
-        {/if}
-    </div>
+    <div id="modx-footer"></div>
 </div>
 <!-- #modx-container -->
 

manager/templates/default/header.tpl

@@ -111,6 +111,12 @@
                     </li>
                 {/if}
             </ul>
+            {if $_search}
+                <div class="modx-subnav" id="modx-manager-search-icon-submenu">
+                    <div class="modx-subnav-arrow"></div>
+                    <div id="modx-manager-search" role="search"></div>
+                </div>
+            {/if}
             <ul id="modx-topnav">
                 {eval var=$navb}
             </ul>

setup/assets/css/installer.css

@@ -1,6 +1,6 @@
 /*
 * 
-* Copyright (C) 2024 MODX LLC
+* Copyright (C) 2025 MODX LLC
 * 
 * This file is part of MODX Revolution and was compiled using Grunt.
 *