refining some more menu stuff

css/app.css

@@ -715,11 +715,6 @@ video {
   background-color: rgb(47 1 84 / var(--tw-bg-opacity));
 }
 
-.bg-white {
-  --tw-bg-opacity: 1;
-  background-color: rgb(255 255 255 / var(--tw-bg-opacity));
-}
-
 .bg-secondary {
   --tw-bg-opacity: 1;
   background-color: rgb(223 30 30 / var(--tw-bg-opacity));
@@ -1141,13 +1136,20 @@ body:not(.wp-admin) {
   font-weight: 400;
 }
 
+body {
+  --tw-bg-opacity: 1;
+  background-color: rgb(255 255 255 / var(--tw-bg-opacity));
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
 a:focus,
 button:focus {
   outline: red solid 1px;
   outline-width: 1px;
   outline-offset: 8px;
   outline-radius: 50px;
-  border-radius: 10px;
+  /* border-radius: 10px; */
 }
 
 .filter-acoustique-coproprietes {
@@ -1826,6 +1828,38 @@ header#main-header {
   }
 }
 
+.skiplinks {
+  --tw-bg-opacity: 1;
+  background-color: rgb(47 1 84 / var(--tw-bg-opacity));
+  padding-left: 2rem;
+}
+
+.skiplinks__link {
+  transition: margin 0.25s ease-in-out;
+  display: block;
+  max-height: 0px;
+  width: -webkit-fit-content;
+  width: -moz-fit-content;
+  width: fit-content;
+  overflow: hidden;
+  border-radius: 0.375rem;
+  --tw-border-opacity: 1;
+  border-color: rgb(255 255 255 / var(--tw-border-opacity));
+  padding-left: 1rem;
+  padding-right: 1rem;
+  --tw-text-opacity: 1;
+  color: rgb(255 255 255 / var(--tw-text-opacity));
+}
+
+.skiplinks__link:focus {
+  margin-top: 1rem;
+  margin-bottom: 1rem;
+  max-height: 3rem;
+  border-width: 1px;
+  padding-top: 0.5rem;
+  padding-bottom: 0.5rem;
+}
+
 .sub-menu {
   z-index: 10;
 }
@@ -1867,19 +1901,31 @@ header#main-header {
 }
 
 .site-footer__infos-contact {
-  grid-column: span 1 / span 1;
+  grid-column: span 4 / span 4;
   display: grid;
   gap: 1.5rem;
 }
 
+@media (min-width: 960px) {
+  .site-footer__infos-contact {
+    grid-column: span 1 / span 1;
+  }
+}
+
 .site-footer__infos-contact .external-link {
   margin-top: 0.25rem;
   padding-top: 0.5rem;
 }
 
+.site-footer__navigation-menu {
+  grid-column: span 4 / span 4;
+}
+
+@media (min-width: 960px) {
   .site-footer__navigation-menu {
     grid-column: span 3 / span 3;
   }
+}
 
 .site-footer__navigation-menu .footer-menu-renovateur {
   display: flex;
@@ -1908,16 +1954,29 @@ header#main-header {
 }
 
 .site-footer__partenaires {
-  grid-column: span 2 / span 2;
+  grid-column: span 4 / span 4;
   display: flex;
+  flex-wrap: wrap;
   align-items: center;
   justify-content: center;
   gap: 3rem;
 }
 
+@media (min-width: 782px) {
+  .site-footer__partenaires {
+    grid-column: span 2 / span 2;
+  }
+}
+
+.site-footer__metiers-patrimoine {
+  grid-column: span 4 / span 4;
+}
+
+@media (min-width: 782px) {
   .site-footer__metiers-patrimoine {
     grid-column: span 2 / span 2;
   }
+}
 
 article > *:not(.entry-content), 
 .entry-content > * {
@@ -1978,13 +2037,27 @@ article > *:not(.entry-content),
   justify-content: space-between;
   padding-top: 2rem;
   padding-bottom: 2rem;
-  padding-left: 4rem;
+  padding-left: 1rem;
-  padding-right: 4rem;
+  padding-right: 1rem;
   --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
   --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
   box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
 }
 
+@media (min-width: 600px) {
+  .menu-renovateur {
+    padding-left: 2rem;
+    padding-right: 2rem;
+  }
+}
+
+@media (min-width: 782px) {
+  .menu-renovateur {
+    padding-left: 4rem;
+    padding-right: 4rem;
+  }
+}
+
 .menu-renovateur .website_logo {
   order: 1;
   margin-right: 3rem;
@@ -2004,8 +2077,6 @@ article > *:not(.entry-content),
 .menu-renovateur__navlist {
   position: relative;
   justify-content: center;
-  --tw-bg-opacity: 1;
-  background-color: rgb(240 171 252 / var(--tw-bg-opacity));
 }
 
 @media (min-width: 960px) {
@@ -2278,8 +2349,20 @@ article > *:not(.entry-content),
 
 .menu-renovateur--footer {
   display: grid;
+  row-gap: 1rem;
+}
+
+@media (min-width: 600px) {
+  .menu-renovateur--footer {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+}
+
+@media (min-width: 960px) {
+  .menu-renovateur--footer {
     grid-template-columns: repeat(4, minmax(0, 1fr));
   }
+}
 
 .menu-renovateur--footer li .page_icon {
   height: 50px;
@@ -2389,7 +2472,7 @@ article > *:not(.entry-content),
   display: block;
 }
 
-.menu-homegrade li .sub-menu {
+.menu-homegrade .sub-menu {
   position: static;
   margin-left: auto;
   margin-right: auto;
@@ -2399,34 +2482,38 @@ article > *:not(.entry-content),
 }
 
 @media (min-width: 960px) {
-  .menu-homegrade li .sub-menu {
+  .menu-homegrade .sub-menu {
     position: absolute;
     margin-left: 0px;
     margin-right: 0px;
   }
 }
 
-.menu-homegrade li .sub-menu {
+.menu-homegrade .sub-menu {
   z-index: 999;
   display: none;
 }
 
-/* &.sub-menu--open {
+.menu-homegrade .sub-menu--closed {
-       display: block;
+  display: none;
-     } */
+}
 
-.menu-homegrade li .sub-menu li {
+.menu-homegrade .sub-menu--open {
+  display: block;
+}
+
+.menu-homegrade .sub-menu li {
   padding-top: 0.5rem;
   padding-bottom: 0.5rem;
 }
 
 @media (min-width: 960px) {
-  .menu-homegrade li .sub-menu li {
+  .menu-homegrade .sub-menu li {
     text-align: left;
   }
 }
 
-.menu-homegrade li .sub-menu > a::after {
+.menu-homegrade .sub-menu > a::after {
   transform: translateY(-2px) rotate(-90deg);
   content: '';
   display: inline-block;
@@ -2619,10 +2706,21 @@ article > *:not(.entry-content),
 .menu-homegrade--footer {
   margin-top: 2rem;
   display: grid;
-  grid-template-columns: repeat(4, minmax(0, 1fr));
   row-gap: 2rem;
 }
 
+@media (min-width: 600px) {
+  .menu-homegrade--footer {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+}
+
+@media (min-width: 782px) {
+  .menu-homegrade--footer {
+    grid-template-columns: repeat(4, minmax(0, 1fr));
+  }
+}
+
 .menu-homegrade--footer li.menu-item a:hover {
   --tw-text-opacity: 1;
   color: rgb(223 30 30 / var(--tw-text-opacity));
@@ -2711,9 +2809,19 @@ article > *:not(.entry-content),
 .home-header__title {
   padding-bottom: 1.5rem;
   padding-top: 4rem;
+  font-size: 1.875rem;
+  line-height: 2.25rem;
+  font-weight: 500;
+}
+
+@media (min-width: 782px) {
+  .home-header__title {
     font-size: 2.25rem;
     line-height: 2.5rem;
-  font-weight: 500;
+  }
+}
+
+.home-header__title {
   line-height: 1.2;
 }
 
@@ -2811,7 +2919,7 @@ article > *:not(.entry-content),
   margin-right: auto;
   display: grid;
   max-width: 1440px;
-  grid-template-columns: repeat(4, minmax(0, 1fr));
+  grid-template-columns: repeat(1, minmax(0, 1fr));
   gap: 2rem;
   padding-left: 2rem;
   padding-right: 2rem;
@@ -2819,6 +2927,18 @@ article > *:not(.entry-content),
   padding-bottom: 4rem;
 }
 
+@media (min-width: 600px) {
+  .section_latest_news .articles_container {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+}
+
+@media (min-width: 1280px) {
+  .section_latest_news .articles_container {
+    grid-template-columns: repeat(4, minmax(0, 1fr));
+  }
+}
+
 #block-aides-financieres .section_titling {
   max-width: 782px;
 }
@@ -3041,9 +3161,21 @@ article > *:not(.entry-content),
   transform: translate(-50%, -70%);
 }
 
+#block-demarches-administratives .card-large-content__links-container {
+  grid-template-columns: repeat(1, minmax(0, 1fr));
+}
+
+@media (min-width: 782px) {
+  #block-demarches-administratives .card-large-content__links-container {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+}
+
+@media (min-width: 960px) {
   #block-demarches-administratives .card-large-content__links-container {
     grid-template-columns: repeat(4, minmax(0, 1fr));
   }
+}
 
 #block-questions-frequentes {
   padding-top: 7rem;
@@ -3055,12 +3187,23 @@ article > *:not(.entry-content),
   margin-right: auto;
   display: grid;
   max-width: 1280px;
-  grid-template-columns: repeat(3, minmax(0, 1fr));
   gap: 2rem;
   -moz-column-gap: 2rem;
        column-gap: 2rem;
 }
 
+@media (min-width: 782px) {
+  .questions-frequentes-grid {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+}
+
+@media (min-width: 960px) {
+  .questions-frequentes-grid {
+    grid-template-columns: repeat(3, minmax(0, 1fr));
+  }
+}
+
 /* ########### PAGE ############ */
 
 .demo-components .title {

css/editor-style.css

@@ -162,11 +162,6 @@
   background-color: rgb(47 1 84 / var(--tw-bg-opacity))
 }
 
-.bg-white {
-  --tw-bg-opacity: 1;
-  background-color: rgb(255 255 255 / var(--tw-bg-opacity))
-}
-
 .bg-secondary {
   --tw-bg-opacity: 1;
   background-color: rgb(223 30 30 / var(--tw-bg-opacity))

header.php

@@ -9,8 +9,7 @@
 	<?php wp_head(); ?>
 </head>
 
-<body <?php body_class('bg-white text-gray-900 antialiased'); ?>>
+<body>
-
 	<?php
 	do_action('tailpress_site_before');
 	global $post;
@@ -18,6 +17,13 @@
 
 	<div id="page-<?php echo $post->post_name ?>" class="min-h-screen flex flex-col">
 
+		<div class="skiplinks" aria-label="<?php echo __('Accès rapide', 'homegrade-theme__texte-fonctionnel') ?>">
+			<a href="#content" class="skiplinks__link"><?php echo __('Aller au contenu', 'homegrade-theme__texte-fonctionnel') ?></a>
+		</div>
+		<ul class="skiplinks">
+			<li></li>
+		</ul>
+
 		<?php do_action('tailpress_header'); ?>
 
 		<header id="main-header">

includes/navwalker.php

@@ -18,7 +18,7 @@ function wrap_parent_menu_item_buttons($output, $item, $depth, $args)
     }
 
 
-    // #### MENU RENOVATEUR
+    // #### MENU RENOVATEUR — N'est pas utilisé pour le menu principal
     if ($args->theme_location === "renovateur") {
         $page_icon = get_field('page_icon', $item->object_id);
 

js/app.js

@@ -8,7 +8,7 @@
     const submenuToggles = header.querySelectorAll(".menu-item__submenu-toggle");
     const submenuCloseBtns = header.querySelectorAll(".menu-item__submenu-close");
     function isSubmenuOpen() {
-      return header.querySelector("sub-menu-open") !== null;
+      return header.querySelector(".sub-menu--open") !== null;
     }
     function openSubmenu(buttonToggle) {
       let isExpanded = buttonToggle.getAttribute("aria-expanded") === "true";
@@ -62,14 +62,18 @@
       return null;
     }
     function openSearch() {
-      searchModuleToggle.setAttribute("aria-expanded", "");
+      const searchFieldInput = header.querySelector(".search-module__search-form__input");
+      searchModuleToggle.setAttribute("aria-expanded", "true");
       searchModule.setAttribute("mobile-opened", "");
       searchModule.removeAttribute("mobile-closed");
+      searchFieldInput.focus();
       setTimeout(() => {
         searchModule.removeAttribute("aria-hidden");
       }, 400);
     }
     function closeSearch() {
+      searchModuleToggle.setAttribute("aria-expanded", "false");
+      searchModuleToggle.focus();
       searchModule.setAttribute("aria-hidden", "");
       searchModule.removeAttribute("mobile-opened", "");
       searchModule.setAttribute("mobile-closing", "");
@@ -77,7 +81,6 @@
         searchModule.setAttribute("mobile-closed", "");
         searchModule.removeAttribute("mobile-closing", "");
       }, { once: true });
-      searchModuleToggle.toggleAttribute("aria-expanded");
     }
     searchModuleToggle.addEventListener("click", function(e) {
       closeSubmenus();
@@ -125,6 +128,16 @@
         openMenu(HomegradeNavListContainer);
       }
     });
+    document.addEventListener("keydown", (e) => {
+      if (e.key === "Escape") {
+        if (isSearchOpen() === true) {
+          closeSearch();
+        }
+        if (isSubmenuOpen()) {
+          closeSubmenus();
+        }
+      }
+    });
   }
 
   // resources/js/app.js

resources/css/base/generalites.css

@@ -1,7 +1,11 @@
+body {
+  @apply bg-white antialiased;
+}
+
 a:focus,
 button:focus {
   outline: red solid 1px;
   @apply outline-1 outline-offset-8;
   outline-radius: 50px;
-  border-radius: 10px;
+  /* border-radius: 10px; */
 }

resources/css/layout/footer.css

@@ -16,13 +16,13 @@
   }
 
   &__infos-contact {
-    @apply col-span-1 grid gap-6;
+    @apply col-span-4 lg:col-span-1 grid gap-6;
     .external-link {
       @apply pt-2 mt-1;
     }
   }
   &__navigation-menu {
-    @apply col-span-3;
+    @apply col-span-4 lg:col-span-3;
     .footer-menu-renovateur {
       @apply flex gap-4 bg-secondary w-full justify-center items-end;
       .sub-menu {
@@ -39,10 +39,10 @@
     }
   }
   &__partenaires {
-    @apply flex col-span-2 justify-center items-center gap-12;
+    @apply flex flex-wrap col-span-4 md:col-span-2 justify-center items-center gap-12;
   }
 
   &__metiers-patrimoine {
-    @apply col-span-2;
+    @apply col-span-4 md:col-span-2;
   }
 }

resources/css/layout/header.css

@@ -4,6 +4,19 @@ header#main-header {
 	lg:flex-col;
 }
 
+.skiplinks {
+  @apply bg-primary pl-8;
+
+  &__link {
+    transition: margin 0.25s ease-in-out;
+    @apply text-white block w-fit  border-white rounded-md  px-4 overflow-hidden
+		max-h-0
+		focus:py-2
+		focus:border
+		focus:my-4
+		focus:max-h-12;
+  }
+}
 .sub-menu {
   @apply z-10;
 }

resources/css/layout/menu-homegrade.css

@@ -16,7 +16,7 @@
   .sub-menu[open] {
     display: block;
   }
-  li .sub-menu {
+  .sub-menu {
     @apply bg-primary 
        p-6
        mx-auto
@@ -26,9 +26,12 @@
     z-index: 999;
     display: none;
 
-    /* &.sub-menu--open {
+    &--closed {
-       display: block;
+      @apply hidden;
-     } */
+    }
+    &--open {
+      @apply block;
+    }
 
     li {
       @apply py-2 lg:text-left;
@@ -234,7 +237,7 @@
 }
 
 .menu-homegrade--footer {
-  @apply grid  grid-cols-4 gap-y-8 mt-8;
+  @apply grid sm:grid-cols-2 md:grid-cols-4 gap-y-8 mt-8;
 
   li.menu-item a {
     @apply hover:text-secondary;

resources/css/layout/menu-renovateur.css

@@ -1,6 +1,8 @@
 .menu-renovateur {
   @apply py-8 
-  px-16
+  px-4
+  sm:px-8
+  md:px-16
   relative
    shadow-md 
    flex
@@ -19,7 +21,6 @@
 
   &__navlist {
     @apply lg:flex 
-    bg-fuchsia-300
     justify-center
     relative;
 
@@ -177,6 +178,7 @@
     .page_icon {
       @apply w-[50px] h-[50px];
     }
+
     &__submenu-title {
       @apply pb-4 mb-4 border-b border-gray-dark;
     }
@@ -196,7 +198,7 @@
 }
 
 .menu-renovateur--footer {
-  @apply grid grid-cols-4;
+  @apply grid sm:grid-cols-2 lg:grid-cols-4 gap-y-4;
 
   li {
     .page_icon {

resources/js/header.js

@@ -16,7 +16,8 @@ export default function menuInit() {
   const submenuCloseBtns = header.querySelectorAll('.menu-item__submenu-close');
 
   function isSubmenuOpen() {
-    return header.querySelector('sub-menu-open') !== null;
+    // console.log(header.querySelector('.sub-menu--open') !== null);
+    return header.querySelector('.sub-menu--open') !== null;
   }
 
   function openSubmenu(buttonToggle) {
@@ -38,6 +39,7 @@ export default function menuInit() {
 
   function handleSubmenuToggle(buttonToggle) {
     let isExpanded = buttonToggle.getAttribute('aria-expanded') === 'true';
+
     if (!isExpanded) {
       closeSubmenus();
       openSubmenu(buttonToggle);
@@ -63,6 +65,7 @@ export default function menuInit() {
       if (isSearchOpen() === true) {
         closeSearch();
       }
+
       handleSubmenuToggle(button);
       // closeSearch();
     });
@@ -97,14 +100,18 @@ export default function menuInit() {
     return null;
   }
   function openSearch() {
-    searchModuleToggle.setAttribute('aria-expanded', '');
+    const searchFieldInput = header.querySelector('.search-module__search-form__input');
+    searchModuleToggle.setAttribute('aria-expanded', 'true');
     searchModule.setAttribute('mobile-opened', '');
     searchModule.removeAttribute('mobile-closed');
+    searchFieldInput.focus();
     setTimeout(() => {
       searchModule.removeAttribute('aria-hidden');
     }, 400);
   }
   function closeSearch() {
+    searchModuleToggle.setAttribute('aria-expanded', 'false');
+    searchModuleToggle.focus();
     searchModule.setAttribute('aria-hidden', '');
     searchModule.removeAttribute('mobile-opened', '');
 
@@ -122,8 +129,6 @@ export default function menuInit() {
     //   searchModule.setAttribute('mobile-closed', '');
     //   searchModule.removeAttribute('mobile-opened', '');
     // }, 50);
-
-    searchModuleToggle.toggleAttribute('aria-expanded');
   }
 
   // SEARCH TOGGLE open/close
@@ -210,4 +215,19 @@ export default function menuInit() {
       openMenu(HomegradeNavListContainer);
     }
   });
+
+  /* -----------------------------------------------------------
+	HANDLE ESCAPE KEY
+ -----------------------------------------------------------*/
+
+  document.addEventListener('keydown', (e) => {
+    if (e.key === 'Escape') {
+      if (isSearchOpen() === true) {
+        closeSearch();
+      }
+      if (isSubmenuOpen()) {
+        closeSubmenus();
+      }
+    }
+  });
 }

template-blocks/home/demarches-administratives/demarches-administratives.css

@@ -10,6 +10,8 @@
     transform: translate(-50%, -70%);
   }
   .card-large-content__links-container {
-    @apply grid-cols-4;
+    @apply grid-cols-1
+    md:grid-cols-2
+    lg:grid-cols-4;
   }
 }

template-blocks/home/demarches-administratives/demarches-administratives.php

@@ -2,9 +2,9 @@
 $block_titling = get_field('block_titling_description_datas');
 $demarches_administratives_links = get_field('demarches_administratives_links');
 
-echo '<pre>';
+// echo '<pre>';
 // print_r($demarches_administratives_links);
-echo '</pre>';
+// echo '</pre>';
 
 ?>
 

template-blocks/home/home-header/home-header.css

@@ -18,7 +18,7 @@
     lg:mb-0;
   }
   &__title {
-    @apply text-4xl font-medium pb-6 pt-16;
+    @apply text-3xl md:text-4xl font-medium pb-6 pt-16;
     line-height: 1.2;
   }
 

template-blocks/home/latest-news/latest-news.css

@@ -5,7 +5,9 @@
   }
   .articles_container {
     @apply grid 
-		grid-cols-4 
+		grid-cols-1 
+		sm:grid-cols-2 
+		xl:grid-cols-4 
 		max-w-screen-2xl 
 		px-8
 		py-16

template-blocks/home/questions-frequentes/questions-frequentes.css

@@ -3,5 +3,5 @@
 }
 
 .questions-frequentes-grid {
-  @apply grid grid-cols-3 gap-8 gap-x-8 max-w-screen-xl mx-auto;
+  @apply grid md:grid-cols-2 lg:grid-cols-3 gap-8 gap-x-8 max-w-screen-xl mx-auto;
 }

template-components/header/menu-renovateur.php

@@ -3,8 +3,11 @@ $menu_name = 'renovateur';
 $locations = get_nav_menu_locations();
 $menu = wp_get_nav_menu_object($locations[$menu_name]);
 $menuitems = wp_get_nav_menu_items($menu->term_id, array('order' => 'DESC'));
+$logoID = get_theme_mod('custom_logo');
+$logoSRC = wp_get_attachment_image_src($logoID, 'full');
+
 // echo '<pre>';
-// print_r($menuitems);
+// print_r($image);
 // echo '</pre>';
 ?>
 
@@ -13,26 +16,23 @@ $menuitems = wp_get_nav_menu_items($menu->term_id, array('order' => 'DESC'));
 
 	<div class="website_logo">
 		<?php if (has_custom_logo()) { ?>
-			<?php the_custom_logo(); ?>
+			<a href="<?php echo home_url() ?>" title="<?php echo __("Accueil Homegrade.brussels", "homegrade-theme__texte-fonctionnel") ?>" aria-label="<?php echo __("Accueil Homegrade.brussels", "homegrade-theme__texte-fonctionnel") ?>">
+				<img src="<?php echo $logoSRC[0] ?>" alt="">
+			</a>
+			<!-- <?php the_custom_logo(); ?> -->
 		<?php } else { ?>
 			<a href=" <?php echo get_bloginfo('url'); ?>" class="font-extrabold text-lg uppercase">
 				<?php echo get_bloginfo('name'); ?>
 			</a>
-
-			<p class="text-sm font-light text-gray-600">
-				<?php echo get_bloginfo('description'); ?>
-			</p>
-
 		<?php } ?>
 
 
-
 	</div>
 	<div class="menu-renovateur__interaction_toggles">
-		<button id="search-module-toggle" class="menu-renovateur__search-module-toggle cta cta--circular cta--outline cta--outline-secondary !border border-secondary " title="<?php echo __("Ouvrir la recherche", "homegrade-theme__texte-fonctionnel") ?>" aria-label="<?php echo __("Ouvrir la recherche", "homegrade-theme__texte-fonctionnel") ?>" aria-controls="search-module">
+		<button id="search-module-toggle" class="menu-renovateur__search-module-toggle cta cta--circular cta--outline cta--outline-secondary !border border-secondary " title="<?php echo __("Ouvrir la recherche", "homegrade-theme__texte-fonctionnel") ?>" aria-label="<?php echo __("Ouvrir la recherche", "homegrade-theme__texte-fonctionnel") ?>" aria-expanded="false">
 			<img src="<?php echo get_template_directory_uri() . '/resources/img/graphic-assets/search-icon.svg' ?>" alt="">
 		</button>
-		<button id="mobile-menu-toggle" class="menu-renovateur__mobile-menu-toggle cta cta--outline cta--button" data-text-open="<?php echo __("Menu", 'homegrade-theme__texte-fonctionnel') ?>" data-text-close="<?php echo __("Fermer", 'homegrade-theme__texte-fonctionnel') ?>" aria-label="<?php echo __("Ouvrir le menu", "homegrade-theme__texte-fonctionnel") ?>" aria-controls="menu-renovateur-navlist-container">
+		<button id="mobile-menu-toggle" class="menu-renovateur__mobile-menu-toggle cta cta--outline cta--button" data-text-open="<?php echo __("Menu", 'homegrade-theme__texte-fonctionnel') ?>" data-text-close="<?php echo __("Fermer", 'homegrade-theme__texte-fonctionnel') ?>" aria-label="<?php echo __("Ouvrir le menu", "homegrade-theme__texte-fonctionnel") ?>">
 			<span class="text-content">
 				<?php echo __("Menu", 'homegrade-theme__texte-fonctionnel') ?>
 			</span>
@@ -104,16 +104,16 @@ $menuitems = wp_get_nav_menu_items($menu->term_id, array('order' => 'DESC'));
 						<?php if (!$submenu) : $submenu = true; ?>
 							<div class="sub-menu sub-menu--closed" id="submenu-<?php echo $item->menu_item_parent ?>">
 
-								<button class="menu-item__submenu-close" id="submenu-toggle-<?php echo $item->menu_item_parent ?>" aria-label="<?php echo __("Fermer le sous-menu", "homegrade-theme__texte-fonctionnel") ?>" aria-controls="submenu-<?php echo $item->menu_item_parent ?>">
+								<button class="menu-item__submenu-close" id="submenu-toggle-<?php echo $item->menu_item_parent ?>" aria-label="<?php echo __("Fermer le sous-menu", "homegrade-theme__texte-fonctionnel") ?>" aria-expanded="true">
 									<img src="<?php echo get_template_directory_uri() . '/resources/img/graphic-assets/close_submenu_icon.svg' ?>" alt="">
 								</button>
 								<?php /* NOS CONSEILS — TAXONOMY SUBMENU TITLE */
 								if ($item->menu_item_parent === "168") : ?>
-									<h5 class="menu-item__submenu-title">Découvrez nos conseils par thématique</h5>
+									<h5 class="menu-item__submenu-title"><?php echo __('Découvrez nos conseils par thématique', 'homegrade-theme__texte-fonctionnel') ?></h5>
 								<?php endif; ?>
 								<?php /* AIDES FINANCIERES SUBMENU TITLE */
 								if ($item->menu_item_parent === "169") : ?>
-									<h5 class="menu-item__submenu-title">Quelles sont les aides financières disponibles pour votre logement ?</h5>
+									<h5 class="menu-item__submenu-title"><?php echo __('Quelles sont les aides financières disponibles pour votre logement ?', 'homegrade-theme__texte-fonctionnel') ?></h5>
 
 								<?php endif; ?>