A11y: add keyboard navigation demo for manager main nav modxcms#16612

jenswittmann · Sep 23, 2024 · 34909bb · 34909bb
1 parent dd811eb
commit 34909bb
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 1 deletion.
diff --git 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
@@ -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";