Mobile nav dropdown - focusTrap

CHANGELOG.md

@@ -5,6 +5,7 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
 ## Draft
+- Adding mobile nav dropdown focusTrap [#2465](https://github.com/bigcommerce/cornerstone/pull/2465)
 - Remove remote_api_scripts to avoid double firing Meta Pixel analytics [#2467](https://github.com/bigcommerce/cornerstone/pull/2467)
 - Prevent flow outside page container on account pages [#2462](https://github.com/bigcommerce/cornerstone/pull/2462)
 - Account.js - Fixed jquery selector to be template literal [#2464](https://github.com/bigcommerce/cornerstone/pull/2464)

assets/js/theme/global/mobile-menu-toggle.js

@@ -1,3 +1,4 @@
+import * as focusTrap from 'focus-trap';
 import _ from 'lodash';
 import mediaQueryListFactory from '../common/media-query-list';
 import { CartPreviewEvents } from './cart-preview';
@@ -37,6 +38,8 @@ export class MobileMenuToggle {
         this.$subMenus = this.$navList.find('.navPages-action');
         this.$toggle = $toggle;
         this.mediumMediaQueryList = mediaQueryListFactory('medium');
+        this.$preModalFocusedEl = null;
+        this.focusTrap = null;
 
         // Auto-bind
         this.onToggleClick = this.onToggleClick.bind(this);
@@ -77,6 +80,28 @@ export class MobileMenuToggle {
         }
     }
 
+    setupFocusTrap() {
+        if (!this.$preModalFocusedEl) this.$preModalFocusedEl = $(document.activeElement);
+
+        if (!this.focusTrap) {
+            this.focusTrap = focusTrap.createFocusTrap(this.$header[0], {
+                escapeDeactivates: false,
+                returnFocusOnDeactivate: false,
+                allowOutsideClick: true,
+                fallbackFocus: () => {
+                    const fallbackNode = this.$preModalFocusedEl && this.$preModalFocusedEl.length
+                        ? this.$preModalFocusedEl[0]
+                        : $('[data-mobile-menu-toggle="menu"]')[0];
+
+                    return fallbackNode;
+                },
+            });
+        }
+
+        this.focusTrap.deactivate();
+        this.focusTrap.activate();
+    }
+
     toggle() {
         if (this.isOpen) {
             this.hide();
@@ -98,6 +123,8 @@ export class MobileMenuToggle {
         this.$scrollView.scrollTop(0);
 
         this.resetSubMenus();
+
+        this.setupFocusTrap();
     }
 
     hide() {
@@ -112,6 +139,12 @@ export class MobileMenuToggle {
         this.$header.removeClass('is-open');
 
         this.resetSubMenus();
+
+        if (this.focusTrap) this.focusTrap.deactivate();
+
+        if (this.$preModalFocusedEl) this.$preModalFocusedEl.focus();
+
+        this.$preModalFocusedEl = null;
     }
 
     // Private