From 1b8c30feab2acad8e1ba04d3a8f7cdf383fe9226 Mon Sep 17 00:00:00 2001
From: Ludo Segura <ludo.segura@shopify.com>
Date: Mon, 27 Mar 2023 17:39:47 -0400
Subject: [PATCH 1/5] fix header locales when trying to close dropdown

---
 assets/localization-form.js | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/assets/localization-form.js b/assets/localization-form.js
index bcb461d2f0f..b111638fe27 100644
--- a/assets/localization-form.js
+++ b/assets/localization-form.js
@@ -23,6 +23,7 @@ if (!customElements.get('localization-form')) {
       if (event.code.toUpperCase() !== 'ESCAPE') return;
 
       this.hidePanel();
+      event.stopPropagation();
       this.elements.button.focus();
     }
 
@@ -40,6 +41,7 @@ if (!customElements.get('localization-form')) {
     }
 
     closeSelector(event) {
+      console.log(event.relatedTarget)
       const isChild = this.elements.panel.contains(event.relatedTarget) || this.elements.button.contains(event.relatedTarget);
       if (!event.relatedTarget || !isChild) {
         this.hidePanel();

From 636e99fbed01d952a44022775dcd6b2da650d27e Mon Sep 17 00:00:00 2001
From: Ludo Segura <ludo.segura@shopify.com>
Date: Wed, 29 Mar 2023 15:51:15 -0400
Subject: [PATCH 2/5] testing solutions

---
 assets/localization-form.js           | 5 +++--
 snippets/country-localization.liquid  | 2 +-
 snippets/language-localization.liquid | 2 +-
 3 files changed, 5 insertions(+), 4 deletions(-)

diff --git a/assets/localization-form.js b/assets/localization-form.js
index b111638fe27..c90018c516f 100644
--- a/assets/localization-form.js
+++ b/assets/localization-form.js
@@ -8,7 +8,7 @@ if (!customElements.get('localization-form')) {
         panel: this.querySelector('.disclosure__list-wrapper'),
       };
       this.elements.button.addEventListener('click', this.openSelector.bind(this));
-      this.elements.button.addEventListener('focusout', this.closeSelector.bind(this));
+      this.addEventListener('focusout', this.closeSelector.bind(this));
       this.addEventListener('keyup', this.onContainerKeyUp.bind(this));
 
       this.querySelectorAll('a').forEach(item => item.addEventListener('click', this.onItemClick.bind(this)));
@@ -22,6 +22,7 @@ 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();
@@ -42,7 +43,7 @@ if (!customElements.get('localization-form')) {
 
     closeSelector(event) {
       console.log(event.relatedTarget)
-      const isChild = this.elements.panel.contains(event.relatedTarget) || this.elements.button.contains(event.relatedTarget);
+      const isChild = this.contains(event.relatedTarget);
       if (!event.relatedTarget || !isChild) {
         this.hidePanel();
       }
diff --git a/snippets/country-localization.liquid b/snippets/country-localization.liquid
index 2cef4f9596d..5e60f42d60b 100644
--- a/snippets/country-localization.liquid
+++ b/snippets/country-localization.liquid
@@ -19,7 +19,7 @@
     </span>
     {% render 'icon-caret' %}
   </button>
-  <div class="disclosure__list-wrapper" hidden>
+  <div class="disclosure__list-wrapper" hidden tabindex="0">
     <ul id="{{ localPosition }}List" role="list" class="disclosure__list list-unstyled">
       {%- for country in localization.available_countries -%}
         <li class="disclosure__item" tabindex="-1">
diff --git a/snippets/language-localization.liquid b/snippets/language-localization.liquid
index 40685845290..2eaf360ccd2 100644
--- a/snippets/language-localization.liquid
+++ b/snippets/language-localization.liquid
@@ -16,7 +16,7 @@
     <span>{{ localization.language.endonym_name | capitalize }}</span>
     {% render 'icon-caret' %}
   </button>
-  <div class="disclosure__list-wrapper" hidden>
+  <div class="disclosure__list-wrapper" hidden tabindex="0">
     <ul id="{{ localPosition }}List" role="list" class="disclosure__list list-unstyled">
       {%- for language in localization.available_languages -%}
         <li class="disclosure__item" tabindex="-1">

From f439347b724249fbd975ccf28c3f8cbca0d59fd6 Mon Sep 17 00:00:00 2001
From: Ludo Segura <ludo.segura@shopify.com>
Date: Thu, 30 Mar 2023 10:44:53 -0400
Subject: [PATCH 3/5] fix menu drawer not closing properly when ESC and changed
 approach to fix locale selectors

---
 assets/global.js                      | 2 ++
 assets/localization-form.js           | 5 ++---
 snippets/country-localization.liquid  | 2 +-
 snippets/header-drawer.liquid         | 2 +-
 snippets/language-localization.liquid | 2 +-
 5 files changed, 7 insertions(+), 6 deletions(-)

diff --git a/assets/global.js b/assets/global.js
index b19ec5a187b..d5def107fbc 100644
--- a/assets/global.js
+++ b/assets/global.js
@@ -398,6 +398,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 c90018c516f..7d50c7ddfda 100644
--- a/assets/localization-form.js
+++ b/assets/localization-form.js
@@ -8,7 +8,7 @@ if (!customElements.get('localization-form')) {
         panel: this.querySelector('.disclosure__list-wrapper'),
       };
       this.elements.button.addEventListener('click', this.openSelector.bind(this));
-      this.addEventListener('focusout', this.closeSelector.bind(this));
+      this.elements.button.addEventListener('focusout', this.closeSelector.bind(this));
       this.addEventListener('keyup', this.onContainerKeyUp.bind(this));
 
       this.querySelectorAll('a').forEach(item => item.addEventListener('click', this.onItemClick.bind(this)));
@@ -42,8 +42,7 @@ if (!customElements.get('localization-form')) {
     }
 
     closeSelector(event) {
-      console.log(event.relatedTarget)
-      const isChild = this.contains(event.relatedTarget);
+      const isChild = this.elements.panel.contains(event.relatedTarget) || this.elements.button.contains(event.relatedTarget);
       if (!event.relatedTarget || !isChild) {
         this.hidePanel();
       }
diff --git a/snippets/country-localization.liquid b/snippets/country-localization.liquid
index 5e60f42d60b..2cef4f9596d 100644
--- a/snippets/country-localization.liquid
+++ b/snippets/country-localization.liquid
@@ -19,7 +19,7 @@
     </span>
     {% render 'icon-caret' %}
   </button>
-  <div class="disclosure__list-wrapper" hidden tabindex="0">
+  <div class="disclosure__list-wrapper" hidden>
     <ul id="{{ localPosition }}List" role="list" class="disclosure__list list-unstyled">
       {%- for country in localization.available_countries -%}
         <li class="disclosure__item" tabindex="-1">
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">
diff --git a/snippets/language-localization.liquid b/snippets/language-localization.liquid
index 2eaf360ccd2..40685845290 100644
--- a/snippets/language-localization.liquid
+++ b/snippets/language-localization.liquid
@@ -16,7 +16,7 @@
     <span>{{ localization.language.endonym_name | capitalize }}</span>
     {% render 'icon-caret' %}
   </button>
-  <div class="disclosure__list-wrapper" hidden tabindex="0">
+  <div class="disclosure__list-wrapper" hidden>
     <ul id="{{ localPosition }}List" role="list" class="disclosure__list list-unstyled">
       {%- for language in localization.available_languages -%}
         <li class="disclosure__item" tabindex="-1">

From df6fa0ce35702e797baf7938b08f4ebfafc50b15 Mon Sep 17 00:00:00 2001
From: Ludo Segura <ludo.segura@shopify.com>
Date: Wed, 5 Apr 2023 16:37:52 -0400
Subject: [PATCH 4/5] Fix ESC on filter drawer, closing the whole thing instead
 of just a submenu

---
 assets/global.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/assets/global.js b/assets/global.js
index 2370a2ee83a..c00d833ee1f 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') || summary.closest('menu-drawer.mobile-facets__wrapper')) return;
   summary.parentElement.addEventListener('keyup', onKeyUpEscape);
 });
 

From bad3342bf3557ba75122e3496c7afd41fe63f4cd Mon Sep 17 00:00:00 2001
From: Ludo Segura <ludo.segura@shopify.com>
Date: Thu, 6 Apr 2023 12:20:42 -0400
Subject: [PATCH 5/5] address review comment

---
 assets/global.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/assets/global.js b/assets/global.js
index c00d833ee1f..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') || summary.closest('menu-drawer.mobile-facets__wrapper')) return;
+  if (summary.closest('header-drawer, menu-drawer')) return;
   summary.parentElement.addEventListener('keyup', onKeyUpEscape);
 });