From 34909bb78c1e2c3225720d2103cc1e3516d02459 Mon Sep 17 00:00:00 2001
From: Jens Wittmann <post@jens-wittmann.de>
Date: Thu, 5 Sep 2024 21:19:58 +0200
Subject: [PATCH] A11y: add keyboard navigation demo for manager main nav
 #16612

---
 manager/assets/modext/core/modx.layout.js | 13 +++++++++++++
 manager/controllers/default/header.php    |  2 +-
 2 files changed, 14 insertions(+), 1 deletion(-)

diff --git a/manager/assets/modext/core/modx.layout.js b/manager/assets/modext/core/modx.layout.js
index 1d9538b176c..32134a342e0 100644
--- a/manager/assets/modext/core/modx.layout.js
+++ b/manager/assets/modext/core/modx.layout.js
@@ -425,6 +425,7 @@ Ext.extend(MODx.Layout, Ext.Viewport, {
     ,initPopper: function() {
         var el = this;
         var buttons = document.getElementById('modx-navbar').getElementsByClassName('top');
+        var focusRestore = false;
         var position = window.innerWidth <= 960 ? 'bottom' : 'right';
         for (var i = 0; i < buttons.length; i++) {
             var submenu = document.getElementById(buttons[i].id + '-submenu');
@@ -467,12 +468,21 @@ Ext.extend(MODx.Layout, Ext.Viewport, {
             });
             buttons[i].onclick = function(e) {
                 e.stopPropagation();
+                focusRestore = this;
                 el.showMenu(this);
             };
         }
         window.addEventListener('click', function() {
             el.hideMenu();
         });
+        document.addEventListener('keydown', function(e) {
+            if (e.key == 'Escape') {
+                el.hideMenu();
+                setTimeout(() => {
+                    focusRestore?.querySelectorAll('a')[0].focus();
+                });
+            }
+        });
         if (window.innerWidth > 960) {
             this.initSubPopper();
         }
@@ -485,6 +495,9 @@ Ext.extend(MODx.Layout, Ext.Viewport, {
         } else {
             this.hideMenu();
             submenu.classList.add('active');
+            setTimeout(() => {
+                submenu.querySelectorAll('a')[0].focus();
+            }, 250);
         }
         this.hideSubMenu();
     }
diff --git a/manager/controllers/default/header.php b/manager/controllers/default/header.php
index 9571452213d..9bec4ae5ef1 100644
--- a/manager/controllers/default/header.php
+++ b/manager/controllers/default/header.php
@@ -329,7 +329,7 @@ public function processSubMenus(&$output, array $menus = [])
                 $attributes = ' href="?a='.$menu['action'].$menu['params'].'"';
             }
             if (!empty($menu['handler'])) {
-                $attributes .= ' onclick="{literal} '.str_replace('"','\'',$menu['handler']).'{/literal} "';
+                $attributes .= ' tabindex="0" onclick="{literal} '.str_replace('"','\'',$menu['handler']).'{/literal} "';
             }
             $menu['icon'] = $menu['icon'] ?? '';
             $smTpl .= '<a'.$attributes.'>'.$menu['text'].$menu['icon'].$description.'</a>'."\n";