weg-shared-layout 0.0.41 → 0.0.44

package/dist/collection/components/weg-header/weg-header.js

@@ -5,9 +5,24 @@ import { isAriaCurrentNavHref, isNavLinkActive, resolveAriaCurrentNavKey, } from
 import { LOGO_SRC } from "./logo-data";
 const WEG_HOME = 'https://www.warwickemploymentgroup.com';
 const DEFAULT_ACCOUNT_HOME = 'https://account.warwickemploymentgroup.com';
+/** Stay visible while scrolling down through the first half of the viewport. */
+const HEADER_SCROLL_HIDE_THRESHOLD_VH = 0.5;
+const HEADER_SCROLL_DIRECTION_DELTA = 5;
 const DEFAULT_LOGO_HREF = `${WEG_HOME}/`;
 /** Placeholder href — sign-out is handled via `wegAuthClick`, not navigation. */
 const SIGN_OUT_HREF = '#';
+const MAIN_NAV_LABEL = 'Main navigation';
+const OPEN_MAIN_NAV_LABEL = 'Open main navigation';
+const CLOSE_MAIN_NAV_LABEL = 'Close main navigation';
+const SKIP_TO_CONTENT_LABEL = 'Skip to main content';
+const SKIP_TO_CONTENT_TARGET_ID = 'main-content';
+function focusScrollTarget(element) {
+    if (!element.hasAttribute('tabindex')) {
+        element.setAttribute('tabindex', '-1');
+    }
+    element.focus({ preventScroll: true });
+    element.scrollIntoView();
+}
 function normalizeAccountBase(input) {
     const base = input?.trim() || DEFAULT_ACCOUNT_HOME;
     return base.replace(/\/$/, '');
@@ -139,9 +154,16 @@ export class WegHeader {
     resolved = EMPTY_HEADER;
     menuOpen = false;
     openDropdown = null;
+    headerHidden = false;
     boundHandleDocumentClick = this.handleDocumentClick.bind(this);
     boundHandleViewportChange = this.handleViewportChange.bind(this);
     boundHandleHoverCapabilityChange = this.handleHoverCapabilityChange.bind(this);
+    boundHandleScroll = this.handleScroll.bind(this);
+    headerResizeObserver;
+    lastScrollY = 0;
+    scrollTicking = false;
+    bodyScrollLocked = false;
+    bodyScrollLockY = 0;
     hoverCloseTimer = null;
     hoverOpenEnabled = false;
     desktopMediaQuery;
@@ -162,15 +184,69 @@ export class WegHeader {
         this.updateHoverDropdownEnabled();
         this.handleViewportChange();
     }
+    componentDidLoad() {
+        const header = this.el.shadowRoot?.querySelector('.header');
+        if (!header)
+            return;
+        this.headerResizeObserver = new ResizeObserver(() => this.syncHeaderHeight());
+        this.headerResizeObserver.observe(header);
+        this.syncHeaderHeight();
+        this.lastScrollY = window.scrollY;
+        this.updateHeaderVisibility();
+    }
     connectedCallback() {
         document.addEventListener('click', this.boundHandleDocumentClick);
+        window.addEventListener('scroll', this.boundHandleScroll, { passive: true });
     }
     disconnectedCallback() {
         document.removeEventListener('click', this.boundHandleDocumentClick);
+        window.removeEventListener('scroll', this.boundHandleScroll);
+        this.unlockBodyScroll();
+        this.headerResizeObserver?.disconnect();
         this.desktopMediaQuery?.removeEventListener('change', this.boundHandleViewportChange);
         this.hoverCapableMediaQuery?.removeEventListener('change', this.boundHandleHoverCapabilityChange);
         this.cancelScheduledDropdownClose();
     }
+    syncHeaderHeight() {
+        if (this.isMobileMenuActive())
+            return;
+        const header = this.el.shadowRoot?.querySelector('.header');
+        if (!header)
+            return;
+        this.el.style.setProperty('--weg-header-height', `${header.offsetHeight}px`);
+    }
+    handleScroll() {
+        if (this.scrollTicking)
+            return;
+        this.scrollTicking = true;
+        requestAnimationFrame(() => {
+            this.scrollTicking = false;
+            this.updateHeaderVisibility();
+        });
+    }
+    updateHeaderVisibility() {
+        if (this.isMobileMenuActive()) {
+            if (this.headerHidden)
+                this.headerHidden = false;
+            return;
+        }
+        const scrollY = window.scrollY;
+        const delta = scrollY - this.lastScrollY;
+        const threshold = window.innerHeight * HEADER_SCROLL_HIDE_THRESHOLD_VH;
+        let nextHidden = this.headerHidden;
+        if (scrollY <= threshold) {
+            nextHidden = false;
+        }
+        else if (Math.abs(delta) >= HEADER_SCROLL_DIRECTION_DELTA) {
+            nextHidden = delta > 0;
+        }
+        this.lastScrollY = scrollY;
+        if (nextHidden === this.headerHidden)
+            return;
+        if (nextHidden)
+            this.closeDropdown();
+        this.headerHidden = nextHidden;
+    }
     /**
      * Desktop dropdowns open on hover when viewport is md+ and the device reports hover support.
      * Uses (hover: hover) only — not (pointer: fine), which breaks in DevTools and hybrid devices.
@@ -188,10 +264,74 @@ export class WegHeader {
     }
     handleViewportChange() {
         if (this.desktopMediaQuery?.matches) {
-            this.closeMenu();
+            this.closeMenu({ announce: false, focusToggle: false });
         }
         this.updateHoverDropdownEnabled();
     }
+    announceToScreenReader(message) {
+        const region = this.el.shadowRoot?.querySelector('[data-weg-sr-live]');
+        if (!region)
+            return;
+        region.textContent = '';
+        requestAnimationFrame(() => {
+            region.textContent = message;
+        });
+    }
+    getMenuToggleButton() {
+        return this.el.shadowRoot?.querySelector('.menu-toggle');
+    }
+    getFirstNavFocusable() {
+        const panel = this.el.shadowRoot?.querySelector('#weg-header-main-nav');
+        if (!panel)
+            return null;
+        const focusables = panel.querySelectorAll('a[href], button:not([disabled])');
+        return focusables[0] ?? null;
+    }
+    focusFirstNavItem() {
+        setTimeout(() => {
+            const attemptFocus = (retries = 8) => {
+                const target = this.getFirstNavFocusable();
+                if (target) {
+                    target.focus();
+                    return;
+                }
+                if (retries > 0) {
+                    requestAnimationFrame(() => attemptFocus(retries - 1));
+                }
+            };
+            attemptFocus();
+        }, 0);
+    }
+    focusMenuToggle() {
+        const attemptFocus = (retries = 8) => {
+            const toggle = this.getMenuToggleButton();
+            if (toggle) {
+                toggle.focus();
+                return;
+            }
+            if (retries > 0) {
+                requestAnimationFrame(() => attemptFocus(retries - 1));
+            }
+        };
+        attemptFocus();
+    }
+    getMenuGroupLinkCount(label) {
+        const group = this.getActiveMenu().find((item) => isMenuGroup(item) && item.label === label);
+        return group?.items?.length ?? 0;
+    }
+    formatLinkCount(count) {
+        return count === 1 ? '1 link' : `${count} links`;
+    }
+    formatItemCount(count) {
+        return count === 1 ? '1 item' : `${count} items`;
+    }
+    announceSubmenuExpanded(label) {
+        const linkCount = this.getMenuGroupLinkCount(label);
+        this.announceToScreenReader(`${label} submenu expanded. ${this.formatLinkCount(linkCount)}.`);
+    }
+    announceSubmenuCollapsed(label) {
+        this.announceToScreenReader(`${label} submenu collapsed.`);
+    }
     isMobileMenuActive() {
         return this.menuOpen && !this.desktopMediaQuery?.matches;
     }
@@ -201,8 +341,39 @@ export class WegHeader {
     handleKeyDown(event) {
         if (event.key !== 'Escape')
             return;
-        this.menuOpen = false;
-        this.closeDropdown();
+        if (this.openDropdown) {
+            event.preventDefault();
+            this.closeDropdownAndFocusTrigger(this.openDropdown);
+            return;
+        }
+        if (this.menuOpen) {
+            event.preventDefault();
+            this.closeMenu({ focusToggle: true });
+        }
+    }
+    lockBodyScroll() {
+        if (this.bodyScrollLocked)
+            return;
+        this.bodyScrollLockY = window.scrollY;
+        document.body.style.overflow = 'hidden';
+        document.body.style.position = 'fixed';
+        document.body.style.top = `-${this.bodyScrollLockY}px`;
+        document.body.style.left = '0';
+        document.body.style.right = '0';
+        document.body.style.width = '100%';
+        this.bodyScrollLocked = true;
+    }
+    unlockBodyScroll() {
+        if (!this.bodyScrollLocked)
+            return;
+        document.body.style.overflow = '';
+        document.body.style.position = '';
+        document.body.style.top = '';
+        document.body.style.left = '';
+        document.body.style.right = '';
+        document.body.style.width = '';
+        window.scrollTo(0, this.bodyScrollLockY);
+        this.bodyScrollLocked = false;
     }
     handleDocumentClick(event) {
         const target = event.target;
@@ -233,10 +404,12 @@ export class WegHeader {
     }
     toggleDropdown(label) {
         if (this.openDropdown === label) {
+            this.announceSubmenuCollapsed(label);
             this.closeDropdown();
             return;
         }
         this.openDropdownMenu(label);
+        this.announceSubmenuExpanded(label);
     }
     getDropdownPanelId(label) {
         return `weg-header-dropdown-${label.trim().toLowerCase().replace(/\s+/g, '-')}`;
@@ -289,29 +462,111 @@ export class WegHeader {
         if (event.key !== 'ArrowDown')
             return;
         event.preventDefault();
-        this.openDropdownMenu(label);
+        if (this.openDropdown !== label) {
+            this.openDropdownMenu(label);
+            this.announceSubmenuExpanded(label);
+        }
         this.focusFirstDropdownLink(itemEl);
     }
+    getDropdownLinks(container) {
+        return Array.from(container.querySelectorAll('.nav-dropdown__link'));
+    }
+    focusDropdownLink(container, index) {
+        const attemptFocus = (retries = 8) => {
+            const links = this.getDropdownLinks(container);
+            if (links[index]) {
+                links[index].focus();
+                return;
+            }
+            if (retries > 0) {
+                requestAnimationFrame(() => attemptFocus(retries - 1));
+            }
+        };
+        attemptFocus();
+    }
     focusFirstDropdownLink(itemEl) {
-        setTimeout(() => {
-            const firstLink = itemEl.querySelector('.nav-dropdown__link');
-            firstLink?.focus();
-        }, 0);
+        this.focusDropdownLink(itemEl, 0);
+    }
+    getDropdownContainer(label) {
+        const panelId = this.getDropdownPanelId(label);
+        return this.el.shadowRoot?.querySelector(`#${panelId}-trigger`)?.closest('.nav-dropdown') ?? null;
+    }
+    closeDropdownAndFocusTrigger(labelOrContainer) {
+        const container = typeof labelOrContainer === 'string'
+            ? this.getDropdownContainer(labelOrContainer)
+            : labelOrContainer;
+        const trigger = container?.querySelector('.nav-dropdown__trigger');
+        const label = typeof labelOrContainer === 'string'
+            ? labelOrContainer
+            : (trigger?.querySelector('.nav-dropdown__label')?.textContent?.trim() ?? '');
+        if (label && this.openDropdown === label) {
+            this.announceSubmenuCollapsed(label);
+        }
+        this.closeDropdown();
+        const attemptFocus = (retries = 8) => {
+            if (trigger && this.el.shadowRoot?.contains(trigger)) {
+                trigger.focus();
+                return;
+            }
+            if (retries > 0) {
+                requestAnimationFrame(() => attemptFocus(retries - 1));
+            }
+        };
+        attemptFocus();
+    }
+    handleDropdownLinkKeyDown(event, container) {
+        const links = this.getDropdownLinks(container);
+        const currentIndex = links.indexOf(event.currentTarget);
+        if (currentIndex === -1)
+            return;
+        if (event.key === 'ArrowDown') {
+            event.preventDefault();
+            links[(currentIndex + 1) % links.length]?.focus();
+            return;
+        }
+        if (event.key === 'ArrowUp') {
+            event.preventDefault();
+            links[(currentIndex - 1 + links.length) % links.length]?.focus();
+            return;
+        }
+        if (event.key === 'Escape') {
+            event.preventDefault();
+            event.stopPropagation();
+            this.closeDropdownAndFocusTrigger(container);
+        }
     }
     toggleMenu() {
         if (this.menuOpen) {
-            this.closeMenu();
+            this.closeMenu({ focusToggle: false });
             return;
         }
         this.openMenu();
     }
     openMenu() {
         this.menuOpen = true;
+        this.headerHidden = false;
         this.closeDropdown();
+        if (!this.desktopMediaQuery?.matches) {
+            this.lockBodyScroll();
+            const itemCount = this.getActiveMenu().length;
+            this.announceToScreenReader(`${MAIN_NAV_LABEL} opened. ${this.formatItemCount(itemCount)}.`);
+            this.focusFirstNavItem();
+        }
     }
-    closeMenu() {
+    closeMenu(options = {}) {
+        const { announce = true, focusToggle = false } = options;
+        const wasMobileActive = this.isMobileMenuActive();
         this.menuOpen = false;
         this.closeDropdown();
+        this.unlockBodyScroll();
+        this.syncHeaderHeight();
+        this.updateHeaderVisibility();
+        if (announce && wasMobileActive) {
+            this.announceToScreenReader(`${MAIN_NAV_LABEL} closed.`);
+        }
+        if (focusToggle) {
+            this.focusMenuToggle();
+        }
     }
     getAccountHome() {
         return normalizeAccountBase(this.accountBaseUrl);
@@ -382,13 +637,17 @@ export class WegHeader {
             }, "aria-expanded": isOpen ? 'true' : 'false', "aria-haspopup": "true", "aria-controls": panelId, id: `${panelId}-trigger`, onClick: (event) => this.handleDropdownTriggerClick(event, item.label), onKeyDown: (event) => {
                 const container = event.currentTarget.closest('.nav-dropdown');
                 this.handleDropdownTriggerKeyDown(event, item.label, container);
-            } }, h("span", { class: "nav-dropdown__label" }, item.label), h(ToggleIcon, { expanded: isOpen })), isOpen ? (h("div", { class: "nav-dropdown__panel", id: panelId, role: "region", "aria-labelledby": `${panelId}-trigger`, onMouseEnter: () => this.handleDropdownPanelPointerEnter(item.label), onMouseLeave: (event) => this.handleDropdownPanelPointerLeave(event) }, h("div", { class: "nav-dropdown__accent" }, h("div", { class: "nav-dropdown__links" }, items.map((child) => {
+            } }, h("span", { class: "nav-dropdown__label" }, item.label), h(ToggleIcon, { expanded: isOpen })), isOpen ? (h("div", { class: "nav-dropdown__panel", id: panelId, role: "region", "aria-labelledby": `${panelId}-trigger`, onMouseEnter: () => this.handleDropdownPanelPointerEnter(item.label), onMouseLeave: (event) => this.handleDropdownPanelPointerLeave(event) }, h("div", { class: "nav-dropdown__accent" }, h("ul", { class: "nav-dropdown__links" }, items.map((child, index) => {
             const childActive = this.isNavItemActive(child.href, 'exact');
             const ariaCurrent = this.isAriaCurrentHref(child.href, ariaCurrentHref);
-            return (h("a", { class: {
+            const positionLabel = `${child.label}, link ${index + 1} of ${items.length}`;
+            return (h("li", { key: `${item.label}:${child.label}` }, h("a", { class: {
                     'nav-dropdown__link': true,
                     'nav-dropdown__link--active': childActive,
-                }, href: child.href, key: `${item.label}:${child.label}`, "aria-current": ariaCurrent ? 'page' : undefined, onClick: () => onNavigate?.() }, child.label));
+                }, href: child.href, "aria-label": positionLabel, "aria-current": ariaCurrent ? 'page' : undefined, onClick: () => onNavigate?.(), onKeyDown: (event) => {
+                    const dropdownContainer = event.currentTarget.closest('.nav-dropdown');
+                    this.handleDropdownLinkKeyDown(event, dropdownContainer);
+                } }, child.label)));
         }))))) : null)));
     }
     handleAuthClick(event, action, _href, onNavigate) {
@@ -451,7 +710,7 @@ export class WegHeader {
     }
     renderNav(onNavigate) {
         const ariaCurrentHref = this.resolveAriaCurrentHref();
-        return (h("nav", { class: "main-nav", "aria-label": "Main" }, h("ul", { class: "main-nav__list" }, this.getActiveMenu().map((item) => this.renderNavItem(item, onNavigate, ariaCurrentHref)))));
+        return (h("nav", { class: "main-nav", "aria-label": MAIN_NAV_LABEL }, h("ul", { class: "main-nav__list" }, this.getActiveMenu().map((item) => this.renderNavItem(item, onNavigate, ariaCurrentHref)))));
     }
     renderCompactAuth(onNavigate) {
         if (this.signedIn) {
@@ -467,15 +726,28 @@ export class WegHeader {
             onNavigate,
         });
     }
+    handleSkipToContent(event) {
+        event.preventDefault();
+        const mainContent = document.querySelector('main') ?? document.getElementById(SKIP_TO_CONTENT_TARGET_ID);
+        if (mainContent instanceof HTMLElement) {
+            focusScrollTarget(mainContent);
+        }
+        const headings = document.querySelectorAll('h1');
+        if (headings.length > 0 && headings[0] instanceof HTMLElement) {
+            focusScrollTarget(headings[0]);
+        }
+    }
     render() {
         const logoHref = this.getLogoHref();
         const logoSrc = this.getLogoSrc();
         const closeMenu = () => this.closeMenu();
         const mobileMenuActive = this.isMobileMenuActive();
-        return (h("header", { key: '6b932d0c3dc20b53292b61fa3403e26e35182d05', class: {
+        return (h("div", { key: 'a769ab7a466cd90019570b8c3cf8e669b3df62c6', class: "weg-header-shell" }, h("a", { key: '43b11ec58387350df5ccf53c5a97cb94296357e5', class: "skip-to-content", href: `#${SKIP_TO_CONTENT_TARGET_ID}`, title: SKIP_TO_CONTENT_LABEL, onClick: (event) => this.handleSkipToContent(event) }, SKIP_TO_CONTENT_LABEL), h("header", { key: '84d893626e535525b235adc5997bac474d785732', class: {
                 header: true,
+                'header--fixed': !mobileMenuActive,
+                'header--hidden': this.headerHidden && !mobileMenuActive,
                 'header--menu-open': mobileMenuActive,
-            } }, h("div", { key: '426395d6e1245188bc103c8a2f72ccfc3819ba7d', class: "header-inner" }, h("button", { key: 'fe6128407500f5b1a1899aa9e7fdd00222f177b3', type: "button", class: "menu-toggle icon-button", "aria-label": mobileMenuActive ? 'Close menu' : 'Open menu', "aria-expanded": mobileMenuActive ? 'true' : 'false', "aria-controls": "weg-header-main-nav", onClick: () => this.toggleMenu() }, mobileMenuActive ? h(CloseIcon, null) : h(HamburgerIcon, null)), h(Logo, { key: 'bb19f9430217686834c4aec615bd7306d276a969', href: logoHref, src: logoSrc }), h("div", { key: 'cebab248840b8412479a90a83c5fc3d0a601476b', class: "header-actions" }, this.renderCompactAuth(mobileMenuActive ? closeMenu : undefined)), h("div", { key: 'c029db0bcd71a9940d93bef5b32e59625f94b76c', class: "main-nav-panel", id: "weg-header-main-nav", role: mobileMenuActive ? 'dialog' : undefined, "aria-modal": mobileMenuActive ? 'true' : undefined, "aria-label": mobileMenuActive ? 'Menu' : undefined }, this.renderNav(mobileMenuActive ? closeMenu : undefined)))));
+            } }, h("div", { key: '4cfaaf18575bf56d9c09ab6fe0db4383cc9cee94', class: "header-inner" }, h("div", { key: 'b9e2d18284db956c944a4e0669a6927586b6ee32', class: "sr-only", "aria-live": "polite", "aria-atomic": "true", "data-weg-sr-live": true }), h("button", { key: 'f019b74b76c22311c97ee3fc539f396e24ec98fd', type: "button", class: "menu-toggle icon-button", "aria-label": mobileMenuActive ? CLOSE_MAIN_NAV_LABEL : OPEN_MAIN_NAV_LABEL, "aria-expanded": mobileMenuActive ? 'true' : 'false', "aria-controls": "weg-header-main-nav", onClick: () => this.toggleMenu() }, mobileMenuActive ? h(CloseIcon, null) : h(HamburgerIcon, null)), h(Logo, { key: 'fe6d460021d059287b487fafb96be2a79a3253c8', href: logoHref, src: logoSrc }), h("div", { key: '2e59fe4e86e183aa7ad41402baba2ff6467967c1', class: "header-actions" }, this.renderCompactAuth(mobileMenuActive ? closeMenu : undefined)), h("div", { key: '90c8861c45b344862c03a3e2d5c2b6b6f37a6174', class: "main-nav-panel", id: "weg-header-main-nav", role: mobileMenuActive ? 'dialog' : undefined, "aria-modal": mobileMenuActive ? 'true' : undefined, "aria-label": mobileMenuActive ? MAIN_NAV_LABEL : undefined }, this.renderNav(mobileMenuActive ? closeMenu : undefined))))));
     }
     static get is() { return "weg-header"; }
     static get encapsulation() { return "shadow"; }
@@ -600,7 +872,8 @@ export class WegHeader {
         return {
             "resolved": {},
             "menuOpen": {},
-            "openDropdown": {}
+            "openDropdown": {},
+            "headerHidden": {}
         };
     }
     static get events() {