Add inert to main content when mobile menu is open (#3343)

Author: tunetheweb

src/static/js/almanac.js

@@ -155,6 +155,8 @@ function handleNavMenu() {
 function handleMobileMenu() {
   var menuBtn = document.querySelector('.menu-btn');
   var menuNav = document.querySelector('#menu');
+  var main = document.querySelector('main');
+  var footer = document.querySelector('footer');
 
   function toggleNavMenu() {
     var menuOpen = document.body.classList.toggle('menu-open');
@@ -163,6 +165,10 @@ function handleMobileMenu() {
     var ariaLabel = menuOpen ? menuBtn.getAttribute('data-close-text') : menuBtn.getAttribute('data-open-text');
     menuBtn.setAttribute('aria-label', ariaLabel);
 
+    // Toogle inert to keep focus in the menu and header
+    main.toggleAttribute('inert');
+    footer.toggleAttribute('inert');
+
     /* When you open the menu, add an event listener to close it when clicking outside the menu area */
     /* Remove it on closing the menu */
     if (menuBtn.getAttribute('aria-expanded') === 'true') {