From 93078bf859a46c15e16169d8e3295c7085895005 Mon Sep 17 00:00:00 2001
From: Ludo <ludo.segura@shopify.com>
Date: Thu, 6 Apr 2023 12:36:44 -0400
Subject: [PATCH] [Header drawer] fix header locales closing dropdown too soon
 and ESC behaviour (#2472)

---
 assets/global.js              | 4 +++-
 assets/localization-form.js   | 2 ++
 snippets/header-drawer.liquid | 2 +-
 3 files changed, 6 insertions(+), 2 deletions(-)

diff --git a/assets/global.js b/assets/global.js
index 301f2b7412a..38423dc1867 100644
--- a/assets/global.js
+++ b/assets/global.js
@@ -18,7 +18,7 @@ document.querySelectorAll('[id^="Details-"] summary').forEach((summary) => {
     event.currentTarget.setAttribute('aria-expanded', !event.currentTarget.closest('details').hasAttribute('open'));
   });
 
-  if (summary.closest('header-drawer')) return;
+  if (summary.closest('header-drawer, menu-drawer')) return;
   summary.parentElement.addEventListener('keyup', onKeyUpEscape);
 });
 
@@ -418,6 +418,8 @@ class MenuDrawer extends HTMLElement {
     document.body.classList.remove(`overflow-hidden-${this.dataset.breakpoint}`);
     removeTrapFocus(elementToFocus);
     this.closeAnimation(this.mainDetailsToggle);
+
+    if (event instanceof KeyboardEvent) elementToFocus?.setAttribute('aria-expanded', false);
   }
 
   onFocusOut() {
diff --git a/assets/localization-form.js b/assets/localization-form.js
index 50461ebb31c..8f8e9f8d161 100644
--- a/assets/localization-form.js
+++ b/assets/localization-form.js
@@ -24,7 +24,9 @@ if (!customElements.get('localization-form')) {
       onContainerKeyUp(event) {
         if (event.code.toUpperCase() !== 'ESCAPE') return;
 
+        if(this.elements.button.getAttribute('aria-expanded') == 'false') return;
         this.hidePanel();
+        event.stopPropagation();
         this.elements.button.focus();
       }
 
diff --git a/snippets/header-drawer.liquid b/snippets/header-drawer.liquid
index 82493fd4c4b..87f84d1d8a3 100644
--- a/snippets/header-drawer.liquid
+++ b/snippets/header-drawer.liquid
@@ -16,7 +16,7 @@
         {% render 'icon-close' %}
       </span>
     </summary>
-    <div id="menu-drawer" class="gradient menu-drawer motion-reduce" tabindex="-1">
+    <div id="menu-drawer" class="gradient menu-drawer motion-reduce">
       <div class="menu-drawer__inner-container">
         <div class="menu-drawer__navigation-container">
           <nav class="menu-drawer__navigation">