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" /> @@ -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"]');