From 2a5ab5c98b6131a4cb6dd4977010507480b96e53 Mon Sep 17 00:00:00 2001
From: Richard Doe <richard.doe@rwdit.net>
Date: Mon, 19 Feb 2024 10:20:59 +0000
Subject: [PATCH] refactor: catch keydown.escape from child component

---
 .../src/components/generic/AttributionToggle.vue | 16 ++++++----------
 .../components/generic/AttributionToggle.spec.js |  2 +-
 2 files changed, 7 insertions(+), 11 deletions(-)

diff --git a/packages/portal/src/components/generic/AttributionToggle.vue b/packages/portal/src/components/generic/AttributionToggle.vue
index 48c1988549..ee3a2d4633 100644
--- a/packages/portal/src/components/generic/AttributionToggle.vue
+++ b/packages/portal/src/components/generic/AttributionToggle.vue
@@ -27,6 +27,7 @@
       :set-focus="keyboardNav"
       extended
       data-qa="attribution"
+      @keydown.escape.native="handleCiteAttributionKeydownEscape"
     />
   </figcaption>
 </template>
@@ -64,17 +65,14 @@
     watch: {
       showCite(newVal) {
         if (newVal) {
-          window.addEventListener('keydown', this.handleWindowKeydown);
           window.addEventListener('focusin', this.handleWindowFocusin);
         } else {
-          window.removeEventListener('keydown', this.handleWindowKeydown);
           window.removeEventListener('focusin', this.handleWindowFocusin);
         }
       }
     },
 
     beforeDestroy() {
-      window.removeEventListener('keydown', this.handleWindowKeydown);
       window.removeEventListener('focusin', this.handleWindowFocusin);
     },
 
@@ -82,13 +80,11 @@
       toggleCite() {
         this.showCite = !this.showCite;
       },
-      handleWindowKeydown(event) {
-        if (event.key === 'Escape') {
-          this.toggleCite();
-          this.$nextTick(() => {
-            this.$refs.toggle.focus();
-          });
-        }
+      handleCiteAttributionKeydownEscape() {
+        this.toggleCite();
+        this.$nextTick(() => {
+          this.$refs.toggle.focus();
+        });
       },
       handleWindowFocusin(event) {
         // focus has changed, toggle the citation if not to a child element
diff --git a/packages/portal/tests/unit/components/generic/AttributionToggle.spec.js b/packages/portal/tests/unit/components/generic/AttributionToggle.spec.js
index 03dbffaf36..5850a37aef 100644
--- a/packages/portal/tests/unit/components/generic/AttributionToggle.spec.js
+++ b/packages/portal/tests/unit/components/generic/AttributionToggle.spec.js
@@ -94,7 +94,7 @@ describe('components/generic/AttributionToggle', () => {
 
         wrapper.find('[data-qa="toggle"]').trigger('click');
         await wrapper.vm.$nextTick();
-        window.dispatchEvent(new KeyboardEvent('keydown', { key: 'Escape' }));
+        wrapper.find('[data-qa="attribution"]').trigger('keydown.escape.native');
         await wrapper.vm.$nextTick();
 
         const attribution = wrapper.find('[data-qa="attribution"]');