@qhealth-design-system/core 1.20.2 → 1.21.0

package/src/components/in_page_navigation/html/component.hbs

@@ -1,17 +1,10 @@
-{{!-- {{#ifCond current.data.metadata.pageType.value '==' 'landing'}} --}}
 <section class="qld__body">
-    <div class="container-fluid">
-{{!-- {{/ifCond}}        --}}
-
-    <nav class="qld__inpage-nav-links" aria-label="In page navigation" data-headingType="{{component.data.metadata.headingType.value}}">
-        <h2 class="qld__inpage-nav-links__heading">
-            {{{component.data.metadata.heading.value}}}
-        </h2>
-        <ul class="qld__link-list"></ul>
-    </nav>
-
-{{!-- {{#ifCond current.data.metadata.pageType.value '==' 'landing'}} --}}
-</div>
-</section>
-{{!-- {{/ifCond}}     --}}
-
+	<div class="container-fluid">
+		<nav class="qld__inpage-nav-links" aria-label="In page navigation" data-headingType="{{component.data.metadata.headingType.value}}">
+			<h2 class="qld__inpage-nav-links__heading">
+				{{{component.data.metadata.heading.value}}}
+			</h2>
+			<ul class="qld__link-list"></ul>
+		</nav>
+	</div>
+</section>

package/src/components/in_page_navigation/js/global.js

@@ -13,6 +13,10 @@ export default function initInPageNavigation(document = document) {
     navs.forEach((nav) => {
         const headingSelector = nav.getAttribute("data-headingType") ? nav.getAttribute("data-headingType") : "h2";
         const pageContent = isLandingPage ? mainEl : document.getElementById("content");
+        // Gracefully handle missing page content element
+        if (!pageContent) {
+            return;
+        }
         // Exclude Code CT, and accordion h3, h4, h5, h6
         const headings = pageContent.querySelectorAll(
             headingSelector + ":not(.qld__inpage-nav-links__heading):not(.banner__heading):not(.qld__code *):not(.qld__accordion h3):not(.qld__accordion h4):not(.qld__accordion h5):not(.qld__accordion h6)",
@@ -28,21 +32,39 @@ export default function initInPageNavigation(document = document) {
 
         // For all headings (with matching data-headingType) in page content
         headings.forEach((heading) => {
+            // If heading already has an ID, use it
+            const existingId = heading.getAttribute("id");
             const title = heading.innerText;
             // Create sanitized ID from heading text
-            const id = "section__" + normaliseIdentifier(title.toLowerCase());
+            const id = existingId || `section__${normaliseIdentifier(title.toLowerCase())}`;
             heading.setAttribute("id", id);
             heading.setAttribute("tabindex", -1);
+        });
+
+        // Handle leftover duplicate ID's found to ensure new unique ID's are generated
+        // Get array of all target heading IDs on the page
+        const headingsIds = [...headings].map((heading) => heading.getAttribute("id"));
+        // Filter anything that's not unique
+        const uniqueIds = headingsIds.filter((heading) => headingsIds.indexOf(heading) === headingsIds.lastIndexOf(heading));
+        // Loop through headings again but this time handle only duplicated ids
+        headings.forEach((elem, index) => {
+            let heading = elem.getAttribute("id");
+            const title = elem.innerText;
+            if (![...uniqueIds].includes(heading)) {
+                heading = `${heading}-${index}`;
+                elem.setAttribute("id", heading);
+            }
 
             // Create link and anchor items to be added to the list
             const link = document.createElement("li");
             const anchor = document.createElement("a");
-            anchor.setAttribute("href", `#${id}`);
+            anchor.setAttribute("href", `#${heading}`);
+            anchor.setAttribute("target", `_self`);
             anchor.textContent = title;
             link.appendChild(anchor);
 
             // Append link item if it doesn't already exist in the list
-            if (list.querySelector(`a[href="#${id}"]`) === null) {
+            if (list.querySelector(`a[href="#${heading}"]`) === null) {
                 list.appendChild(link);
             }
         });

package/src/components/main_navigation/js/global.js

@@ -294,7 +294,7 @@
                         // Add key listener
                         mobileNavEvents.escKey = addEvent(
                             document,
-                            "keyup",
+                            "keydown",
                             function () {
                                 var event = event || window.event;
                                 var overlayOpen = getStyle(overlay, "display");
@@ -385,44 +385,6 @@
             });
         });
 
-        // Add toggle event listeners to accordion buttons
-        var itemToggles = document.querySelectorAll(
-            ".qld__main-nav__item-toggle"
-        );
-        itemToggles.forEach(function (button) {
-            button.addEventListener("click", function () {
-                if (
-                    button.className
-                        .split(" ")
-                        .indexOf("qld__accordion--closed") >= 0
-                ) {
-                    button.parentNode
-                        .querySelector(".qld__main-nav__item-link")
-                        .classList.add("qld__main-nav__item-link--open");
-                    itemToggles.forEach(function (item) {
-                        if (
-                            item.className
-                                .split(" ")
-                                .indexOf("qld__accordion--open") >= 0
-                        ) {
-                            item.parentNode
-                                .querySelector(".qld__main-nav__item-link")
-                                .classList.remove(
-                                    "qld__main-nav__item-link--open"
-                                );
-                            QLD.accordion.Close(item);
-                        }
-                    });
-                } else {
-                    button.parentNode
-                        .querySelector(".qld__main-nav__item-link")
-                        .classList.remove("qld__main-nav__item-link--open");
-                }
-
-                QLD.accordion.Toggle(button);
-            });
-        });
-
         // Finds all the menu related icons in main nav, mega nav, and header.
         QLD.utils.updateSvgIconPath(
             ".qld__main-nav__cta-wrapper .qld__main-nav__item-link svg.qld__icon > use, .qld__header__cta-wrapper .qld__header__cta-link svg.qld__icon > use"

package/src/components/mega_main_navigation/js/global.js

@@ -1,165 +1,167 @@
-(function () {
-    /**
-     * The mega menu module
-     *
-     * @module megaMenu
-     */
-    var megaMenu = {
-        /**
-         * Initialise the mega menu listeners for keyboard navigation
-         *
-         * @memberof module:megaMenu
-         */
-        init: function () {
-            // Top level items
-            var topNavItems = document.querySelectorAll(".qld__main-nav__item-title > a");
-            topNavItems.forEach(function (item) {
-                item.addEventListener("keydown", handleTopNavKeydown);
-                item.addEventListener("focusin", toggleMenu);
-                item.addEventListener("focusout", handleTopNavFocusout);
-            });
-
-            // Mega menu items
-            var menuItems = document.querySelectorAll(".qld__main-nav__menu-sub a");
-            menuItems.forEach(function (item) {
-                item.addEventListener("keydown", handleMenuKeypress);
-            });
-        },
-    };
+/**
+ * Mega main navigation keyboard and interaction behaviour.
+ *
+ * Each nav item with a submenu supports:
+ *  - Click toggle button: open/close submenu
+ *  - ESC (anywhere in document): close submenu, prevent sidebar from also closing
+ *  - Click outside: close submenu
+ *  - Arrow Up/Down: move focus between submenu items
+ *  - Focusout (toggle button or submenu): close submenu unless focus stays within
+ */
 
-    /**
-     * Handle keydown on top level nav item to close the menu
-     * if ESCAPE or UP key are pressed
-     *
-     * @memberof module:megaMenu
-     * @instance
-     * @private
-     *
-     * @param {Document.event} e
-     */
-    function handleTopNavKeydown(e) {
-        var key = e.keyCode;
-
-        // ESC or UP ARROW
-        if (key === 27 || key == 38) {
-            toggleMenu(e);
-        }
-    }
-
-    /**
-     * Handle focusout of top level nav items.
-     * Close the menu, unless we have tabbed within
-     *
-     * @memberof module:megaMenu
-     * @instance
-     * @private
-     *
-     * @param {Document.event} e
-     */
-    function handleTopNavFocusout(e) {
-        var link = e.target;
-        var navItem = link.closest(".qld__main-nav__item");
-        var expanded = navItem.classList.contains("expanded") ? true : false;
-        var menu = navItem.querySelector(".qld__main-nav__menu-sub");
-
-        // Short delay to ensure we are on the new active element
-        // Close the menu, unless we have tabbed within
-        setTimeout(function () {
-            let menuHasFocus;
-            if (menu) {
-                menuHasFocus = menu.contains(document.activeElement) ? true : false;
-            }
-            if (!menuHasFocus && expanded) {
-                toggleMenu(e);
-            }
-        }, 20);
-    }
-
-    /**
-     * Toggle the mega menu open/closed
-     *
-     * @memberof module:megaMenu
-     * @instance
-     * @private
-     *
-     * @param {Document.event} e
-     */
-    function toggleMenu(e) {
-        var link = e.target;
-        var navItem = link.closest(".qld__main-nav__item");
-        var expanded = navItem.classList.contains("expanded") ? true : false;
-
-        if (!expanded) {
-            navItem.classList.add("expanded");
-            setTimeout(function () {
-                document.addEventListener("click", handleBackgroundClick);
-            }, 30);
+import {accordion} from "../../accordion/js/global.js";
+
+/** Selector matching all interactive elements that can receive focus. */
+const FOCUSABLE_SELECTOR = 'a[href], button:not([disabled]), input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex="-1"])';
+
+export function initMegaMenu() {
+    const navItemEls = document.querySelectorAll(".qld__main-nav__item");
+
+    const navItems = Array.from(navItemEls).map((item) => {
+        const navItemTitle = item.querySelector(".qld__main-nav__item-title");
+        if (!navItemTitle) return null;
+        const toggleBtnEl = navItemTitle.querySelector("button");
+        return {
+            linkEl: navItemTitle.querySelector("a"),
+            toggleBtnEl,
+            subMenuEl: item.querySelector(".qld__main-nav__menu-sub"),
+            clickingInsideSubMenu: false,
+            handlers: {},
+        };
+    }).filter(Boolean);
+
+    // Single shared mouseup listener to reset the clickingInsideSubMenu flag
+    // across all items. Registered once rather than once per item.
+    document.addEventListener("mouseup", () => {
+        navItems.forEach((item) => {
+            item.clickingInsideSubMenu = false;
+        });
+    });
+
+    navItems.forEach((item) => {
+        const {toggleBtnEl, subMenuEl} = item;
+        item.handlers.click = handleToggleBtnClick(item, navItems);
+        toggleBtnEl?.addEventListener("click", item.handlers.click);
+
+        subMenuEl?.addEventListener("mousedown", () => {
+            item.clickingInsideSubMenu = true;
+        });
+    });
+}
+
+function handleToggleBtnClick(item, navItems) {
+    return () => {
+        const {toggleBtnEl} = item;
+        if (isSubMenuOpen(toggleBtnEl)) {
+            closeSubMenu(item);
         } else {
-            navItem.classList.remove("expanded");
-            document.removeEventListener("click", handleBackgroundClick);
-        }
-    }
-
-    /**
-     * Close the mega menu if the user clicks outside of it while opened
-     *
-     * @memberof module:megaMenu
-     * @instance
-     * @private
-     *
-     * @param {Document.event} e
-     */
-    function handleBackgroundClick(e) {
-        var target = e.target;
-        var nav = document.querySelector(".qld__main-nav__menu-inner");
-
-        // If clicked outside nav
-        if (!nav.contains(target)) {
-            // Close any expanded menu(s)
-            document.querySelectorAll(".qld__main-nav__item.expanded").forEach(function (item) {
-                item.classList.remove("expanded");
-            });
-
-            // Remove listener
-            document.removeEventListener("click", handleBackgroundClick);
-        }
-    }
-
-    /**
-     * Handle keypress for item within mega menu.
-     * Close the menu on press of ESCAPE or UP
-     * After TAB press, check if focus is still within menu,
-     * and close if it's not
-     *
-     * @memberof module:megaMenu
-     * @instance
-     * @private
-     *
-     * @param {Document.event} e
-     */
-    function handleMenuKeypress(e) {
-        var link = e.target;
-        var key = e.keyCode;
-        var navItem = link.closest(".qld__main-nav__item");
-        var menu = link.closest(".qld__main-nav__menu-sub");
-
-        // ESC or UP ARROW
-        if (key === 27 || key == 38) {
-            navItem.querySelector(".qld__main-nav__item-title > a").focus();
+            closeAllSubMenus(navItems, item);
+            openSubMenu(item);
         }
+    };
+}
+
+/**
+ * Opens the submenu and registers all associated event listeners.
+ * Listeners are stored on item.handlers so they can be removed on close.
+ */
+function openSubMenu(item) {
+    const {linkEl, toggleBtnEl, subMenuEl} = item;
+    accordion.Open(toggleBtnEl);
+    syncNavItemLinkClass(linkEl, true);
+
+    item.handlers.documentEscape = handleDocumentEscape(item);
+    item.handlers.outsideClick = handleOutsideClick(item);
+    item.handlers.focusOut = handleFocusOut(item);
+    item.handlers.subMenuKeyDown = handleSubMenuKeyDown(item);
 
-        // If TAB key is pressed only (not SHIFT + TAB)
-        if (key === 9 && !e.shiftKey) {
-            setTimeout(function () {
-                var menuHasFocus = menu.contains(document.activeElement) ? true : false;
-                if (!menuHasFocus) {
-                    toggleMenu(e);
-                }
-            }, 20);
+    // Capture phase ensures this fires before the sidebar's bubble-phase keydown
+    // listener, so ESC closes the submenu first without also closing the sidebar.
+    document.addEventListener("keydown", item.handlers.documentEscape, true);
+    document.addEventListener("click", item.handlers.outsideClick);
+    subMenuEl?.addEventListener("focusout", item.handlers.focusOut);
+    subMenuEl?.addEventListener("keydown", item.handlers.subMenuKeyDown);
+    toggleBtnEl?.addEventListener("focusout", item.handlers.focusOut);
+}
+
+/**
+ * Closes the submenu and removes all associated event listeners registered in openSubMenu.
+ */
+function closeSubMenu(item) {
+    const {linkEl, toggleBtnEl, subMenuEl} = item;
+    accordion.Close(toggleBtnEl);
+    syncNavItemLinkClass(linkEl, false);
+
+    document.removeEventListener("keydown", item.handlers.documentEscape, true);
+    document.removeEventListener("click", item.handlers.outsideClick);
+    subMenuEl?.removeEventListener("focusout", item.handlers.focusOut);
+    subMenuEl?.removeEventListener("keydown", item.handlers.subMenuKeyDown);
+    toggleBtnEl?.removeEventListener("focusout", item.handlers.focusOut);
+}
+
+function handleDocumentEscape(item) {
+    return (e) => {
+        if (e.key !== "Escape") return;
+        // Prevent the sidebar's keydown listener from also firing on this keypress.
+        e.stopImmediatePropagation();
+        closeSubMenu(item);
+        item.toggleBtnEl?.focus();
+    };
+}
+
+function handleOutsideClick(item) {
+    return (e) => {
+        const {toggleBtnEl, subMenuEl} = item;
+        if (toggleBtnEl?.contains(e.target)) return;
+        if (subMenuEl?.contains(e.target)) return;
+        closeSubMenu(item);
+    };
+}
+
+function handleSubMenuKeyDown(item) {
+    return (e) => {
+        if (e.key !== "ArrowDown" && e.key !== "ArrowUp") return;
+        e.preventDefault();
+
+        const focusableItems = Array.from(item.subMenuEl.querySelectorAll(FOCUSABLE_SELECTOR));
+        const currentIndex = focusableItems.indexOf(e.target);
+
+        if (e.key === "ArrowDown") {
+            focusableItems[currentIndex + 1]?.focus();
+        } else {
+            focusableItems[currentIndex - 1]?.focus();
         }
-    }
+    };
+}
+
+function handleFocusOut(item) {
+    return (e) => {
+        // Keep menu open if the window lost focus (e.g. user switched app).
+        if (!document.hasFocus()) return;
+        // Keep menu open if the user is clicking within the submenu — relatedTarget
+        // is null when clicking non-focusable whitespace, so we track mousedown instead.
+        if (item.clickingInsideSubMenu) return;
+
+        const {toggleBtnEl, subMenuEl} = item;
+        const focusMovingTo = e.relatedTarget;
+        if (subMenuEl?.contains(focusMovingTo)) return;
+        if (toggleBtnEl?.contains(focusMovingTo)) return;
+        closeSubMenu(item);
+    };
+}
+
+function isSubMenuOpen(toggleBtnEl) {
+    return toggleBtnEl.getAttribute("aria-expanded") === "true";
+}
+
+function syncNavItemLinkClass(linkEl, isOpen) {
+    linkEl?.classList.toggle("qld__main-nav__item-link--open", isOpen);
+}
 
-    window.addEventListener("DOMContentLoaded", function () {
-        megaMenu.init();
+function closeAllSubMenus(navItems, currentItem) {
+    navItems.forEach((item) => {
+        if (item === currentItem) return;
+        if (!item.toggleBtnEl) return;
+        if (isSubMenuOpen(item.toggleBtnEl)) closeSubMenu(item);
     });
-})();
+}