a11y on main menu

assets/js/theme/nav/mainMenu.js

@@ -47,9 +47,16 @@ class MainMenu {
         document.documentElement.classList.toggle(CLASSES.menusOpened);
     }
 
-    toggleDropdown (button) {
-        const isExpanded = button.getAttribute('aria-expanded') === 'true';
-        button.setAttribute('aria-expanded', !isExpanded);
+    toggleDropdown (clickedButton) {
+        const isExpanded = clickedButton.getAttribute('aria-expanded') === 'true';
+        // Close all dropdowns except selected
+        this.dropdownsButtons.forEach(button => {
+            if (clickedButton === button) {
+                clickedButton.setAttribute('aria-expanded', !isExpanded);
+            } else {
+                button.setAttribute('aria-expanded', 'false');
+            }
+        });
     }
 
     onScroll () {

assets/sass/_theme/design-system/nav.sass

@@ -46,8 +46,8 @@
                 display: block
             &:last-child a
                 padding-right: 0
-        li.has-children:hover
-            .dropdown-menu
+        li.has-children
+            a[aria-expanded="true"] + .dropdown-menu
                 display: block
 
     .nav-level-2