feat: Escape to close the Popup

Author: ktquez

Diff for: src/components/Popup.vue

@@ -30,6 +30,7 @@
 <script>
 import { computed, inject } from 'vue'
 import useDisclosure from '@/composables/useDisclosure'
+import useEventListener from '@/composables/useEventListener'
 import { vueAxe } from '@/utils/constants'
 
 import PopupBody from '@/components/PopupBody'
@@ -62,13 +63,15 @@ export default {
 
   setup () {
     const { results } = inject(vueAxe)
-    const { isOpen, toggle: togglePopup } = useDisclosure()
+    const { isOpen, onClose, toggle: togglePopup } = useDisclosure()
 
     const issuesFound = computed(() => {
       if (!results.value.issuesFound) return 0
       return results.value.issuesFound
     })
 
+    useEventListener('keydown', e => (e.key === 'Escape' && isOpen.value) && onClose())
+
     return {
       isOpen,
       togglePopup,

Diff for: src/composables/useEventListener.js

@@ -0,0 +1,15 @@
+import { onMounted, onUnmounted, ref } from 'vue'
+
+export default function useEventListener (type, listener, options = {}, target) {
+  const eventOptions = { capture: false, ...options }
+  const el = ref(null)
+
+  onMounted(() => {
+    el.value = typeof target === 'string' ? document.querySelector(target) : window
+    el.value.addEventListener(type, listener, eventOptions)
+  })
+
+  onUnmounted(() => {
+    el.value.removeEventListener(type, listener, eventOptions)
+  })
+}