refactor: catch keydown.escape from child component

europeana · Feb 19, 2024 · 2a5ab5c · 2a5ab5c
1 parent fa2a8a1
commit 2a5ab5c
Show file tree

Hide file tree

Showing 2 changed files with 7 additions and 11 deletions.
diff --git 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,31 +65,26 @@
     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);
     },
 
     methods: {
       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
@@ -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"]');