diff --git a/core/profiles/demo_umami/themes/umami/css/components/navigation/menu-main/menu-main.css b/core/profiles/demo_umami/themes/umami/css/components/navigation/menu-main/menu-main.css
index 34a3d199cc..d28408fbb4 100644
--- a/core/profiles/demo_umami/themes/umami/css/components/navigation/menu-main/menu-main.css
+++ b/core/profiles/demo_umami/themes/umami/css/components/navigation/menu-main/menu-main.css
@@ -11,31 +11,34 @@
   font-size: 1.266rem;
   font-weight: 400;
   line-height: 1.2;
-  max-height: 0;
+  max-height: 18.75rem;
   overflow: hidden;
   padding: 0;
-  transition: max-height 0.5s ease-in;
-}
-.menu-main li {
-  visibility: hidden;
-}
-@media screen and (prefers-reduced-motion: reduce) {
-  .menu-main {
-    transition: 0s;
-  }
 }
 
-.menu-main--active {
+.menu-main--collapsed {
   /**
    * An exact max-height value must be set to make possible to animate the menu display.
    * It my not be much larger than the content because that would break the animation.
    * See: https://css-tricks.com/using-css-transitions-auto-dimensions/
    */
-  max-height: 18.75rem;
+  max-height: 0;
   overflow-y: auto;
 }
-.menu-main--active li {
-  visibility: inherit;
+.menu-main--collapsed li {
+  visibility: hidden;
+  transition: visibility 0.5s ease-in;
+}
+
+.menu-main--transition {
+  transition: max-height 0.5s ease-in;
+}
+
+
+@media screen and (prefers-reduced-motion: reduce) {
+  .menu-main--transition {
+    transition: 0s;
+  }
 }
 
 .menu-main-toggle {
@@ -96,6 +99,9 @@
     max-height: initial;
     overflow: auto;
   }
+  .menu-main--collapsed li {
+    visibility: visible;
+  }
   .menu-main-toggle {
     display: none;
   }
diff --git a/core/profiles/demo_umami/themes/umami/js/components/navigation/menu-main/menu-main.es6.js b/core/profiles/demo_umami/themes/umami/js/components/navigation/menu-main/menu-main.es6.js
index 5aecd55612..7cb284c74d 100644
--- a/core/profiles/demo_umami/themes/umami/js/components/navigation/menu-main/menu-main.es6.js
+++ b/core/profiles/demo_umami/themes/umami/js/components/navigation/menu-main/menu-main.es6.js
@@ -6,27 +6,23 @@
  (function () {
    const toggler = document.querySelector('[data-drupal-selector="menu-main-toggle"]');
    const menu = document.querySelector('[data-drupal-selector="menu-main"]');
-   var aria = false;
+
+   menu.classList.toggle('menu-main--collapsed');
+   toggler.setAttribute('aria-expanded', 'false');
+   toggler.setAttribute('aria-controls', menu.getAttribute('id'));
 
    function toggleMenu() {
-     toggler.classList.toggle('menu-main-toggle--active');
-     menu.classList.toggle('menu-main--active');
+     const expanded = toggler.getAttribute('aria-expanded');
 
-     if (aria === false) {
-       aria = true;
-     }
-     else {
-       aria = false;
-     }
+     menu.classList.add('menu-main--transition');
+     menu.classList.toggle('menu-main--collapsed');
+     toggler.classList.toggle('menu-main-toggle--active');
 
-     if (aria === true) {
+     if (expanded === 'false') {
        toggler.setAttribute('aria-expanded', 'true');
-     }
-     else {
+     } else {
        toggler.setAttribute('aria-expanded', 'false');
      }
-
-     return false;
    }
 
    toggler.addEventListener('click', toggleMenu);
diff --git a/core/profiles/demo_umami/themes/umami/js/components/navigation/menu-main/menu-main.js b/core/profiles/demo_umami/themes/umami/js/components/navigation/menu-main/menu-main.js
index 535ddcc37b..2b562ede0c 100644
--- a/core/profiles/demo_umami/themes/umami/js/components/navigation/menu-main/menu-main.js
+++ b/core/profiles/demo_umami/themes/umami/js/components/navigation/menu-main/menu-main.js
@@ -8,25 +8,23 @@
 (function () {
   var toggler = document.querySelector('[data-drupal-selector="menu-main-toggle"]');
   var menu = document.querySelector('[data-drupal-selector="menu-main"]');
-  var aria = false;
+
+  menu.classList.toggle('menu-main--collapsed');
+  toggler.setAttribute('aria-expanded', 'false');
+  toggler.setAttribute('aria-controls', menu.getAttribute('id'));
 
   function toggleMenu() {
-    toggler.classList.toggle('menu-main-toggle--active');
-    menu.classList.toggle('menu-main--active');
+    var expanded = toggler.getAttribute('aria-expanded');
 
-    if (aria === false) {
-      aria = true;
-    } else {
-      aria = false;
-    }
+    menu.classList.add('menu-main--transition');
+    menu.classList.toggle('menu-main--collapsed');
+    toggler.classList.toggle('menu-main-toggle--active');
 
-    if (aria === true) {
+    if (expanded === 'false') {
       toggler.setAttribute('aria-expanded', 'true');
     } else {
       toggler.setAttribute('aria-expanded', 'false');
     }
-
-    return false;
   }
 
   toggler.addEventListener('click', toggleMenu);
diff --git a/core/profiles/demo_umami/themes/umami/templates/components/navigation/block--umami-main-menu.html.twig b/core/profiles/demo_umami/themes/umami/templates/components/navigation/block--umami-main-menu.html.twig
index 99f6a0532f..a295c4269b 100644
--- a/core/profiles/demo_umami/themes/umami/templates/components/navigation/block--umami-main-menu.html.twig
+++ b/core/profiles/demo_umami/themes/umami/templates/components/navigation/block--umami-main-menu.html.twig
@@ -41,7 +41,7 @@
 %}
 
 <div id="menu-main-toggle" class="menu-main-togglewrap">
-  <button type="button" name="menu_toggle" class="menu-main-toggle" data-drupal-selector="menu-main-toggle" aria-label="Toggle the menu" aria-expanded="false" aria-controls="menu-main-toggle">{% include active_theme_path() ~ '/images/svg/menu-icon.svg' %}</button>
+  <button type="button" name="menu_toggle" class="menu-main-toggle" data-drupal-selector="menu-main-toggle" aria-label="Main menu">{% include active_theme_path() ~ '/images/svg/menu-icon.svg' %}</button>
 </div>
 
 {% set heading_id = attributes.id ~ '-menu'|clean_id %}
diff --git a/core/profiles/demo_umami/themes/umami/templates/components/navigation/menu--main.html.twig b/core/profiles/demo_umami/themes/umami/templates/components/navigation/menu--main.html.twig
index 0abb202394..0fc9738d13 100644
--- a/core/profiles/demo_umami/themes/umami/templates/components/navigation/menu--main.html.twig
+++ b/core/profiles/demo_umami/themes/umami/templates/components/navigation/menu--main.html.twig
@@ -46,7 +46,7 @@
   %}
   {% if items %}
     {% if menu_level == 0 %}
-      <ul{{ attributes.addClass(menu_classes).setAttribute('data-drupal-selector','menu-main').setAttribute('aria-expanded', 'false') }}> {# 1. #}
+      <ul{{ attributes.addClass(menu_classes).setAttribute('data-drupal-selector','menu-main').setAttribute('id', 'menu-' ~ menu_name|clean_class) }}> {# 1. #}
     {% else %}
       <ul{{ attributes.removeClass(menu_classes).addClass(submenu_classes) }}> {# 1. #}
     {% endif %}