Scroll to Top
document.addEventListener("DOMContentLoaded", function () { // 1. Target all top-level parent menu links that have submenus but no active link (no href or empty) const parentToggles = document.querySelectorAll(".menu-item-has-children > a:not([href]), .menu-item-has-children > a[href='']"); parentToggles.forEach(function (toggle) { // 2. Set the mandatory accessibility attributes toggle.setAttribute("tabindex", "0"); // Makes it focusable via Tab key [1] toggle.setAttribute("role", "button"); // Tells screen readers it is an interactive button [1, 4] toggle.setAttribute("aria-haspopup", "menu"); // Warns screen readers that a menu is attached [1, 4] toggle.setAttribute("aria-expanded", "false"); // Sets the initial closed state [1, 4] // Find the adjacent submenu const submenu = toggle.nextElementSibling; if (submenu) { // Generate a unique ID to link the toggle to the submenu const uniqueId = "submenu-" + Math.random().toString(36).substr(2, 9); submenu.setAttribute("id", uniqueId); toggle.setAttribute("aria-controls", uniqueId); // Establishes programmatic relationship [1, 4] } // Toggle function function toggleMenu(event) { event.preventDefault(); const expanded = toggle.getAttribute("aria-expanded") === "true"; // Toggle aria-expanded state [1, 5] toggle.setAttribute("aria-expanded", !expanded); // Toggle the visibility class (targets your theme/Elementor submenu styling) if (submenu) { submenu.classList.toggle("sub-menu-open"); } } // 3. Listen for Clicks (Click covers touch and mouse) [6] toggle.addEventListener("click", toggleMenu); // 4. Listen for Keyboard interactions (Enter & Space) [3] toggle.addEventListener("keydown", function (event) { if (event.key === "Enter" || event.key === " ") { event.preventDefault(); toggleMenu(event); } // Close menu on Escape key press [3] if (event.key === "Escape") { toggle.setAttribute("aria-expanded", "false"); if (submenu) submenu.classList.remove("sub-menu-open"); toggle.focus(); // Focus management: return focus to the trigger [3] } }); }); });