a11y menu issue when focus moves away (#284)

* Close desktop submenu when focus moves away
* Further menu accessibility improvements
- Close the mobile menu when focus moves away from the last item at the top level
- Improve the functionality for closing the desktop menu when focus moves away from the last item
* fix mobile menu test
* Move open and close functionality to their own functions

Author: helenb

tbx/project_styleguide/templates/patterns/navigation/components/includes/subnav-child-menu.html

@@ -4,7 +4,7 @@
     <ul class="sub-nav-desktop__list sub-nav-desktop__list--child">
         {% for page in pages %}
             <li class="sub-nav-desktop__item">
-                <a class="sub-nav-desktop__link sub-nav-desktop__link--child sub-nav-desktop__link--no-children" href="{% pageurl page %}">
+                <a class="sub-nav-desktop__link sub-nav-desktop__link--child sub-nav-desktop__link--no-children" href="{% pageurl page %}" {% if last_menu_item and forloop.last %}data-last-menu-item-desktop{% endif %}>
                     {{ page.nav_text }}
                 </a>
             </li>

tbx/project_styleguide/templates/patterns/navigation/components/includes/subnav-menu-mini.html

@@ -8,6 +8,9 @@
                 <a
                     class="sub-nav-desktop-mini__link"
                     href="{% pageurl link %}"
+                    {% if forloop.last %}
+                        data-last-menu-item-desktop
+                    {% endif %}
                 >
                     {{ link.nav_text }}
                 </a>

tbx/project_styleguide/templates/patterns/navigation/components/includes/subnav-menu.html

@@ -8,10 +8,14 @@
                     <a
                         class="sub-nav-desktop__link {% if children and child_display != 'hide_children' %}sub-nav-desktop__link--has-children{% else %}sub-nav-desktop__link--no-children{% endif %}"
                         href="{% pageurl link %}"
+                        {% if forloop.last %}
+                            {% if not children or child_display == 'hide_children' %}data-last-menu-item-desktop{% endif %}{% endif %}
                     >
                         {{ link.nav_text }}
                     </a>
-                    {% include "patterns/navigation/components/includes/subnav-child-menu.html" with pages=children %}
+                    {% if children and child_display != 'hide_children' %}
+                        {% include "patterns/navigation/components/includes/subnav-child-menu.html" with pages=children last_menu_item=forloop.last %}
+                    {% endif %}
                 {% endwith %}
             </li>
         {% endfor %}

tbx/project_styleguide/templates/patterns/navigation/components/primary-nav-mobile.html

@@ -17,6 +17,7 @@
                         data-open-subnav aria-haspopup="true" aria-expanded="false"
                     {% endif %}
                     href="{% if link.page %}{% pageurl link.page %}{% elif link.external_link %}{{ link.external_link }}{% endif %}"
+                    {% if forloop.last %}data-last-menu-item-mobile{% endif %}
                 >
                     <span class="primary-nav-mobile__text">{{ link.text }}</span>
                     {% if children and child_display != 'hide_children' %}

tbx/static_src/javascript/components/desktop-sub-menu.js

@@ -15,9 +15,32 @@ class DesktopSubMenu {
             '[data-desktop-menu] [data-has-subnav]',
         );
         this.activeClass = 'active';
+        this.lastMenuItems = document.querySelectorAll(
+            '[data-last-menu-item-desktop]',
+        );
         this.bindEventListeners();
     }
 
+    close() {
+        this.toggleNode.classList.remove('active');
+        this.node.setAttribute('aria-expanded', 'false');
+        this.body.classList.remove('no-scroll');
+    }
+
+    open() {
+        // Fire a custom event which is useful if we need any other items such as
+        // a search box to close when the desktop menu opens
+        // Can be listened to with
+        // document.addEventListener('onMenuOpen', () => {
+        //     // do stuff here...;
+        // });
+        const menuOpenEvent = new Event('onMenuOpen');
+        document.dispatchEvent(menuOpenEvent);
+        this.toggleNode.classList.add('active');
+        this.node.setAttribute('aria-expanded', 'true');
+        this.body.classList.add('no-scroll');
+    }
+
     bindEventListeners() {
         this.node.addEventListener('click', (e) => {
             e.preventDefault();
@@ -34,23 +57,18 @@ class DesktopSubMenu {
             });
 
             if (this.toggleNode.classList.contains('active')) {
-                this.toggleNode.classList.remove('active');
-                this.node.setAttribute('aria-expanded', 'false');
-                this.body.classList.remove('no-scroll');
+                this.close();
             } else {
-                // Fire a custom event which is useful if we need any other items such as
-                // a search box to close when the desktop menu opens
-                // Can be listened to with
-                // document.addEventListener('onMenuOpen', () => {
-                //     // do stuff here...;
-                // });
-                const menuOpenEvent = new Event('onMenuOpen');
-                document.dispatchEvent(menuOpenEvent);
-                this.toggleNode.classList.add('active');
-                this.node.setAttribute('aria-expanded', 'true');
-                this.body.classList.add('no-scroll');
+                this.open();
             }
         });
+
+        // Close the desktop menu when the focus moves away from the last item
+        this.lastMenuItems.forEach((item) => {
+            item.addEventListener('focusout', () => {
+                this.close();
+            });
+        });
     }
 }
 

tbx/static_src/javascript/components/mobile-menu.js

@@ -7,6 +7,9 @@ class MobileMenu {
         this.node = node;
         this.body = document.querySelector('body');
         this.mobileMenu = document.querySelector('[data-mobile-menu]');
+        this.lastMenuItem = document.querySelector(
+            '[data-last-menu-item-mobile]',
+        );
 
         this.state = {
             open: false,
@@ -29,6 +32,18 @@ class MobileMenu {
                 }
             }
         });
+
+        // Close the mobile menu when the focus moves away from the last item in the top level
+        if (this.lastMenuItem === null) {
+            return;
+        }
+
+        this.lastMenuItem.addEventListener('focusout', () => {
+            if (this.state.open) {
+                this.close();
+                this.state.open = false;
+            }
+        });
     }
 
     toggle() {