Seedlet: fix keyboard navigation (#2305)

* Scope focus styles to the site.

* Implement keyboard navigation trapping in menu modal.

* Change taborder of menu buttons.

* Cleanup focus selector.

* Fix keyboard nav within modal.

* Refactor primary menu logic to enable correct tab order.

* Refactor to work with multiple navs.

* Fix empty cart bug.

seedlet/assets/css/ie.css

@@ -1545,7 +1545,7 @@ a:active {
 	color: #000000;
 }
 
-*:focus {
+.site *:focus {
 	outline-width: 1px;
 	outline-style: dotted;
 	outline-color: #3C8067;
@@ -4156,6 +4156,152 @@ nav a {
 	}
 }
 
+.menu-button-container {
+	display: none;
+	justify-content: space-between;
+	left: 0;
+	position: absolute;
+	top: 0;
+	width: 100%;
+}
+
+.menu-button-container #primary-open-menu {
+	margin-left: auto;
+}
+
+@media only screen and (max-width: 481px) {
+	.menu-button-container {
+		display: flex;
+	}
+}
+
+.admin-bar:not(.primary-navigation-open) .menu-button-container {
+	top: 46px;
+}
+
+.menu-button-container .button {
+	background-color: transparent;
+	color: #000000;
+	z-index: 500;
+}
+
+.primary-navigation .button {
+	background-color: transparent;
+	color: #000000;
+	z-index: 500;
+}
+
+.woo-navigation .button {
+	background-color: transparent;
+	color: #000000;
+	z-index: 500;
+}
+
+.menu-button-container .button.open,
+.primary-navigation .button.open,
+.woo-navigation .button.open {
+	display: flex;
+	z-index: 499;
+}
+
+.menu-button-container .button.close,
+.primary-navigation .button.close,
+.woo-navigation .button.close {
+	display: none;
+}
+
+.menu-button-container .button:hover {
+	color: #3C8067;
+}
+
+.primary-navigation .button:hover {
+	color: #3C8067;
+}
+
+.woo-navigation .button:hover {
+	color: #3C8067;
+}
+
+.menu-button-container .button#woo-open-menu .svg-icon {
+	margin-left: 0;
+	margin-right: 5px;
+	vertical-align: middle;
+}
+
+.primary-navigation .button#woo-open-menu .svg-icon {
+	margin-left: 0;
+	margin-right: 5px;
+	vertical-align: middle;
+}
+
+.woo-navigation .button#woo-open-menu .svg-icon {
+	margin-left: 0;
+	margin-right: 5px;
+	vertical-align: middle;
+}
+
+.menu-button-container .button .dropdown-icon,
+.primary-navigation .button .dropdown-icon,
+.woo-navigation .button .dropdown-icon {
+	display: flex;
+	align-items: center;
+}
+
+.menu-button-container .button .dropdown-icon .svg-icon {
+	margin-left: 5px;
+}
+
+.primary-navigation .button .dropdown-icon .svg-icon {
+	margin-left: 5px;
+}
+
+.woo-navigation .button .dropdown-icon .svg-icon {
+	margin-left: 5px;
+}
+
+.menu-button-container .button .dropdown-icon.open .svg-icon,
+.primary-navigation .button .dropdown-icon.open .svg-icon,
+.woo-navigation .button .dropdown-icon.open .svg-icon {
+	position: relative;
+	top: -1px;
+}
+
+.menu-button-container .button .hide-visually,
+.primary-navigation .button .hide-visually,
+.woo-navigation .button .hide-visually {
+	position: absolute !important;
+	clip: rect(1px, 1px, 1px, 1px);
+	padding: 0 !important;
+	border: 0 !important;
+	height: 1px !important;
+	width: 1px !important;
+	overflow: hidden;
+}
+
+.primary-navigation-open .menu-button-container #primary-open-menu, .primary-navigation-open
+.primary-navigation #primary-open-menu, .primary-navigation-open
+.woo-navigation #primary-open-menu {
+	display: none;
+}
+
+.primary-navigation-open .menu-button-container #primary-close-menu, .primary-navigation-open
+.primary-navigation #primary-close-menu, .primary-navigation-open
+.woo-navigation #primary-close-menu {
+	display: flex;
+}
+
+.woo-navigation-open .menu-button-container #woo-open-menu, .woo-navigation-open
+.primary-navigation #woo-open-menu, .woo-navigation-open
+.woo-navigation #woo-open-menu {
+	display: none;
+}
+
+.woo-navigation-open .menu-button-container #woo-close-menu, .woo-navigation-open
+.primary-navigation #woo-close-menu, .woo-navigation-open
+.woo-navigation #woo-close-menu {
+	display: flex;
+}
+
 .primary-navigation {
 	position: absolute;
 	top: 0;
@@ -4222,34 +4368,6 @@ nav a {
 	}
 }
 
-.primary-navigation > .button {
-	position: absolute;
-	display: inline-block;
-	margin: 0;
-	right: 0;
-	top: 0;
-	background-color: transparent;
-	color: #000000;
-}
-
-.woo-navigation > .button {
-	position: absolute;
-	display: inline-block;
-	margin: 0;
-	right: 0;
-	top: 0;
-	background-color: transparent;
-	color: #000000;
-}
-
-.primary-navigation > .button:hover {
-	color: #3C8067;
-}
-
-.woo-navigation > .button:hover {
-	color: #3C8067;
-}
-
 .primary-navigation-open .primary-navigation > .primary-menu-container, .primary-navigation-open
 .woo-navigation > .primary-menu-container {
 	visibility: visible;
@@ -4257,46 +4375,6 @@ nav a {
 	transform: translateY(0);
 }
 
-.primary-navigation-open .primary-navigation > #toggle-menu, .primary-navigation-open
-.woo-navigation > #toggle-menu {
-	z-index: 500;
-}
-
-.primary-navigation-open .primary-navigation > #toggle-menu .open, .primary-navigation-open
-.woo-navigation > #toggle-menu .open {
-	display: none;
-}
-
-.primary-navigation-open .primary-navigation > #toggle-menu .close, .primary-navigation-open
-.woo-navigation > #toggle-menu .close {
-	display: flex;
-}
-
-.primary-navigation .dropdown-icon,
-.woo-navigation .dropdown-icon {
-	display: flex;
-	align-items: center;
-}
-
-.primary-navigation .dropdown-icon .svg-icon {
-	margin-left: 5px;
-}
-
-.woo-navigation .dropdown-icon .svg-icon {
-	margin-left: 5px;
-}
-
-.primary-navigation .dropdown-icon.open .svg-icon,
-.woo-navigation .dropdown-icon.open .svg-icon {
-	position: relative;
-	top: -1px;
-}
-
-.primary-navigation .dropdown-icon.close,
-.woo-navigation .dropdown-icon.close {
-	display: none;
-}
-
 .lock-scrolling .primary-navigation > .button, .lock-scrolling
 .woo-navigation > .button {
 	position: fixed;

seedlet/assets/css/style-woocommerce-rtl.css

@@ -686,43 +686,28 @@ body[class*="woocommerce"] #page .wc-block-grid__product-add-to-cart .added_to_c
 	text-decoration: none;
 }
 
-body[class*="woocommerce"] #page .woo-navigation > #toggle-cart {
-	right: 0;
-	top: 0;
-	left: auto;
-}
-
-body[class*="woocommerce"] #page .woo-navigation > #toggle-cart .open .svg-icon {
-	margin-right: 0;
-	margin-left: calc(0.25 * var(--global--spacing-unit));
-	vertical-align: middle;
-}
-
-body[class*="woocommerce"].wc-navigation-open #page .woo-navigation > .woocommerce-menu-container {
+body[class*="woocommerce"].woo-navigation-open #page .woo-navigation > .woocommerce-menu-container {
 	visibility: visible;
 	opacity: 1;
 	transform: translateY(0);
 }
 
-body[class*="woocommerce"].wc-navigation-open #page .woo-navigation #toggle-cart {
+body[class*="woocommerce"].woo-navigation-open #page .woo-navigation #woo-open-menu {
 	right: auto;
 	left: 0;
 	z-index: 500;
 }
 
-body[class*="woocommerce"].wc-navigation-open #page .woo-navigation #toggle-cart .open {
+body[class*="woocommerce"].woo-navigation-open #page .woo-navigation #woo-open-menu .open {
 	display: none;
 }
 
-body[class*="woocommerce"].wc-navigation-open #page .woo-navigation #toggle-cart .close {
+body[class*="woocommerce"].woo-navigation-open #page .woo-navigation #woo-open-menu .close {
 	display: flex;
 	align-items: center;
 }
 
 @media only screen and (max-width: 481px) {
-	body[class*="woocommerce"].admin-bar.lock-scrolling #page .woo-navigation #toggle-cart {
-		top: 46px;
-	}
 	body[class*="woocommerce"] #page .woo-navigation .woocommerce-menu-container {
 		background-color: var(--wc--mini-cart--color-background);
 		color: var(--wc--mini-cart--color-text);

seedlet/assets/css/style-woocommerce.css

@@ -686,43 +686,28 @@ body[class*="woocommerce"] #page .wc-block-grid__product-add-to-cart .added_to_c
 	text-decoration: none;
 }
 
-body[class*="woocommerce"] #page .woo-navigation > #toggle-cart {
-	left: 0;
-	top: 0;
-	right: auto;
-}
-
-body[class*="woocommerce"] #page .woo-navigation > #toggle-cart .open .svg-icon {
-	margin-left: 0;
-	margin-right: calc(0.25 * var(--global--spacing-unit));
-	vertical-align: middle;
-}
-
-body[class*="woocommerce"].wc-navigation-open #page .woo-navigation > .woocommerce-menu-container {
+body[class*="woocommerce"].woo-navigation-open #page .woo-navigation > .woocommerce-menu-container {
 	visibility: visible;
 	opacity: 1;
 	transform: translateY(0);
 }
 
-body[class*="woocommerce"].wc-navigation-open #page .woo-navigation #toggle-cart {
+body[class*="woocommerce"].woo-navigation-open #page .woo-navigation #woo-open-menu {
 	left: auto;
 	right: 0;
 	z-index: 500;
 }
 
-body[class*="woocommerce"].wc-navigation-open #page .woo-navigation #toggle-cart .open {
+body[class*="woocommerce"].woo-navigation-open #page .woo-navigation #woo-open-menu .open {
 	display: none;
 }
 
-body[class*="woocommerce"].wc-navigation-open #page .woo-navigation #toggle-cart .close {
+body[class*="woocommerce"].woo-navigation-open #page .woo-navigation #woo-open-menu .close {
 	display: flex;
 	align-items: center;
 }
 
 @media only screen and (max-width: 481px) {
-	body[class*="woocommerce"].admin-bar.lock-scrolling #page .woo-navigation #toggle-cart {
-		top: 46px;
-	}
 	body[class*="woocommerce"] #page .woo-navigation .woocommerce-menu-container {
 		background-color: var(--wc--mini-cart--color-background);
 		color: var(--wc--mini-cart--color-text);

seedlet/assets/js/primary-navigation.js

@@ -3,34 +3,77 @@
  *
  * Required to open and close the mobile navigation.
  */
-
 ( function() {
+
 	/**
 	 * Menu Toggle Behaviors
 	 *
 	 * @param {Element} element
 	 */
-	function menuToggleUI( toggleButtonID, navOpenClass = 'primary-navigation-open' ) {
-
-		var wrapper         = document.body;
-		var toggleButton    = document.getElementById( toggleButtonID );
-		var lockScrollClass = 'lock-scrolling';
-		var navOpenClass;
-
-		// Toggle click if it exists
-		toggleButton ?
-		toggleButton.onclick = function() {
-			wrapper.classList.toggle(navOpenClass);
-			wrapper.classList.toggle(lockScrollClass);
-		} : null;
+	var navMenu = function ( id ){
+		var wrapper         = document.body; // this is the element to which a CSS class is added when a mobile nav menu is open
+		var openButton    	= document.getElementById( `${ id }-open-menu` );
+		var closeButton    	= document.getElementById( `${ id }-close-menu` );
+
+		openButton.onclick = function() {
+			wrapper.classList.add( `${ id }-navigation-open` );
+			wrapper.classList.add( 'lock-scrolling' );
+			closeButton.focus();
+		}
+
+		closeButton.onclick = function() {
+			wrapper.classList.remove( `${ id }-navigation-open` );
+			wrapper.classList.remove( 'lock-scrolling' );
+			openButton.focus();
+		}
+
+		/**
+		 * Trap keyboard navigation in the menu modal.
+		 * Adapted from TwentyTwenty
+		 */
+
+		document.addEventListener( 'keydown', function( event ) {
+			if ( ! wrapper.classList.contains( `${ id }-navigation-open` ) ){
+				return;
+			} 
+			var modal, elements, selectors, lastEl, firstEl, activeEl, tabKey, shiftKey, escKey;
+
+			modal = document.querySelector( `.${ id }-navigation` );
+			selectors = 'input, a, button';
+			elements = modal.querySelectorAll( selectors );
+			elements = Array.prototype.slice.call( elements );
+			tabKey = event.keyCode === 9;
+			shiftKey = event.shiftKey;
+			escKey = event.keyCode === 27;
+			activeEl = document.activeElement;
+			lastEl = elements[ elements.length - 1 ];
+			firstEl = elements[0];
+
+			if ( escKey ) {
+				event.preventDefault();
+				wrapper.classList.remove( `${ id }-navigation-open`, 'lock-scrolling' );
+				openButton.focus();
+			}
+
+			if ( ! shiftKey && tabKey && lastEl === activeEl ) {
+				event.preventDefault();
+				firstEl.focus();
+			}
+
+			if ( shiftKey && tabKey && firstEl === activeEl ) {
+				event.preventDefault();
+				lastEl.focus();
+			}
+
+			// If there are no elements in the menu, don't move the focus
+			if ( tabKey && firstEl === lastEl ) {
+				event.preventDefault();
+			}
+		});
 	}
 
-	/**
-	 * Run our menuToggleUI function on load
-	 */
 	window.addEventListener( 'load', function() {
-		menuToggleUI( 'toggle-menu', 'primary-navigation-open' );
-		menuToggleUI( 'toggle-cart', 'wc-navigation-open' );
+		new navMenu( 'primary' );
+		new navMenu( 'woo' );
 	});
-
 } )();

seedlet/assets/sass/base/_reset.scss

@@ -110,7 +110,7 @@ a {
 }
 
 // Focus styles
-*:focus {
+.site *:focus {
 	outline-width: 1px;
 	outline-style: dotted;
 	outline-color: var(--global--color-secondary);

seedlet/assets/sass/components/header/_primary-navigation.scss

@@ -1,8 +1,100 @@
 // Navigation
 
+// Mobile menu toggles
+.menu-button-container {
+	display: none;
+	justify-content: space-between;
+	left: 0;
+	position: absolute;
+	top: 0;
+	width: 100%;
+	#primary-open-menu {
+		margin-left: auto;
+	}
+
+	@include media(mobile-only){
+		display: flex;
+	}
+
+	.admin-bar:not(.primary-navigation-open) & {
+		top: 46px;
+	}
+}
+
+.menu-button-container,
 .primary-navigation,
-.woo-navigation { 
+.woo-navigation {
+	.button {
+		background-color: transparent;
+		color: var(--primary-nav--color-link);
+		z-index: 500;
+		&.open {
+			display: flex;
+			z-index: 499;
+		}
+		&.close {
+			display: none;
+		}
+
+		&:hover {
+			color: var(--primary-nav--color-link-hover);
+		}
+
+		&#woo-open-menu {
+			.svg-icon {
+				margin-left: 0;
+				margin-right: calc(0.25 * var(--global--spacing-unit));
+				vertical-align: middle;
+			}
+		}
+
+		.dropdown-icon {
+			display: flex;
+			align-items: center;
+
+			.svg-icon {
+				margin-left: calc(0.25 * var(--global--spacing-unit));
+			}
+
+
+			// Menu icon is off-center vertically to prevent blurry pixels.
+			&.open .svg-icon {
+				position: relative;
+				top: -1px;
+			}
+		}
+
+		.hide-visually {
+			position: absolute !important;
+			clip: rect(1px, 1px, 1px, 1px);
+			padding:0 !important;
+			border:0 !important;
+			height: 1px !important;
+			width: 1px !important;
+			overflow: hidden;
+		}
+	}
+
+	.primary-navigation-open & {
+		#primary-open-menu {
+			display: none;
+		}
+		#primary-close-menu {
+			display: flex;
+		}
+	}
+	.woo-navigation-open & {
+		#woo-open-menu {
+			display: none;
+		}
+		#woo-close-menu {
+			display: flex;
+		}
+	}
+}
 
+.primary-navigation,
+.woo-navigation { 
 	position: absolute;
  	top: 0;
  	right: 0;
@@ -36,20 +128,6 @@
 		}
 	}
 
-	// Mobile menu toggles
-	> .button {
-		position: absolute;
-		display: inline-block;
-		margin: 0;
-		right: 0;
-		top: 0;
-		background-color: transparent;
-		color: var(--primary-nav--color-link);
-
-		&:hover {
-			color: var(--primary-nav--color-link-hover);
-		}
-	}
 
 	// Mobile menu open
 	.primary-navigation-open & {
@@ -60,37 +138,6 @@
 			transform: translateY(0);
 		}
 
-		> #toggle-menu {
-
-			z-index: 500;
-
-			.open {
-				display: none;
-			}
-
-			.close {
-				display: flex;
-			}
-		}
-	}
-
-	.dropdown-icon {
-		display: flex;
-		align-items: center;
-
-		.svg-icon {
-			margin-left: calc(0.25 * var(--global--spacing-unit));
-		}
-
-		// Menu icon is off-center vertically to prevent blurry pixels.
-		&.open .svg-icon {
-			position: relative;
-			top: -1px;
-		}
-
-		&.close {
-			display: none;
-		}
 	}
 
 	// Adjust button postion when scrolling is locked

seedlet/assets/sass/vendors/woocommerce/components/_mini-cart.scss

@@ -10,22 +10,8 @@ body[class*="woocommerce"] #page { // adding #page here to override default wc s
 	}
 
 	.woo-navigation {
-
-		// Mobile menu toggle
-		> #toggle-cart {
-			left: 0;
-			top: 0;
-			right: auto;
-
-			.open .svg-icon {
-				margin-left: 0;
-				margin-right: calc(0.25 * var(--global--spacing-unit));
-				vertical-align: middle;
-			}
-		}
-
 		// Mobile menu open
-		@at-root body[class*="woocommerce"].wc-navigation-open #page .woo-navigation {
+		@at-root body[class*="woocommerce"].woo-navigation-open #page .woo-navigation {
 
 			> .woocommerce-menu-container {
 				visibility: visible;
@@ -33,7 +19,7 @@ body[class*="woocommerce"] #page { // adding #page here to override default wc s
 				transform: translateY(0);
 			}
 
-			#toggle-cart {
+			#woo-open-menu {
 
 				left: auto;
 				right: 0;
@@ -52,11 +38,6 @@ body[class*="woocommerce"] #page { // adding #page here to override default wc s
 
 		@include media(mobile-only) {
 
-			// Adjust position when logged-in
-			@at-root body[class*="woocommerce"].admin-bar.lock-scrolling #page .woo-navigation #toggle-cart {
-				top: 46px;
-			}
-
 			.woocommerce-menu-container {
 
 				background-color: var(--wc--mini-cart--color-background);

seedlet/header.php

@@ -21,18 +21,29 @@
 <body <?php body_class(); ?>>
 <?php wp_body_open(); ?>
 <div id="page" class="site">
-	<a class="skip-link screen-reader-text" href="#content"><?php _e( 'Skip to content', 'seedlet' ); ?></a>
+	<a class="skip-link screen-reader-text" href="#content" tabindex="1"><?php _e( 'Skip to content', 'seedlet' ); ?></a>
 
 		<header id="masthead" class="site-header default-max-width">
-
+			<div class="menu-button-container">
+				<?php if ( class_exists( 'WooCommerce' ) ) : ?>
+					<button id="woo-open-menu" class="button open">
+						<span class="dropdown-icon open"><?php echo seedlet_get_icon_svg( 'shopping_cart' ); ?> <?php _e( 'Cart', 'seedlet' ); ?></span>
+						<span class="hide-visually expanded-text"><?php esc_html__( 'expanded', 'seedlet' ) ?></span>
+					</button>
+				<?php endif; ?>
+				<?php if ( has_nav_menu( 'primary' ) ) : ?>
+					<button id="primary-open-menu" class="button open">
+						<span class="dropdown-icon open"><?php _e( 'Menu', 'seedlet' ); ?> <?php echo seedlet_get_icon_svg( 'menu' ) ?></span>
+						<span class="hide-visually expanded-text"><?php _e( 'expanded', 'seedlet' ); ?></span>
+					</button>
+				<?php endif; ?>
+			</div>
 			<?php get_template_part( 'template-parts/header/site-branding' ); ?>
 
 			<?php if ( has_nav_menu( 'primary' ) ) : ?>
 				<nav id="site-navigation" class="primary-navigation" aria-label="<?php esc_attr_e( 'Primary Navigation', 'seedlet' ); ?>">
-					<button id="toggle-menu" class="button">
-						<span class="dropdown-icon open"><?php _e( 'Menu', 'seedlet' ); ?> <?php echo seedlet_get_icon_svg( 'menu' ) ?></span>
+					<button id="primary-close-menu" class="button close">
 						<span class="dropdown-icon close"><?php _e( 'Close', 'seedlet' ); ?> <?php echo seedlet_get_icon_svg( 'close' ) ?></span>
-						<span class="hide-visually expanded-text"><?php _e( 'expanded', 'seedlet' ); ?></span>
 						<span class="hide-visually collapsed-text"><?php _e( 'collapsed', 'seedlet' ); ?></span>
 					</button>
 					<?php
@@ -46,7 +57,7 @@
 						array(
 							'theme_location'  => 'primary',
 							'menu_class'      => 'menu-wrapper',
-							'container_class' => 'primary-menu-container menu-'. $menu_obj->slug .'-container',
+							'container_class' => 'primary-menu-container',
 							'items_wrap'      => '<ul id="%1$s" class="%2$s" aria-label="' . esc_attr__( 'submenu', 'seedlet' ) . '">%3$s</ul>',
 						)
 					);
@@ -57,32 +68,25 @@
 			<?php if ( class_exists( 'WooCommerce' ) ) : ?>
 				<nav class="woo-navigation" aria-label="<?php esc_attr_e( 'Woo Minicart', 'seedlet' ); ?>">
 					<?php echo( sprintf(
-						'<button id="toggle-cart" class="button">
-							<span class="dropdown-icon open">%1$s %2$s</span>
-							<span class="dropdown-icon close">%3$s %4$s</span>
-							<span class="hide-visually expanded-text">%5$s</span>
-							<span class="hide-visually collapsed-text">%6$s</span>
+						'<button id="woo-close-menu" class="button close">
+							<span class="dropdown-icon close">%1$s %2$s</span>
+							<span class="hide-visually collapsed-text">%3$s</span>
 						</button>
 						<div class="woocommerce-menu-container">
-						<ul id="woocommerce-menu" class="menu-wrapper" aria-label="%7$s">
-						<li class="menu-item woocommerce-menu-item %8$s" title="%9$s">
-							%10$s
-							<ul class="sub-menu">
-								<li class="woocommerce-cart-widget" title="%11$s">
-									%12$s
-								</li>
-							</ul>
-						</li>',
-						seedlet_get_icon_svg( 'shopping_cart' ),
+							<ul id="woocommerce-menu" class="menu-wrapper" aria-label="%4$s">
+							<li class="menu-item woocommerce-menu-item %5$s" title="%6$s">
+								<ul class="sub-menu">
+									<li class="woocommerce-cart-widget" title="%7$s">
+										%8$s
+									</li>
+								</ul>
+							</li>',
 						esc_html__( 'Cart', 'seedlet' ),
-						esc_html__( 'Close', 'seedlet' ),
 						seedlet_get_icon_svg( 'close' ),
-						esc_html__( 'expanded', 'seedlet' ),
 						esc_html__( 'collapsed', 'seedlet' ),
 						esc_attr__( 'submenu', 'seedlet' ),
 						is_cart() ? 'current-menu-item' : '',
 						esc_attr__( 'View your shopping cart', 'seedlet' ),
-						seedlet_cart_link(),
 						esc_attr__( 'View your shopping list', 'seedlet' ),
 						seedlet_cart_widget()
 					) ); ?>

seedlet/style-rtl.css

@@ -999,7 +999,7 @@ a:active {
 	color: var(--wp--style--color--link, var(--global--color-primary));
 }
 
-*:focus {
+.site *:focus {
 	outline-width: 1px;
 	outline-style: dotted;
 	outline-color: var(--global--color-secondary);
@@ -2813,6 +2813,120 @@ nav a {
 	}
 }
 
+.menu-button-container {
+	display: none;
+	justify-content: space-between;
+	right: 0;
+	position: absolute;
+	top: 0;
+	width: 100%;
+}
+
+.menu-button-container #primary-open-menu {
+	margin-right: auto;
+}
+
+@media only screen and (max-width: 481px) {
+	.menu-button-container {
+		display: flex;
+	}
+}
+
+.admin-bar:not(.primary-navigation-open) .menu-button-container {
+	top: 46px;
+}
+
+.menu-button-container .button,
+.primary-navigation .button,
+.woo-navigation .button {
+	background-color: transparent;
+	color: var(--primary-nav--color-link);
+	z-index: 500;
+}
+
+.menu-button-container .button.open,
+.primary-navigation .button.open,
+.woo-navigation .button.open {
+	display: flex;
+	z-index: 499;
+}
+
+.menu-button-container .button.close,
+.primary-navigation .button.close,
+.woo-navigation .button.close {
+	display: none;
+}
+
+.menu-button-container .button:hover,
+.primary-navigation .button:hover,
+.woo-navigation .button:hover {
+	color: var(--primary-nav--color-link-hover);
+}
+
+.menu-button-container .button#woo-open-menu .svg-icon,
+.primary-navigation .button#woo-open-menu .svg-icon,
+.woo-navigation .button#woo-open-menu .svg-icon {
+	margin-right: 0;
+	margin-left: calc(0.25 * var(--global--spacing-unit));
+	vertical-align: middle;
+}
+
+.menu-button-container .button .dropdown-icon,
+.primary-navigation .button .dropdown-icon,
+.woo-navigation .button .dropdown-icon {
+	display: flex;
+	align-items: center;
+}
+
+.menu-button-container .button .dropdown-icon .svg-icon,
+.primary-navigation .button .dropdown-icon .svg-icon,
+.woo-navigation .button .dropdown-icon .svg-icon {
+	margin-right: calc(0.25 * var(--global--spacing-unit));
+}
+
+.menu-button-container .button .dropdown-icon.open .svg-icon,
+.primary-navigation .button .dropdown-icon.open .svg-icon,
+.woo-navigation .button .dropdown-icon.open .svg-icon {
+	position: relative;
+	top: -1px;
+}
+
+.menu-button-container .button .hide-visually,
+.primary-navigation .button .hide-visually,
+.woo-navigation .button .hide-visually {
+	position: absolute !important;
+	clip: rect(1px, 1px, 1px, 1px);
+	padding: 0 !important;
+	border: 0 !important;
+	height: 1px !important;
+	width: 1px !important;
+	overflow: hidden;
+}
+
+.primary-navigation-open .menu-button-container #primary-open-menu, .primary-navigation-open
+.primary-navigation #primary-open-menu, .primary-navigation-open
+.woo-navigation #primary-open-menu {
+	display: none;
+}
+
+.primary-navigation-open .menu-button-container #primary-close-menu, .primary-navigation-open
+.primary-navigation #primary-close-menu, .primary-navigation-open
+.woo-navigation #primary-close-menu {
+	display: flex;
+}
+
+.woo-navigation-open .menu-button-container #woo-open-menu, .woo-navigation-open
+.primary-navigation #woo-open-menu, .woo-navigation-open
+.woo-navigation #woo-open-menu {
+	display: none;
+}
+
+.woo-navigation-open .menu-button-container #woo-close-menu, .woo-navigation-open
+.primary-navigation #woo-close-menu, .woo-navigation-open
+.woo-navigation #woo-close-menu {
+	display: flex;
+}
+
 .primary-navigation,
 .woo-navigation {
 	position: absolute;
@@ -2855,22 +2969,6 @@ nav a {
 	}
 }
 
-.primary-navigation > .button,
-.woo-navigation > .button {
-	position: absolute;
-	display: inline-block;
-	margin: 0;
-	left: 0;
-	top: 0;
-	background-color: transparent;
-	color: var(--primary-nav--color-link);
-}
-
-.primary-navigation > .button:hover,
-.woo-navigation > .button:hover {
-	color: var(--primary-nav--color-link-hover);
-}
-
 .primary-navigation-open .primary-navigation > .primary-menu-container, .primary-navigation-open
 .woo-navigation > .primary-menu-container {
 	visibility: visible;
@@ -2878,43 +2976,6 @@ nav a {
 	transform: translateY(0);
 }
 
-.primary-navigation-open .primary-navigation > #toggle-menu, .primary-navigation-open
-.woo-navigation > #toggle-menu {
-	z-index: 500;
-}
-
-.primary-navigation-open .primary-navigation > #toggle-menu .open, .primary-navigation-open
-.woo-navigation > #toggle-menu .open {
-	display: none;
-}
-
-.primary-navigation-open .primary-navigation > #toggle-menu .close, .primary-navigation-open
-.woo-navigation > #toggle-menu .close {
-	display: flex;
-}
-
-.primary-navigation .dropdown-icon,
-.woo-navigation .dropdown-icon {
-	display: flex;
-	align-items: center;
-}
-
-.primary-navigation .dropdown-icon .svg-icon,
-.woo-navigation .dropdown-icon .svg-icon {
-	margin-right: calc(0.25 * var(--global--spacing-unit));
-}
-
-.primary-navigation .dropdown-icon.open .svg-icon,
-.woo-navigation .dropdown-icon.open .svg-icon {
-	position: relative;
-	top: -1px;
-}
-
-.primary-navigation .dropdown-icon.close,
-.woo-navigation .dropdown-icon.close {
-	display: none;
-}
-
 .lock-scrolling .primary-navigation > .button, .lock-scrolling
 .woo-navigation > .button {
 	position: fixed;

seedlet/style.css

@@ -1007,7 +1007,7 @@ a:active {
 	color: var(--wp--style--color--link, var(--global--color-primary));
 }
 
-*:focus {
+.site *:focus {
 	outline-width: 1px;
 	outline-style: dotted;
 	outline-color: var(--global--color-secondary);
@@ -2838,6 +2838,120 @@ nav a {
 	}
 }
 
+.menu-button-container {
+	display: none;
+	justify-content: space-between;
+	left: 0;
+	position: absolute;
+	top: 0;
+	width: 100%;
+}
+
+.menu-button-container #primary-open-menu {
+	margin-left: auto;
+}
+
+@media only screen and (max-width: 481px) {
+	.menu-button-container {
+		display: flex;
+	}
+}
+
+.admin-bar:not(.primary-navigation-open) .menu-button-container {
+	top: 46px;
+}
+
+.menu-button-container .button,
+.primary-navigation .button,
+.woo-navigation .button {
+	background-color: transparent;
+	color: var(--primary-nav--color-link);
+	z-index: 500;
+}
+
+.menu-button-container .button.open,
+.primary-navigation .button.open,
+.woo-navigation .button.open {
+	display: flex;
+	z-index: 499;
+}
+
+.menu-button-container .button.close,
+.primary-navigation .button.close,
+.woo-navigation .button.close {
+	display: none;
+}
+
+.menu-button-container .button:hover,
+.primary-navigation .button:hover,
+.woo-navigation .button:hover {
+	color: var(--primary-nav--color-link-hover);
+}
+
+.menu-button-container .button#woo-open-menu .svg-icon,
+.primary-navigation .button#woo-open-menu .svg-icon,
+.woo-navigation .button#woo-open-menu .svg-icon {
+	margin-left: 0;
+	margin-right: calc(0.25 * var(--global--spacing-unit));
+	vertical-align: middle;
+}
+
+.menu-button-container .button .dropdown-icon,
+.primary-navigation .button .dropdown-icon,
+.woo-navigation .button .dropdown-icon {
+	display: flex;
+	align-items: center;
+}
+
+.menu-button-container .button .dropdown-icon .svg-icon,
+.primary-navigation .button .dropdown-icon .svg-icon,
+.woo-navigation .button .dropdown-icon .svg-icon {
+	margin-left: calc(0.25 * var(--global--spacing-unit));
+}
+
+.menu-button-container .button .dropdown-icon.open .svg-icon,
+.primary-navigation .button .dropdown-icon.open .svg-icon,
+.woo-navigation .button .dropdown-icon.open .svg-icon {
+	position: relative;
+	top: -1px;
+}
+
+.menu-button-container .button .hide-visually,
+.primary-navigation .button .hide-visually,
+.woo-navigation .button .hide-visually {
+	position: absolute !important;
+	clip: rect(1px, 1px, 1px, 1px);
+	padding: 0 !important;
+	border: 0 !important;
+	height: 1px !important;
+	width: 1px !important;
+	overflow: hidden;
+}
+
+.primary-navigation-open .menu-button-container #primary-open-menu, .primary-navigation-open
+.primary-navigation #primary-open-menu, .primary-navigation-open
+.woo-navigation #primary-open-menu {
+	display: none;
+}
+
+.primary-navigation-open .menu-button-container #primary-close-menu, .primary-navigation-open
+.primary-navigation #primary-close-menu, .primary-navigation-open
+.woo-navigation #primary-close-menu {
+	display: flex;
+}
+
+.woo-navigation-open .menu-button-container #woo-open-menu, .woo-navigation-open
+.primary-navigation #woo-open-menu, .woo-navigation-open
+.woo-navigation #woo-open-menu {
+	display: none;
+}
+
+.woo-navigation-open .menu-button-container #woo-close-menu, .woo-navigation-open
+.primary-navigation #woo-close-menu, .woo-navigation-open
+.woo-navigation #woo-close-menu {
+	display: flex;
+}
+
 .primary-navigation,
 .woo-navigation {
 	position: absolute;
@@ -2880,22 +2994,6 @@ nav a {
 	}
 }
 
-.primary-navigation > .button,
-.woo-navigation > .button {
-	position: absolute;
-	display: inline-block;
-	margin: 0;
-	right: 0;
-	top: 0;
-	background-color: transparent;
-	color: var(--primary-nav--color-link);
-}
-
-.primary-navigation > .button:hover,
-.woo-navigation > .button:hover {
-	color: var(--primary-nav--color-link-hover);
-}
-
 .primary-navigation-open .primary-navigation > .primary-menu-container, .primary-navigation-open
 .woo-navigation > .primary-menu-container {
 	visibility: visible;
@@ -2903,43 +3001,6 @@ nav a {
 	transform: translateY(0);
 }
 
-.primary-navigation-open .primary-navigation > #toggle-menu, .primary-navigation-open
-.woo-navigation > #toggle-menu {
-	z-index: 500;
-}
-
-.primary-navigation-open .primary-navigation > #toggle-menu .open, .primary-navigation-open
-.woo-navigation > #toggle-menu .open {
-	display: none;
-}
-
-.primary-navigation-open .primary-navigation > #toggle-menu .close, .primary-navigation-open
-.woo-navigation > #toggle-menu .close {
-	display: flex;
-}
-
-.primary-navigation .dropdown-icon,
-.woo-navigation .dropdown-icon {
-	display: flex;
-	align-items: center;
-}
-
-.primary-navigation .dropdown-icon .svg-icon,
-.woo-navigation .dropdown-icon .svg-icon {
-	margin-left: calc(0.25 * var(--global--spacing-unit));
-}
-
-.primary-navigation .dropdown-icon.open .svg-icon,
-.woo-navigation .dropdown-icon.open .svg-icon {
-	position: relative;
-	top: -1px;
-}
-
-.primary-navigation .dropdown-icon.close,
-.woo-navigation .dropdown-icon.close {
-	display: none;
-}
-
 .lock-scrolling .primary-navigation > .button, .lock-scrolling
 .woo-navigation > .button {
 	position: fixed;