From a1fe48c7463c808db61953c8d3ce84b4a9dad7a5 Mon Sep 17 00:00:00 2001
From: Carolina Nymark <hi@themesbycarolina.com>
Date: Sun, 4 Oct 2020 12:28:36 +0200
Subject: [PATCH 1/9] Update primary navigation

Removes aria-haspopup
Moves the aria-expanded to the button.
Fixes the aria-controls, adding a new ID to the ul.
Adds a toggle button for sub menus.
---
 assets/css/ie.css                         | 45 +++++++++--------
 assets/js/primary-navigation.js           | 61 +++++++++++++----------
 assets/sass/06-components/navigation.scss | 46 +++++++++--------
 header.php                                |  6 +--
 inc/menu-functions.php                    | 41 +++------------
 style-rtl.css                             | 45 +++++++++--------
 style.css                                 | 45 +++++++++--------
 7 files changed, 143 insertions(+), 146 deletions(-)

diff --git a/assets/css/ie.css b/assets/css/ie.css
index 80fa0f1ae..e5eaf5a5d 100644
--- a/assets/css/ie.css
+++ b/assets/css/ie.css
@@ -5076,7 +5076,7 @@ h1.page-title {
 	.primary-navigation #toggle-menu {
 		display: none;
 	}
-	.primary-navigation > .primary-menu-container > ul > li > ul {
+	.primary-navigation > .primary-menu-container ul > li .sub-menu-toggle[aria-expanded="false"] ~ ul {
 		display: none;
 	}
 	.admin-bar .primary-navigation {
@@ -5112,34 +5112,40 @@ h1.page-title {
 	margin: 13px 0;
 	position: relative;
 	width: 100%;
-	z-index: 1;
-}
-
-.primary-navigation > div > .menu-wrapper li:hover, .primary-navigation > div > .menu-wrapper li:focus-within {
-	cursor: pointer;
-	z-index: 99999;
 }
 
 @media only screen and (min-width: 482px) {
 	.primary-navigation > div > .menu-wrapper li {
-		display: inherit;
 		margin: 0;
 		width: inherit;
-		/* Submenu display in the responsive menu */
-	}
-	.primary-navigation > div > .menu-wrapper li:hover > ul,
-	.primary-navigation > div > .menu-wrapper li:focus-within > ul,
-	.primary-navigation > div > .menu-wrapper li ul:hover,
-	.primary-navigation > div > .menu-wrapper li ul:focus {
-		visibility: visible;
-		opacity: 1;
-		display: block;
 	}
 	.primary-navigation > div > .menu-wrapper li:last-child {
 		margin-right: 0;
 	}
 }
 
+.primary-navigation > div > .menu-wrapper .sub-menu-toggle {
+	display: flex;
+	height: 44px;
+	width: 44px;
+	padding: 0;
+	justify-content: center;
+	align-items: center;
+	background: transparent;
+	color: currentColor;
+	border: none;
+}
+
+.primary-navigation > div > .menu-wrapper .sub-menu-toggle:focus {
+	outline: 2px solid #28303d;
+}
+
+@media only screen and (max-width: 481px) {
+	.primary-navigation > div > .menu-wrapper .sub-menu-toggle {
+		display: none;
+	}
+}
+
 .primary-navigation > div > .menu-wrapper > li > .sub-menu {
 	position: relative;
 }
@@ -5150,11 +5156,10 @@ h1.page-title {
 		left: 0;
 		margin: 0;
 		min-width: max-content;
-		opacity: 0;
 		position: absolute;
-		top: calc(100% - 13px);
+		top: 100%;
 		transition: all 0.5s ease;
-		visibility: hidden;
+		z-index: 99999;
 	}
 }
 
diff --git a/assets/js/primary-navigation.js b/assets/js/primary-navigation.js
index 44365ce9e..5f88f722e 100644
--- a/assets/js/primary-navigation.js
+++ b/assets/js/primary-navigation.js
@@ -3,30 +3,40 @@
  *
  * Required to open and close the mobile navigation.
  */
-( function() {
 
-	/**
-	 * Toggle an attribute's value
-	 * 
-	 * @param {Element} element
-	 * @param {Attribute} attribute
-	 * @param {String} trueVal
-	 * @param {String} falseVal
-	 * @since 1.0.0
-	 */
-	var toggleAttribute = function ( element, attribute, trueVal, falseVal ) {
-		if ( undefined === trueVal ) {
-			trueVal = true;
-		}
-		if ( undefined === falseVal ) {
-			falseVal = false;
-		}
-		if ( trueVal !== element.getAttribute( attribute ) ) {
-			element.setAttribute( attribute, trueVal );
-		} else {
-			element.setAttribute( attribute, falseVal );
-		}
+/**
+ * Toggle an attribute's value
+ *
+ * @param {Element} element
+ * @param {Attribute} attribute
+ * @param {String} trueVal
+ * @param {String} falseVal
+ * @since 1.0.0
+ */
+function twentytwentyoneToggleAttribute(element, attribute, trueVal, falseVal) {
+	if (undefined === trueVal) {
+		trueVal = true;
+	}
+	if (undefined === falseVal) {
+		falseVal = false;
 	}
+	if (trueVal !== element.getAttribute(attribute)) {
+		element.setAttribute(attribute, trueVal);
+	} else {
+		element.setAttribute(attribute, falseVal);
+	}
+}
+
+/**
+ * Handle clicks on submenu toggles.
+ *
+ * @param {Element} el
+ */
+function twentytwentyoneExpandSubMenu(el) { // eslint-disable-line no-unused-vars
+	twentytwentyoneToggleAttribute(el, 'aria-expanded', 'true', 'false');
+}
+
+( function() {
 
 	/**
 	 * Menu Toggle Behaviors
@@ -41,11 +51,10 @@
 			mobileButton.onclick = function() {
 				wrapper.classList.toggle( `${ id }-navigation-open` );
 				wrapper.classList.toggle( 'lock-scrolling' );
-				toggleAttribute( mobileButton, 'aria-expanded', 'true', 'false' );
+				twentytwentyoneToggleAttribute( mobileButton, 'aria-expanded', 'true', 'false' );
 				mobileButton.focus();
 			}
 		}
-
 		/**
 		 * Trap keyboard navigation in the menu modal.
 		 * Adapted from TwentyTwenty
@@ -53,7 +62,7 @@
 		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` );
@@ -94,4 +103,4 @@
 	window.addEventListener( 'load', function() {
 		new navMenu( 'primary' );
 	});
-} )();
\ No newline at end of file
+} )();
diff --git a/assets/sass/06-components/navigation.scss b/assets/sass/06-components/navigation.scss
index 5c25498b9..7674ed5bb 100644
--- a/assets/sass/06-components/navigation.scss
+++ b/assets/sass/06-components/navigation.scss
@@ -162,7 +162,7 @@
 		}
 
 		// Hide sub-sub-menus
-		> .primary-menu-container > ul > li > ul {
+		> .primary-menu-container ul > li .sub-menu-toggle[aria-expanded="false"] ~ ul {
 			display: none;
 		}
 
@@ -200,35 +200,38 @@
 			margin: var(--primary-nav--padding) 0;
 			position: relative;
 			width: 100%;
-			z-index: 1;
-
-			&:hover,
-			&:focus-within {
-				cursor: pointer;
-				z-index: 99999;
-			}
 
 			@include media(mobile) {
-				display: inherit;
 				margin: 0;
 				width: inherit;
 
-				/* Submenu display in the responsive menu */
-				&:hover > ul,
-				&:focus-within > ul,
-				ul:hover,
-				ul:focus {
-					visibility: visible;
-					opacity: 1;
-					display: block;
-				}
-
 				&:last-child() {
 					margin-right: 0;
 				}
 			}
 		}
 
+		// Sub menu buttons
+		.sub-menu-toggle {
+			display: flex;
+			height: 44px;
+			width: 44px;
+			padding: 0;
+			justify-content: center;
+			align-items: center;
+			background: transparent;
+			color: currentColor;
+			border: none;
+
+			&:focus {
+				outline: 2px solid var(--wp--style--color--link, var(--global--color-primary));
+			}
+
+			@include media(mobile-only) {
+				display: none;
+			}
+		}
+
 		// Sub-menus Flyout
 		> li > .sub-menu {
 
@@ -239,11 +242,10 @@
 				left: 0;
 				margin: 0;
 				min-width: max-content;
-				opacity: 0;
 				position: absolute;
-				top: calc(100% - var(--primary-nav--padding));
+				top: 100%;
 				transition: all 0.5s ease;
-				visibility: hidden;
+				z-index: 99999;
 			}
 
 			.sub-menu {
diff --git a/header.php b/header.php
index 1208ee030..6b8e7472b 100644
--- a/header.php
+++ b/header.php
@@ -30,9 +30,9 @@
 		<?php get_template_part( 'template-parts/header/site-branding' ); ?>
 
 			<?php if ( has_nav_menu( 'primary' ) ) { ?>
-				<nav id="site-navigation" class="primary-navigation" role="navigation" aria-label="<?php esc_attr_e( 'Primary', 'twentytwentyone' ); ?>" aria-expanded="false">
+				<nav id="site-navigation" class="primary-navigation" role="navigation" aria-label="<?php esc_attr_e( 'Primary', 'twentytwentyone' ); ?>">
 					<div class="menu-button-container">
-						<button id="primary-mobile-menu" class="button" aria-haspopup="true" aria-controls="primary-navigation">
+						<button id="primary-mobile-menu" class="button" aria-controls="primary-menu-list" aria-expanded="false">
 							<span class="dropdown-icon open"><?php esc_html_e( 'Menu', 'twentytwentyone' ); ?>
 								<?php echo twenty_twenty_one_get_icon_svg( 'menu' ); // phpcs:ignore WordPress.Security.EscapeOutput ?>
 							</span>
@@ -47,7 +47,7 @@
 							'theme_location'  => 'primary',
 							'menu_class'      => 'menu-wrapper',
 							'container_class' => 'primary-menu-container',
-							'items_wrap'      => '<ul id="%1$s" class="%2$s">%3$s</ul>',
+							'items_wrap'      => '<ul id="primary-menu-list" class="%2$s">%3$s</ul>',
 						)
 					);
 					?>
diff --git a/inc/menu-functions.php b/inc/menu-functions.php
index d198498f0..b848a91e0 100644
--- a/inc/menu-functions.php
+++ b/inc/menu-functions.php
@@ -13,50 +13,21 @@
  */
 
 /**
- * Add a dropdown icon to top-level menu items.
+ * Add a dropdown toggle with icon to top-level menu items.
  *
  * @param string $output Nav menu item start element.
  * @param object $item   Nav menu item.
  * @param int    $depth  Depth.
  * @param object $args   Nav menu args.
  * @return string Nav menu item start element.
- * Add a dropdown icon to top-level menu items
  */
-function twenty_twenty_one_add_dropdown_icons( $output, $item, $depth, $args ) {
+function twenty_twenty_one_add_dropdown_toggle( $output, $item, $depth, $args ) {
 
-	if ( in_array( 'menu-item-has-children', $item->classes, true ) ) {
-		// Add SVG icon to parent items.
-		$output .= twenty_twenty_one_get_icon_svg( 'plus', 18 );
+	if ( 0 === $depth && in_array( 'menu-item-has-children', $item->classes, true ) ) {
+		// Add toggle button with icon.
+		$output .= '<button class="sub-menu-toggle" aria-expanded="false" onClick="twentytwentyoneExpandSubMenu(this)"><span class="screen-reader-text">' . esc_html__( 'Toggle child menu', 'twentytwentyone' ) . '</span>' . twenty_twenty_one_get_icon_svg( 'plus', 18 ) . '</button>';
 	}
 
 	return $output;
 }
-add_filter( 'walker_nav_menu_start_el', 'twenty_twenty_one_add_dropdown_icons', 10, 4 );
-
-/**
- * WCAG 2.0 Attributes for Dropdown Menus.
- *
- * Adjustments to menu attributes to support WCAG 2.0 recommendations
- * for flyout and dropdown menus.
- *
- * @see https://www.w3.org/WAI/tutorials/menus/flyout/
- *
- * @param array    $atts  The HTML attributes applied to the menu item's <a> element, empty strings are ignored.
- * @param WP_Post  $item  The current menu item.
- * @param stdClass $args  An object of wp_nav_menu() arguments.
- * @param int      $depth Depth of menu item. Used for padding.
- *
- * @return array
- */
-function twenty_twenty_one_nav_menu_link_attributes( $atts, $item, $args, $depth ) {
-
-	// Add [aria-haspopup] and [aria-expanded] to menu items that have children.
-	$item_has_children = in_array( 'menu-item-has-children', $item->classes, true );
-	if ( $item_has_children ) {
-		$atts['aria-haspopup'] = 'true';
-		$atts['aria-expanded'] = 'false';
-	}
-
-	return $atts;
-}
-add_filter( 'nav_menu_link_attributes', 'twenty_twenty_one_nav_menu_link_attributes', 10, 4 );
+add_filter( 'walker_nav_menu_start_el', 'twenty_twenty_one_add_dropdown_toggle', 10, 4 );
diff --git a/style-rtl.css b/style-rtl.css
index 018070f9b..733a4b7ea 100644
--- a/style-rtl.css
+++ b/style-rtl.css
@@ -3738,7 +3738,7 @@ h1.page-title {
 	.primary-navigation #toggle-menu {
 		display: none;
 	}
-	.primary-navigation > .primary-menu-container > ul > li > ul {
+	.primary-navigation > .primary-menu-container ul > li .sub-menu-toggle[aria-expanded="false"] ~ ul {
 		display: none;
 	}
 	.admin-bar .primary-navigation {
@@ -3774,34 +3774,40 @@ h1.page-title {
 	margin: var(--primary-nav--padding) 0;
 	position: relative;
 	width: 100%;
-	z-index: 1;
-}
-
-.primary-navigation > div > .menu-wrapper li:hover, .primary-navigation > div > .menu-wrapper li:focus-within {
-	cursor: pointer;
-	z-index: 99999;
 }
 
 @media only screen and (min-width: 482px) {
 	.primary-navigation > div > .menu-wrapper li {
-		display: inherit;
 		margin: 0;
 		width: inherit;
-		/* Submenu display in the responsive menu */
-	}
-	.primary-navigation > div > .menu-wrapper li:hover > ul,
-	.primary-navigation > div > .menu-wrapper li:focus-within > ul,
-	.primary-navigation > div > .menu-wrapper li ul:hover,
-	.primary-navigation > div > .menu-wrapper li ul:focus {
-		visibility: visible;
-		opacity: 1;
-		display: block;
 	}
 	.primary-navigation > div > .menu-wrapper li:last-child {
 		margin-left: 0;
 	}
 }
 
+.primary-navigation > div > .menu-wrapper .sub-menu-toggle {
+	display: flex;
+	height: 44px;
+	width: 44px;
+	padding: 0;
+	justify-content: center;
+	align-items: center;
+	background: transparent;
+	color: currentColor;
+	border: none;
+}
+
+.primary-navigation > div > .menu-wrapper .sub-menu-toggle:focus {
+	outline: 2px solid var(--wp--style--color--link, var(--global--color-primary));
+}
+
+@media only screen and (max-width: 481px) {
+	.primary-navigation > div > .menu-wrapper .sub-menu-toggle {
+		display: none;
+	}
+}
+
 .primary-navigation > div > .menu-wrapper > li > .sub-menu {
 	position: relative;
 }
@@ -3812,11 +3818,10 @@ h1.page-title {
 		right: 0;
 		margin: 0;
 		min-width: max-content;
-		opacity: 0;
 		position: absolute;
-		top: calc(100% - var(--primary-nav--padding));
+		top: 100%;
 		transition: all 0.5s ease;
-		visibility: hidden;
+		z-index: 99999;
 	}
 }
 
diff --git a/style.css b/style.css
index af9668be5..c3dde4536 100644
--- a/style.css
+++ b/style.css
@@ -3751,7 +3751,7 @@ h1.page-title {
 	.primary-navigation #toggle-menu {
 		display: none;
 	}
-	.primary-navigation > .primary-menu-container > ul > li > ul {
+	.primary-navigation > .primary-menu-container ul > li .sub-menu-toggle[aria-expanded="false"] ~ ul {
 		display: none;
 	}
 	.admin-bar .primary-navigation {
@@ -3787,34 +3787,40 @@ h1.page-title {
 	margin: var(--primary-nav--padding) 0;
 	position: relative;
 	width: 100%;
-	z-index: 1;
-}
-
-.primary-navigation > div > .menu-wrapper li:hover, .primary-navigation > div > .menu-wrapper li:focus-within {
-	cursor: pointer;
-	z-index: 99999;
 }
 
 @media only screen and (min-width: 482px) {
 	.primary-navigation > div > .menu-wrapper li {
-		display: inherit;
 		margin: 0;
 		width: inherit;
-		/* Submenu display in the responsive menu */
-	}
-	.primary-navigation > div > .menu-wrapper li:hover > ul,
-	.primary-navigation > div > .menu-wrapper li:focus-within > ul,
-	.primary-navigation > div > .menu-wrapper li ul:hover,
-	.primary-navigation > div > .menu-wrapper li ul:focus {
-		visibility: visible;
-		opacity: 1;
-		display: block;
 	}
 	.primary-navigation > div > .menu-wrapper li:last-child {
 		margin-right: 0;
 	}
 }
 
+.primary-navigation > div > .menu-wrapper .sub-menu-toggle {
+	display: flex;
+	height: 44px;
+	width: 44px;
+	padding: 0;
+	justify-content: center;
+	align-items: center;
+	background: transparent;
+	color: currentColor;
+	border: none;
+}
+
+.primary-navigation > div > .menu-wrapper .sub-menu-toggle:focus {
+	outline: 2px solid var(--wp--style--color--link, var(--global--color-primary));
+}
+
+@media only screen and (max-width: 481px) {
+	.primary-navigation > div > .menu-wrapper .sub-menu-toggle {
+		display: none;
+	}
+}
+
 .primary-navigation > div > .menu-wrapper > li > .sub-menu {
 	position: relative;
 }
@@ -3825,11 +3831,10 @@ h1.page-title {
 		left: 0;
 		margin: 0;
 		min-width: max-content;
-		opacity: 0;
 		position: absolute;
-		top: calc(100% - var(--primary-nav--padding));
+		top: 100%;
 		transition: all 0.5s ease;
-		visibility: hidden;
+		z-index: 99999;
 	}
 }
 

From d76f54a7b8b93b62ef57188595b849b26e1e4f89 Mon Sep 17 00:00:00 2001
From: Carolina Nymark <hi@themesbycarolina.com>
Date: Mon, 5 Oct 2020 05:25:27 +0200
Subject: [PATCH 2/9] Update primary-navigation.js

---
 assets/js/primary-navigation.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/assets/js/primary-navigation.js b/assets/js/primary-navigation.js
index 5f88f722e..dc94f48e4 100644
--- a/assets/js/primary-navigation.js
+++ b/assets/js/primary-navigation.js
@@ -79,7 +79,7 @@ function twentytwentyoneExpandSubMenu(el) { // eslint-disable-line no-unused-var
 			if ( escKey ) {
 				event.preventDefault();
 				wrapper.classList.remove( `${ id }-navigation-open`, 'lock-scrolling' );
-				toggleAttribute( mobileButton, 'aria-expanded', 'true', 'false' );
+				twentytwentyoneToggleAttribute( mobileButton, 'aria-expanded', 'true', 'false' );
 				mobileButton.focus();
 			}
 

From 8a70af3620e04c4dd9502c2cacc0afc825e30803 Mon Sep 17 00:00:00 2001
From: Carolina Nymark <hi@themesbycarolina.com>
Date: Mon, 5 Oct 2020 06:38:57 +0200
Subject: [PATCH 3/9] Display minus icon when sub-menus are open

---
 assets/css/ie.css                             | 12 ++++++++++++
 assets/sass/06-components/navigation.scss     | 19 +++++++++++++++++--
 classes/class-twenty-twenty-one-svg-icons.php |  2 --
 inc/menu-functions.php                        | 11 ++++++-----
 style-rtl.css                                 | 12 ++++++++++++
 style.css                                     | 12 ++++++++++++
 6 files changed, 59 insertions(+), 9 deletions(-)

diff --git a/assets/css/ie.css b/assets/css/ie.css
index e5eaf5a5d..fc2978f0c 100644
--- a/assets/css/ie.css
+++ b/assets/css/ie.css
@@ -5146,6 +5146,18 @@ h1.page-title {
 	}
 }
 
+.primary-navigation > div > .menu-wrapper .sub-menu-toggle[aria-expanded="false"] {
+	/* stylelint-disable */
+	background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='18' height='18'><path d='M18 11.2h-5.2V6h-1.6v5.2H6v1.6h5.2V18h1.6v-5.2H18z' fill='%2328303d'/></svg>") no-repeat center center;
+	/* stylelint-enable */
+}
+
+.primary-navigation > div > .menu-wrapper .sub-menu-toggle[aria-expanded="true"] {
+	/* stylelint-disable */
+	background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='18' height='18'><path d='M4 9h12v2H4V9z' fill='%2328303d'/></svg>") no-repeat center center;
+	/* stylelint-enable */
+}
+
 .primary-navigation > div > .menu-wrapper > li > .sub-menu {
 	position: relative;
 }
diff --git a/assets/sass/06-components/navigation.scss b/assets/sass/06-components/navigation.scss
index 7674ed5bb..45b3fa756 100644
--- a/assets/sass/06-components/navigation.scss
+++ b/assets/sass/06-components/navigation.scss
@@ -211,7 +211,7 @@
 			}
 		}
 
-		// Sub menu buttons
+		// Sub-menu buttons
 		.sub-menu-toggle {
 			display: flex;
 			height: 44px;
@@ -230,6 +230,21 @@
 			@include media(mobile-only) {
 				display: none;
 			}
+
+			// When the sub-menu is closed, display the plus icon
+			&[aria-expanded="false"] {
+				/* stylelint-disable */
+				background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='18' height='18'><path d='M18 11.2h-5.2V6h-1.6v5.2H6v1.6h5.2V18h1.6v-5.2H18z' fill='%2328303d'/></svg>") no-repeat center center;
+				/* stylelint-enable */
+			}
+
+			// When the sub-menu is open, display the minus icon
+			&[aria-expanded="true"] {
+				/* stylelint-disable */
+				background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='18' height='18'><path d='M4 9h12v2H4V9z' fill='%2328303d'/></svg>") no-repeat center center;
+				/* stylelint-enable */
+			}
+
 		}
 
 		// Sub-menus Flyout
@@ -317,7 +332,7 @@
 		list-style: none;
 		margin-left: var(--primary-nav--padding);
 
-		// Sub menu items om wide screens.
+		// Sub-menu items om wide screens.
 		@include media(mobile) {
 			padding: 0 var(--primary-nav--padding);
 
diff --git a/classes/class-twenty-twenty-one-svg-icons.php b/classes/class-twenty-twenty-one-svg-icons.php
index 57c5b4dbb..69eeb28e9 100644
--- a/classes/class-twenty-twenty-one-svg-icons.php
+++ b/classes/class-twenty-twenty-one-svg-icons.php
@@ -62,7 +62,5 @@ public static function get_svg( $group, $icon, $size ) {
 		'arrow_left'  => '<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M9.737 18.011L3.98 12.255l5.734-6.28 1.107 1.012-4.103 4.494h13.3v1.5H6.828l3.97 3.97-1.06 1.06z" fill="currentColor"/></svg>',
 		'close'       => '<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M12 10.9394L5.53033 4.46973L4.46967 5.53039L10.9393 12.0001L4.46967 18.4697L5.53033 19.5304L12 13.0607L18.4697 19.5304L19.5303 18.4697L13.0607 12.0001L19.5303 5.53039L18.4697 4.46973L12 10.9394Z" fill="currentColor"/></svg>',
 		'menu'        => '<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M4.5 6H19.5V7.5H4.5V6ZM4.5 12H19.5V13.5H4.5V12ZM19.5 18H4.5V19.5H19.5V18Z" fill="currentColor"/></svg>',
-		'minus'       => '<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M4 9h12v2H4V9z" fill="currentColor"/></svg>',
-		'plus'        => '<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M18 11.2h-5.2V6h-1.6v5.2H6v1.6h5.2V18h1.6v-5.2H18z" fill="currentColor"/></svg>',
 	);
 }
diff --git a/inc/menu-functions.php b/inc/menu-functions.php
index b848a91e0..dc7fcae80 100644
--- a/inc/menu-functions.php
+++ b/inc/menu-functions.php
@@ -13,7 +13,8 @@
  */
 
 /**
- * Add a dropdown toggle with icon to top-level menu items.
+ * Add a button to top-level menu items that has sub-menus.
+ * An icon is added using CSS depending on the value of aria-expanded.
  *
  * @param string $output Nav menu item start element.
  * @param object $item   Nav menu item.
@@ -21,13 +22,13 @@
  * @param object $args   Nav menu args.
  * @return string Nav menu item start element.
  */
-function twenty_twenty_one_add_dropdown_toggle( $output, $item, $depth, $args ) {
+function twenty_twenty_one_add_sub_menu_toggle( $output, $item, $depth, $args ) {
 
 	if ( 0 === $depth && in_array( 'menu-item-has-children', $item->classes, true ) ) {
-		// Add toggle button with icon.
-		$output .= '<button class="sub-menu-toggle" aria-expanded="false" onClick="twentytwentyoneExpandSubMenu(this)"><span class="screen-reader-text">' . esc_html__( 'Toggle child menu', 'twentytwentyone' ) . '</span>' . twenty_twenty_one_get_icon_svg( 'plus', 18 ) . '</button>';
+		// Add toggle button.
+		$output .= '<button class="sub-menu-toggle" aria-expanded="false" onClick="twentytwentyoneExpandSubMenu(this)"><span class="screen-reader-text">' . esc_html__( 'Toggle child menu', 'twentytwentyone' ) . '</span></button>';
 	}
 
 	return $output;
 }
-add_filter( 'walker_nav_menu_start_el', 'twenty_twenty_one_add_dropdown_toggle', 10, 4 );
+add_filter( 'walker_nav_menu_start_el', 'twenty_twenty_one_add_sub_menu_toggle', 10, 4 );
diff --git a/style-rtl.css b/style-rtl.css
index 733a4b7ea..108f409da 100644
--- a/style-rtl.css
+++ b/style-rtl.css
@@ -3808,6 +3808,18 @@ h1.page-title {
 	}
 }
 
+.primary-navigation > div > .menu-wrapper .sub-menu-toggle[aria-expanded="false"] {
+	/* stylelint-disable */
+	background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='18' height='18'><path d='M18 11.2h-5.2V6h-1.6v5.2H6v1.6h5.2V18h1.6v-5.2H18z' fill='%2328303d'/></svg>") no-repeat center center;
+	/* stylelint-enable */
+}
+
+.primary-navigation > div > .menu-wrapper .sub-menu-toggle[aria-expanded="true"] {
+	/* stylelint-disable */
+	background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='18' height='18'><path d='M4 9h12v2H4V9z' fill='%2328303d'/></svg>") no-repeat center center;
+	/* stylelint-enable */
+}
+
 .primary-navigation > div > .menu-wrapper > li > .sub-menu {
 	position: relative;
 }
diff --git a/style.css b/style.css
index c3dde4536..dd332eada 100644
--- a/style.css
+++ b/style.css
@@ -3821,6 +3821,18 @@ h1.page-title {
 	}
 }
 
+.primary-navigation > div > .menu-wrapper .sub-menu-toggle[aria-expanded="false"] {
+	/* stylelint-disable */
+	background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='18' height='18'><path d='M18 11.2h-5.2V6h-1.6v5.2H6v1.6h5.2V18h1.6v-5.2H18z' fill='%2328303d'/></svg>") no-repeat center center;
+	/* stylelint-enable */
+}
+
+.primary-navigation > div > .menu-wrapper .sub-menu-toggle[aria-expanded="true"] {
+	/* stylelint-disable */
+	background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='18' height='18'><path d='M4 9h12v2H4V9z' fill='%2328303d'/></svg>") no-repeat center center;
+	/* stylelint-enable */
+}
+
 .primary-navigation > div > .menu-wrapper > li > .sub-menu {
 	position: relative;
 }

From df6380989d357ce94fbea13f11920c571486880b Mon Sep 17 00:00:00 2001
From: Carolina Nymark <hi@themesbycarolina.com>
Date: Mon, 5 Oct 2020 06:43:39 +0200
Subject: [PATCH 4/9] Update primary-navigation.js

---
 assets/js/primary-navigation.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/assets/js/primary-navigation.js b/assets/js/primary-navigation.js
index dc94f48e4..eea4a0bca 100644
--- a/assets/js/primary-navigation.js
+++ b/assets/js/primary-navigation.js
@@ -32,7 +32,7 @@ function twentytwentyoneToggleAttribute(element, attribute, trueVal, falseVal) {
  *
  * @param {Element} el
  */
-function twentytwentyoneExpandSubMenu(el) { // eslint-disable-line no-unused-vars
+function twentytwentyoneExpandSubMenu(el) {
 	twentytwentyoneToggleAttribute(el, 'aria-expanded', 'true', 'false');
 }
 

From b4fdbb8758a11f25a5b616027846232391d787f4 Mon Sep 17 00:00:00 2001
From: Ari Stathopoulos <aristath@gmail.com>
Date: Mon, 5 Oct 2020 10:50:23 +0300
Subject: [PATCH 5/9] When toggling a submenu, close any other open submenus

---
 assets/js/polyfills.js          | 41 +++++++++++++++++++++++++++++++++
 assets/js/primary-navigation.js | 10 ++++++++
 functions.php                   | 15 +++++++++++-
 3 files changed, 65 insertions(+), 1 deletion(-)
 create mode 100644 assets/js/polyfills.js

diff --git a/assets/js/polyfills.js b/assets/js/polyfills.js
new file mode 100644
index 000000000..0fe666153
--- /dev/null
+++ b/assets/js/polyfills.js
@@ -0,0 +1,41 @@
+/**
+ * File primary-navigation.js.
+ *
+ * Required to open and close the mobile navigation.
+ */
+
+/**
+ * Polyfill for Element.closest() because we need to support IE11.
+ *
+ * @see https://developer.mozilla.org/en-US/docs/Web/API/Element/closest
+ */
+if ( ! Element.prototype.matches ) {
+	Element.prototype.matches = Element.prototype.msMatchesSelector || Element.prototype.webkitMatchesSelector;
+}
+
+if ( ! Element.prototype.closest ) {
+	Element.prototype.closest = function( s ) {
+		var el = this;
+		do {
+			if ( Element.prototype.matches.call( el, s ) ) {
+				return el;
+			}
+			el = el.parentElement || el.parentNode;
+		} while ( el !== null && el.nodeType === 1 );
+		return null;
+	};
+}
+
+/**
+ * Polyfill for NodeList.foreach() because we need to support IE11.
+ *
+ * @see https://developer.mozilla.org/en-US/docs/Web/API/NodeList/forEach
+ */
+if ( window.NodeList && ! NodeList.prototype.forEach ) {
+	NodeList.prototype.forEach = function( callback, thisArg ) {
+		thisArg = thisArg || window;
+		for ( var i = 0; i < this.length; i++ ) {
+            callback.call( thisArg, this[i], i, this );
+        }
+    };
+}
diff --git a/assets/js/primary-navigation.js b/assets/js/primary-navigation.js
index eea4a0bca..8bb6d400b 100644
--- a/assets/js/primary-navigation.js
+++ b/assets/js/primary-navigation.js
@@ -27,12 +27,22 @@ function twentytwentyoneToggleAttribute(element, attribute, trueVal, falseVal) {
 	}
 }
 
+function twentytwentyoneCollapseAllOtherSubMenus(element) {
+	var nav = element.closest( 'nav' );
+	nav.querySelectorAll( '.sub-menu-toggle' ).forEach( function( button ) {
+		if ( button !== element ) {
+			button.setAttribute( 'aria-expanded', 'false' );
+		}
+	} );
+}
+
 /**
  * Handle clicks on submenu toggles.
  *
  * @param {Element} el
  */
 function twentytwentyoneExpandSubMenu(el) {
+	twentytwentyoneCollapseAllOtherSubMenus(el);
 	twentytwentyoneToggleAttribute(el, 'aria-expanded', 'true', 'false');
 }
 
diff --git a/functions.php b/functions.php
index 3a96ba250..263b80cb3 100644
--- a/functions.php
+++ b/functions.php
@@ -350,7 +350,20 @@ function twenty_twenty_one_scripts() {
 
 	// Main navigation scripts.
 	if ( has_nav_menu( 'primary' ) ) {
-		wp_enqueue_script( 'twenty-twenty-one-primary-navigation-script', get_template_directory_uri() . '/assets/js/primary-navigation.js', array(), wp_get_theme()->get( 'Version' ), true );
+		wp_register_script(
+			'twenty-twenty-one-ie11-polyfills',
+			get_template_directory_uri() . '/assets/js/polyfills.js',
+			array(),
+			wp_get_theme()->get( 'Version' ),
+			true
+		);
+		wp_enqueue_script(
+			'twenty-twenty-one-primary-navigation-script',
+			get_template_directory_uri() . '/assets/js/primary-navigation.js',
+			array( 'twenty-twenty-one-ie11-polyfills' ),
+			wp_get_theme()->get( 'Version' ),
+			true
+		);
 	}
 }
 add_action( 'wp_enqueue_scripts', 'twenty_twenty_one_scripts' );

From a1236f42f97d434046ec62d3f3daa2b5c0a1d310 Mon Sep 17 00:00:00 2001
From: Ari Stathopoulos <aristath@gmail.com>
Date: Mon, 5 Oct 2020 11:24:09 +0300
Subject: [PATCH 6/9] CS & simplify twentytwentyoneToggleAttribute

---
 assets/js/primary-navigation.js | 39 +++++++++++++--------------------
 1 file changed, 15 insertions(+), 24 deletions(-)

diff --git a/assets/js/primary-navigation.js b/assets/js/primary-navigation.js
index 8bb6d400b..bd37fc467 100644
--- a/assets/js/primary-navigation.js
+++ b/assets/js/primary-navigation.js
@@ -7,23 +7,14 @@
 /**
  * Toggle an attribute's value
  *
- * @param {Element} element
- * @param {Attribute} attribute
- * @param {String} trueVal
- * @param {String} falseVal
+ * @param {Element} el - The element.
  * @since 1.0.0
  */
-function twentytwentyoneToggleAttribute(element, attribute, trueVal, falseVal) {
-	if (undefined === trueVal) {
-		trueVal = true;
-	}
-	if (undefined === falseVal) {
-		falseVal = false;
-	}
-	if (trueVal !== element.getAttribute(attribute)) {
-		element.setAttribute(attribute, trueVal);
+function twentytwentyoneToggleAriaExpanded( el ) {
+	if ( 'true' !== el.getAttribute( 'aria-expanded' ) ) {
+		el.setAttribute( 'aria-expanded', 'true' );
 	} else {
-		element.setAttribute(attribute, falseVal);
+		el.setAttribute( 'aria-expanded', 'false' );
 	}
 }
 
@@ -39,11 +30,11 @@ function twentytwentyoneCollapseAllOtherSubMenus(element) {
 /**
  * Handle clicks on submenu toggles.
  *
- * @param {Element} el
+ * @param {Element} el - The element.
  */
-function twentytwentyoneExpandSubMenu(el) {
-	twentytwentyoneCollapseAllOtherSubMenus(el);
-	twentytwentyoneToggleAttribute(el, 'aria-expanded', 'true', 'false');
+function twentytwentyoneExpandSubMenu( el ) {
+	twentytwentyoneCollapseAllOtherSubMenus( el );
+	twentytwentyoneToggleAriaExpanded( el );
 }
 
 ( function() {
@@ -54,14 +45,14 @@ function twentytwentyoneExpandSubMenu(el) {
 	 * @param {Element} element
 	 */
 	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 mobileButton = document.getElementById( `${ id }-mobile-menu` );
+		var wrapper      = document.body, // this is the element to which a CSS class is added when a mobile nav menu is open
+			mobileButton = document.getElementById( `${ id }-mobile-menu` );
 
 		if ( mobileButton ){
 			mobileButton.onclick = function() {
 				wrapper.classList.toggle( `${ id }-navigation-open` );
 				wrapper.classList.toggle( 'lock-scrolling' );
-				twentytwentyoneToggleAttribute( mobileButton, 'aria-expanded', 'true', 'false' );
+				twentytwentyoneToggleAriaExpanded( mobileButton );
 				mobileButton.focus();
 			}
 		}
@@ -70,10 +61,10 @@ function twentytwentyoneExpandSubMenu(el) {
 		 * Adapted from TwentyTwenty
 		 */
 		document.addEventListener( 'keydown', function( event ) {
+			var modal, elements, selectors, lastEl, firstEl, activeEl, tabKey, shiftKey, escKey;
 			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";
@@ -89,7 +80,7 @@ function twentytwentyoneExpandSubMenu(el) {
 			if ( escKey ) {
 				event.preventDefault();
 				wrapper.classList.remove( `${ id }-navigation-open`, 'lock-scrolling' );
-				twentytwentyoneToggleAttribute( mobileButton, 'aria-expanded', 'true', 'false' );
+				twentytwentyoneToggleAriaExpanded( mobileButton );
 				mobileButton.focus();
 			}
 
@@ -107,7 +98,7 @@ function twentytwentyoneExpandSubMenu(el) {
 			if ( tabKey && firstEl === lastEl ) {
 				event.preventDefault();
 			}
-		});
+		} );
 	}
 
 	window.addEventListener( 'load', function() {

From 7baa07cd7ee5933e4f5ad84b5ae2ac1fdee3e296 Mon Sep 17 00:00:00 2001
From: Ari Stathopoulos <aristath@gmail.com>
Date: Mon, 5 Oct 2020 17:45:15 +0300
Subject: [PATCH 7/9] fix hover behavior

---
 assets/css/ie.css                         | 8 +++++++-
 assets/js/primary-navigation.js           | 9 +++++++++
 assets/sass/06-components/navigation.scss | 8 +++++++-
 style-rtl.css                             | 8 +++++++-
 style.css                                 | 8 +++++++-
 5 files changed, 37 insertions(+), 4 deletions(-)

diff --git a/assets/css/ie.css b/assets/css/ie.css
index 64fb64b10..dd61fff19 100644
--- a/assets/css/ie.css
+++ b/assets/css/ie.css
@@ -5076,7 +5076,7 @@ h1.page-title {
 	.primary-navigation #toggle-menu {
 		display: none;
 	}
-	.primary-navigation > .primary-menu-container ul > li .sub-menu-toggle[aria-expanded="false"] ~ ul {
+	.primary-navigation > .primary-menu-container ul > li:not(.hover) .sub-menu-toggle[aria-expanded="false"] ~ ul {
 		display: none;
 	}
 	.admin-bar .primary-navigation {
@@ -5158,6 +5158,12 @@ h1.page-title {
 	/* stylelint-enable */
 }
 
+.primary-navigation > div > .menu-wrapper .hover .sub-menu-toggle {
+	/* stylelint-disable */
+	background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='18' height='18'><path d='M4 9h12v2H4V9z' fill='%2328303d'/></svg>") no-repeat center center;
+	/* stylelint-enable */
+}
+
 .primary-navigation > div > .menu-wrapper > li > .sub-menu {
 	position: relative;
 }
diff --git a/assets/js/primary-navigation.js b/assets/js/primary-navigation.js
index bd37fc467..55fca2ba5 100644
--- a/assets/js/primary-navigation.js
+++ b/assets/js/primary-navigation.js
@@ -99,6 +99,15 @@ function twentytwentyoneExpandSubMenu( el ) {
 				event.preventDefault();
 			}
 		} );
+
+		document.getElementById( 'site-navigation' ).querySelectorAll( '.menu-wrapper > .menu-item-has-children' ).forEach( function( li ) {
+			li.addEventListener( 'mouseenter', function() {
+				this.classList.add( 'hover' );
+			} );
+			li.addEventListener( 'mouseleave', function() {
+				this.classList.remove( 'hover' );
+			} );
+		} );
 	}
 
 	window.addEventListener( 'load', function() {
diff --git a/assets/sass/06-components/navigation.scss b/assets/sass/06-components/navigation.scss
index 45b3fa756..5230a9725 100644
--- a/assets/sass/06-components/navigation.scss
+++ b/assets/sass/06-components/navigation.scss
@@ -162,7 +162,7 @@
 		}
 
 		// Hide sub-sub-menus
-		> .primary-menu-container ul > li .sub-menu-toggle[aria-expanded="false"] ~ ul {
+		> .primary-menu-container ul > li:not(.hover) .sub-menu-toggle[aria-expanded="false"] ~ ul {
 			display: none;
 		}
 
@@ -247,6 +247,12 @@
 
 		}
 
+		.hover .sub-menu-toggle {
+			/* stylelint-disable */
+			background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='18' height='18'><path d='M4 9h12v2H4V9z' fill='%2328303d'/></svg>") no-repeat center center;
+			/* stylelint-enable */
+		}
+
 		// Sub-menus Flyout
 		> li > .sub-menu {
 
diff --git a/style-rtl.css b/style-rtl.css
index 6d55e8dca..b922fe2bd 100644
--- a/style-rtl.css
+++ b/style-rtl.css
@@ -3738,7 +3738,7 @@ h1.page-title {
 	.primary-navigation #toggle-menu {
 		display: none;
 	}
-	.primary-navigation > .primary-menu-container ul > li .sub-menu-toggle[aria-expanded="false"] ~ ul {
+	.primary-navigation > .primary-menu-container ul > li:not(.hover) .sub-menu-toggle[aria-expanded="false"] ~ ul {
 		display: none;
 	}
 	.admin-bar .primary-navigation {
@@ -3820,6 +3820,12 @@ h1.page-title {
 	/* stylelint-enable */
 }
 
+.primary-navigation > div > .menu-wrapper .hover .sub-menu-toggle {
+	/* stylelint-disable */
+	background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='18' height='18'><path d='M4 9h12v2H4V9z' fill='%2328303d'/></svg>") no-repeat center center;
+	/* stylelint-enable */
+}
+
 .primary-navigation > div > .menu-wrapper > li > .sub-menu {
 	position: relative;
 }
diff --git a/style.css b/style.css
index c63b0a8e3..851d002a4 100644
--- a/style.css
+++ b/style.css
@@ -3751,7 +3751,7 @@ h1.page-title {
 	.primary-navigation #toggle-menu {
 		display: none;
 	}
-	.primary-navigation > .primary-menu-container ul > li .sub-menu-toggle[aria-expanded="false"] ~ ul {
+	.primary-navigation > .primary-menu-container ul > li:not(.hover) .sub-menu-toggle[aria-expanded="false"] ~ ul {
 		display: none;
 	}
 	.admin-bar .primary-navigation {
@@ -3833,6 +3833,12 @@ h1.page-title {
 	/* stylelint-enable */
 }
 
+.primary-navigation > div > .menu-wrapper .hover .sub-menu-toggle {
+	/* stylelint-disable */
+	background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='18' height='18'><path d='M4 9h12v2H4V9z' fill='%2328303d'/></svg>") no-repeat center center;
+	/* stylelint-enable */
+}
+
 .primary-navigation > div > .menu-wrapper > li > .sub-menu {
 	position: relative;
 }

From e346e2c9a8678cf4cf67bfd612e11138ab0d3131 Mon Sep 17 00:00:00 2001
From: Ari Stathopoulos <aristath@gmail.com>
Date: Mon, 5 Oct 2020 17:57:02 +0300
Subject: [PATCH 8/9] Handle clicking outside an expanded menu to close it

---
 assets/js/primary-navigation.js | 12 +++++++++++-
 1 file changed, 11 insertions(+), 1 deletion(-)

diff --git a/assets/js/primary-navigation.js b/assets/js/primary-navigation.js
index 55fca2ba5..20d94ad98 100644
--- a/assets/js/primary-navigation.js
+++ b/assets/js/primary-navigation.js
@@ -13,12 +13,22 @@
 function twentytwentyoneToggleAriaExpanded( el ) {
 	if ( 'true' !== el.getAttribute( 'aria-expanded' ) ) {
 		el.setAttribute( 'aria-expanded', 'true' );
+		document.addEventListener( 'click', twentytwentyoneCollapseMenuOnClickOutside );
 	} else {
 		el.setAttribute( 'aria-expanded', 'false' );
+		document.removeEventListener( 'click', twentytwentyoneCollapseMenuOnClickOutside );
 	}
 }
 
-function twentytwentyoneCollapseAllOtherSubMenus(element) {
+function twentytwentyoneCollapseMenuOnClickOutside( event ) {
+	if ( ! document.getElementById( 'site-navigation' ).contains( event.target ) ) {
+		document.getElementById( 'site-navigation' ).querySelectorAll( '.sub-menu-toggle' ).forEach( function( button ) {
+			button.setAttribute( 'aria-expanded', 'false' );
+		} );
+	}
+}
+
+function twentytwentyoneCollapseAllOtherSubMenus( element ) {
 	var nav = element.closest( 'nav' );
 	nav.querySelectorAll( '.sub-menu-toggle' ).forEach( function( button ) {
 		if ( button !== element ) {

From 534d05e32eecec482eee7c0eb98ae55e4db5b122 Mon Sep 17 00:00:00 2001
From: Ari Stathopoulos <aristath@gmail.com>
Date: Mon, 5 Oct 2020 18:12:10 +0300
Subject: [PATCH 9/9] collapse on tab-away

---
 assets/js/primary-navigation.js | 40 +++++++++++++++++++++------------
 1 file changed, 26 insertions(+), 14 deletions(-)

diff --git a/assets/js/primary-navigation.js b/assets/js/primary-navigation.js
index 20d94ad98..5ea77926d 100644
--- a/assets/js/primary-navigation.js
+++ b/assets/js/primary-navigation.js
@@ -10,13 +10,17 @@
  * @param {Element} el - The element.
  * @since 1.0.0
  */
-function twentytwentyoneToggleAriaExpanded( el ) {
+function twentytwentyoneToggleAriaExpanded( el, withListeners ) {
 	if ( 'true' !== el.getAttribute( 'aria-expanded' ) ) {
 		el.setAttribute( 'aria-expanded', 'true' );
-		document.addEventListener( 'click', twentytwentyoneCollapseMenuOnClickOutside );
+		if ( withListeners ) {
+			document.addEventListener( 'click', twentytwentyoneCollapseMenuOnClickOutside );
+		}
 	} else {
 		el.setAttribute( 'aria-expanded', 'false' );
-		document.removeEventListener( 'click', twentytwentyoneCollapseMenuOnClickOutside );
+		if ( withListeners ) {
+			document.removeEventListener( 'click', twentytwentyoneCollapseMenuOnClickOutside );
+		}
 	}
 }
 
@@ -28,23 +32,31 @@ function twentytwentyoneCollapseMenuOnClickOutside( event ) {
 	}
 }
 
-function twentytwentyoneCollapseAllOtherSubMenus( element ) {
-	var nav = element.closest( 'nav' );
-	nav.querySelectorAll( '.sub-menu-toggle' ).forEach( function( button ) {
-		if ( button !== element ) {
-			button.setAttribute( 'aria-expanded', 'false' );
-		}
-	} );
-}
-
 /**
  * Handle clicks on submenu toggles.
  *
  * @param {Element} el - The element.
  */
 function twentytwentyoneExpandSubMenu( el ) {
-	twentytwentyoneCollapseAllOtherSubMenus( el );
-	twentytwentyoneToggleAriaExpanded( el );
+
+	// Close other expanded items.
+	el.closest( 'nav' ).querySelectorAll( '.sub-menu-toggle' ).forEach( function( button ) {
+		if ( button !== el ) {
+			button.setAttribute( 'aria-expanded', 'false' );
+		}
+	} );
+
+	// Toggle aria-expanded on the button.
+	twentytwentyoneToggleAriaExpanded( el, true );
+
+	// On tab-away collapse the menu.
+	el.parentNode.querySelectorAll( 'ul > li:last-child > a' ).forEach( function( linkEl ) {
+		linkEl.addEventListener( 'blur', function( event ) {
+			if ( ! el.parentNode.contains( event.relatedTarget ) ) {
+				el.setAttribute( 'aria-expanded', 'false' );
+			}
+		} );
+	} );
 }
 
 ( function() {