Add a mega menu with per-item featured content to the primary navigation

.gitignore

@@ -418,3 +418,6 @@ $RECYCLE.BIN/
 # .pnp.*
 
 # End of https://www.toptal.com/developers/gitignore/api/macos,linux,windows,node,yarn,composer,phpstorm+all,visualstudiocode,sublimetext
+
+# local browser-test artifacts
+.playwright-mcp/

themes/osi/assets/js/build/theme.asset.php

@@ -1 +1 @@
-<?php return array('dependencies' => array(), 'version' => '48775f60a0024fbe4d0a');
+<?php return array('dependencies' => array(), 'version' => 'f179507f6e77a9763a06');

themes/osi/assets/js/src/theme/mega-menu.js

@@ -0,0 +1,152 @@
+/*
+Name: Mega Menu
+Author: Team 51
+Version: 0.1
+License: GPLv2
+
+ Desktop behavior for .menu-item.megamenu items: keeps aria-expanded in sync,
+ enforces one open panel at a time, closes on Escape or press outside, and
+ mirrors the open state onto the header (`is-nav-open`) as the no-:has()
+ fallback for the CSS opaque-header rule, with a close-delay grace period.
+ Placeholder (href="#") triggers also toggle on click because taps don't
+ reliably fire mouseenter/focusin at desktop widths (iPadOS).
+*/
+
+// keep in sync with $break-nav (assets/scss/_1_settings.breakpoints.scss)
+const desktopNav = window.matchMedia( '(min-width: 1200px)' );
+const CLOSE_DELAY = 120;
+
+const header = document.querySelector( '.header-main' );
+const megaItems = document.querySelectorAll( '.nav-main--menu > .menu-item.megamenu' );
+
+if ( header && megaItems.length ) {
+	const triggerOf = ( item ) => item.querySelector( ':scope > a' );
+
+	const syncHeader = () => {
+		header.classList.toggle(
+			'is-nav-open',
+			Boolean( document.querySelector( '.nav-main--menu > .menu-item.megamenu.is-open' ) )
+		);
+	};
+
+	const dismiss = ( item ) => {
+		closeItem( item );
+		item.classList.add( 'is-dismissed' );
+		syncHeader();
+	};
+
+	const closeItem = ( item ) => {
+		item.classList.remove( 'is-open' );
+		const trigger = triggerOf( item );
+		if ( trigger ) {
+			trigger.setAttribute( 'aria-expanded', 'false' );
+		}
+	};
+
+	const closeAll = () => {
+		megaItems.forEach( closeItem );
+		syncHeader();
+	};
+
+	megaItems.forEach( ( item ) => {
+		const trigger = triggerOf( item );
+		let closeTimer = null;
+		let suppressOpen = false;
+
+		if ( trigger ) {
+			trigger.setAttribute( 'aria-expanded', 'false' );
+		}
+
+		const open = () => {
+			if ( suppressOpen || ! desktopNav.matches ) {
+				return;
+			}
+			window.clearTimeout( closeTimer );
+			megaItems.forEach( ( other ) => {
+				if ( other !== item ) {
+					closeItem( other );
+				}
+			} );
+			item.classList.add( 'is-open' );
+			if ( trigger ) {
+				trigger.setAttribute( 'aria-expanded', 'true' );
+			}
+			syncHeader();
+		};
+
+		const close = ( immediately ) => {
+			window.clearTimeout( closeTimer );
+			const doClose = () => {
+				closeItem( item );
+				syncHeader();
+			};
+			if ( immediately ) {
+				doClose();
+			} else {
+				closeTimer = window.setTimeout( doClose, CLOSE_DELAY );
+			}
+		};
+
+		if ( trigger && '#' === trigger.getAttribute( 'href' ) ) {
+			trigger.addEventListener( 'click', ( event ) => {
+				if ( ! desktopNav.matches ) {
+					return;
+				}
+				event.preventDefault();
+				if ( item.classList.contains( 'is-open' ) ) {
+					close( true );
+				} else {
+					open();
+				}
+			} );
+		}
+
+		item.addEventListener( 'mouseenter', open );
+		item.addEventListener( 'mouseleave', () => {
+			item.classList.remove( 'is-dismissed' );
+			close( false );
+		} );
+		item.addEventListener( 'focusin', open );
+		item.addEventListener( 'focusout', ( event ) => {
+			if ( ! item.contains( event.relatedTarget ) ) {
+				close( false );
+			}
+		} );
+		// returning focus to the trigger fires focusin, which would reopen the panel
+		item.addEventListener( 'keydown', ( event ) => {
+			if ( 'Escape' === event.key && item.classList.contains( 'is-open' ) ) {
+				suppressOpen = true;
+				dismiss( item );
+				if ( trigger ) {
+					trigger.focus();
+				}
+				suppressOpen = false;
+			}
+		} );
+	} );
+
+	document.addEventListener( 'pointerdown', ( event ) => {
+		if (
+			! event.target.closest( '.nav-main--menu > .menu-item.megamenu' ) &&
+			document.querySelector( '.nav-main--menu > .menu-item.megamenu.is-open' )
+		) {
+			closeAll();
+		}
+	} );
+
+	// a panel opened by hover holds focus nowhere, so Escape has to be caught globally
+	document.addEventListener( 'keydown', ( event ) => {
+		if (
+			'Escape' === event.key &&
+			document.querySelector( '.nav-main--menu > .menu-item.megamenu.is-open' )
+		) {
+			megaItems.forEach( dismiss );
+		}
+	} );
+
+	desktopNav.addEventListener( 'change', ( event ) => {
+		if ( ! event.matches ) {
+			closeAll();
+		}
+	} );
+}

themes/osi/assets/js/src/theme/mobile-menu-toggle.js

@@ -17,29 +17,69 @@ License: GPLv2
  http://www.gnu.org/licenses/gpl-2.0.html
 */
 
+// toggle buttons are inserted as siblings of the links: a <button> inside an <a> is invalid markup
 (function($) {
 
+	function toggleSubmenu($button) {
+		var $item    = $button.closest('.menu-item-has-children');
+		var $submenu = $button.siblings('.sub-menu').first();
+		var opening  = $submenu.hasClass('menu-collapse');
+
+		// accordion: opening an item closes its open siblings at the same level
+		if (opening) {
+			$item.siblings('.tab-active').each(function() {
+				toggleSubmenu($(this).children('.menu-toggle').first());
+			});
+		}
+
+		$submenu.toggleClass('menu-collapse', !opening);
+		$item.toggleClass('tab-active', opening);
+		$item.parent().closest('.sub-menu').toggleClass('can-overflow', opening);
+		if (!opening) {
+			$item.find('.sub-menu').addClass('menu-collapse').removeClass('can-overflow');
+			$item.find('.tab-active').removeClass('tab-active');
+			$item.find('.menu-toggle').removeClass('menu-toggle-active').attr('aria-expanded', 'false');
+			$item.find('a[aria-expanded]').attr('aria-expanded', 'false');
+		}
+		$button.toggleClass('menu-toggle-active', opening).attr('aria-expanded', String(opening));
+		$button.siblings('a[aria-expanded]').first().attr('aria-expanded', String(opening));
+	}
+
 	$('.sub-menu').addClass('menu-collapse');
-	$('.menu-item-has-children > a').append('<button aria-label="Toggle Submenu" class="menu-toggle"></button>');
+	$('.menu-item-has-children > a').each(function( index ) {
+		var $link    = $(this);
+		var $submenu = $link.siblings('.sub-menu').first();
 
-	$('.menu-toggle').on('click', function(e) {
+		if (!$submenu.length) {
+			return;
+		}
 
-		e.preventDefault();
+		var id = $submenu.attr('id') || 'osi-submenu-' + index;
+		$submenu.attr('id', id);
+		var $button = $('<button class="menu-toggle"></button>')
+			.attr({
+				'aria-label': 'Toggle submenu for ' + $link.text().trim(),
+				'aria-expanded': 'false',
+				'aria-controls': id
+			})
+			.insertAfter($link);
 
-	    if ($(this).parent().next('.sub-menu').hasClass('menu-collapse')) {
-	        $(this).parent().next('.sub-menu').removeClass('menu-collapse');
-					$(this).parent().parent('.menu-item-has-children').addClass('tab-active');
-					$(this).parent().parent().parent('.sub-menu').addClass('can-overflow');
-	        $(this).addClass('menu-toggle-active');
-	        e.stopPropagation();
-	    } else {
-	        $(this).parent().next('.sub-menu').addClass('menu-collapse');
-					$(this).parent().parent('.menu-item-has-children').removeClass('tab-active');
-					$(this).parent().parent().parent('.sub-menu').removeClass('can-overflow');
-					$(this).parent().parent().find('.sub-menu').removeClass('can-overflow');
-					$(this).removeClass('menu-toggle-active');
-	        e.stopPropagation();
-	    }
+		// the mobile menu's whole row is the disclosure: the link toggles instead of
+		// navigating, and the caret stays a visual/tap affordance outside the tab order
+		if ($link.closest('.nav-mobile--menu').length) {
+			$link.attr('aria-expanded', 'false');
+			$button.attr({ 'aria-hidden': 'true', tabindex: '-1' });
+			$link.on('click', function(e) {
+				e.preventDefault();
+				toggleSubmenu($button);
+			});
+		}
+	});
+
+	$('.menu-toggle').on('click', function(e) {
+		e.preventDefault();
+		e.stopPropagation();
+		toggleSubmenu($(this));
 	});
 
 })( jQuery );