Fix to Joomla Coding standards

build/media_src/mod_menu/js/menu.es6.js

@@ -0,0 +1,156 @@
+/**
+ * @copyright  Copyright (C) 2005 - 2018 Open Source Matters, Inc. All rights reserved.
+ * @license    GNU General Public License version 2 or later; see LICENSE.txt
+ */
+
+function topLevelMouseOver(el, settings) {
+  const ulChild = el.querySelector('ul');
+  if (ulChild) {
+    ulChild.setAttribute('aria-hidden', 'false');
+    ulChild.classList.add(settings.menuHoverClass);
+  }
+}
+
+function topLevelMouseOut(el, settings) {
+  const ulChild = el.querySelector('ul');
+  if (ulChild) {
+    ulChild.setAttribute('aria-hidden', 'true');
+    ulChild.classList.remove(settings.menuHoverClass);
+  }
+}
+
+function setupNavigation(nav) {
+  const settings = { menuHoverClass: 'show-menu', dir: 'ltr' };
+  const topLevelChilds = nav.querySelectorAll(':scope > li');
+
+  // Set tabIndex to -1 so that top_level_childs can't receive focus until menu is open
+  topLevelChilds.forEach((topLevelEl) => {
+    const linkEl = topLevelEl.querySelector('a');
+    if (linkEl) {
+      linkEl.tabIndex = '0';
+      linkEl.addEventListener('mouseover', topLevelMouseOver(topLevelEl, settings));
+      linkEl.addEventListener('mouseout', topLevelMouseOut(topLevelEl, settings));
+    }
+    const spanEl = topLevelEl.querySelector('span');
+    if (spanEl) {
+      spanEl.tabIndex = '0';
+      spanEl.addEventListener('mouseover', topLevelMouseOver(topLevelEl, settings));
+      spanEl.addEventListener('mouseout', topLevelMouseOut(topLevelEl, settings));
+    }
+    topLevelEl.querySelectorAll('ul').forEach((el) => {
+      el.setAttribute('data-test', 'true');
+      el.setAttribute('aria-hidden', 'true');
+      el.setAttribute('role', 'menu');
+      // Adding aria-haspopup for appropriate items
+      if (el.children.length > 0) {
+        el.parentElement.setAttribute('aria-haspopup', 'true');
+      }
+      el.querySelectorAll('li').forEach((liEl) => {
+        if (liEl.querySelector('a')) liEl.querySelector('a').tabIndex = '0';
+        if (liEl.querySelector('span')) liEl.querySelector('span').tabIndex = '0';
+      });
+    });
+
+    topLevelEl.addEventListener('mouseover', (event) => {
+      const curEl = event.target;
+      const ulChild = curEl.querySelector('ul');
+      if (ulChild) {
+        ulChild.setAttribute('aria-hidden', 'false');
+        ulChild.classList.add(settings.menuHoverClass);
+      }
+    });
+
+    topLevelEl.addEventListener('mouseout', (event) => {
+      const curEl = event.target;
+      const ulChild = curEl.querySelector('ul');
+      if (ulChild) {
+        ulChild.setAttribute('aria-hidden', 'true');
+        ulChild.classList.remove(settings.menuHoverClass);
+      }
+    });
+
+    topLevelEl.addEventListener('focus', (event) => {
+      const curEl = event.target;
+      const ulChild = curEl.querySelector('ul');
+      if (ulChild) {
+        ulChild.setAttribute('aria-hidden', 'true');
+        ulChild.classList.add(settings.menuHoverClass);
+      }
+    });
+
+    topLevelEl.addEventListener('blur', (event) => {
+      const curEl = event.target;
+      const ulChild = curEl.querySelector('ul');
+      if (ulChild) {
+        ulChild.setAttribute('aria-hidden', 'false');
+        ulChild.classList.remove(settings.menuHoverClass);
+      }
+    });
+
+    topLevelEl.addEventListener('keydown', (event) => {
+      const keyName = event.key;
+      const curEl = event.target;
+      const curLiEl = curEl.parentElement;
+      const curUlEl = curLiEl.parentElement;
+      let prevLiEl = curLiEl.previousElementSibling;
+      let nextLiEl = curLiEl.nextElementSibling;
+      if (!prevLiEl) {
+        prevLiEl = curUlEl.children[curUlEl.children.length - 1];
+      }
+      if (!nextLiEl) {
+        [nextLiEl] = curUlEl.children;
+      }
+      switch (keyName) {
+        case 'ArrowLeft':
+          event.preventDefault();
+          if (settings.dir === 'rtl') {
+            nextLiEl.children[0].focus();
+          } else {
+            prevLiEl.children[0].focus();
+          }
+          break;
+        case 'ArrowRight':
+          event.preventDefault();
+          if (settings.dir === 'rtl') {
+            prevLiEl.children[0].focus();
+          } else {
+            nextLiEl.children[0].focus();
+          }
+          break;
+        case 'ArrowUp': {
+          event.preventDefault();
+          const parent = curLiEl.parentElement.parentElement;
+          if (parent.nodeName === 'LI') {
+            parent.children[0].focus();
+          } else {
+            prevLiEl.children[0].focus();
+          }
+          break;
+        }
+        case 'ArrowDown':
+          event.preventDefault();
+          if (curLiEl.classList.contains('parent')) {
+            const child = curLiEl.querySelector('ul');
+            if (child != null) {
+              const childLi = child.querySelector('li');
+              childLi.children[0].focus();
+            } else {
+              nextLiEl.children[0].focus();
+            }
+          } else {
+            nextLiEl.children[0].focus();
+          }
+          break;
+        default:
+          break;
+      }
+    });
+  });
+}
+
+document.addEventListener('DOMContentLoaded', () => {
+  const navs = document.querySelectorAll('.nav');
+  [].forEach.call(navs, (nav) => {
+    setupNavigation(nav);
+  });
+});