improvement(nav): closing nav on tapping outside on mobile #1169

Author: Maximilian Franzke

packages/docs/src/js/primary-nav.js

@@ -56,8 +56,8 @@
 	 * Toggles active class on the primary nav panel
 	 * 1) Select all nav triggers and cycle through them
 	 * 2) On click, find the nav panel within the header
-	 * 3) If the navPanel already has active class, remove it on click.
-	 * 4) If the navPanel does not have an active class, add it on click.
+	 * 3) If the navPanel already has active class, remove it on click, as well as the aria-expanded attributes value.
+	 * 4) If the navPanel does not have an active class, add it on click, as well as the aria-expanded attributes value.
 	 */
 	var navToggle = document.querySelectorAll('.js-nav-trigger'); /* 1 */
 
@@ -67,15 +67,18 @@
 		navToggle[i].addEventListener('click', function(event) {
 			/* 2 */
 			event.preventDefault();
-			var navToggleParent = this.parentNode; /* 2 */
+			var navToggleElement = this;
+			var navToggleParent = navToggleElement.parentNode; /* 2 */
 			var navPanel = navToggleParent.querySelector('.js-nav-panel'); /* 2 */
 
 			if (navPanel.classList.contains('is-active')) {
 				/* 3 */
 				navPanel.classList.remove('is-active');
+				navToggleElement.setAttribute('aria-expanded', 'false');
 			} else {
 				/* 4 */
 				navPanel.classList.add('is-active');
+				navToggleElement.setAttribute('aria-expanded', 'true');
 			}
 		});
 	}

packages/docs/src/scss/components/_header.scss

@@ -47,6 +47,18 @@
 .c-header__nav-btn {
 	margin-left: auto;
 
+	// Pseudo / breakout element that enables clicking/tabbing outside of the menu to close it
+	&[aria-expanded="true"]::after {
+		position: fixed;
+		top: 0;
+		left: 0;
+
+		content: "";
+
+		width: 100vw;
+		height: 100vh;
+  }
+
 	@media all and (min-width: $bp-large) {
 		display: none;
 	}