[Header drawer] fix header locales closing dropdown too soon and ESC …

…behaviour (Shopify#2472)
inovikov78 · Apr 6, 2023 · 93078bf · 93078bf
1 parent 2ff714f
commit 93078bf
Show file tree

Hide file tree

Showing 3 changed files with 6 additions and 2 deletions.
diff --git 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
@@ -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
@@ -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">