From 10be366d1742d71dc0c670f5529acbd38f255dbc Mon Sep 17 00:00:00 2001
From: Nick Adams <nickolas.j.adams@gmail.com>
Date: Sat, 15 Jul 2023 02:56:15 -0600
Subject: [PATCH] feat(modal-property): additional exit functionality (#169)

fix(accessibility): aria-label the close button for screenreaders
docs: adds an example and escapable info section to documentation
---
 docs/components/modal.md                      | 28 ++++++++++++++++++-
 .../modal/examples/ModalEscapableExample.vue  | 13 +++++++++
 .../modal/examples/ModalExample.vue           |  6 +++-
 src/components/Modal/Modal.vue                | 23 +++++++++++++--
 4 files changed, 65 insertions(+), 5 deletions(-)
 create mode 100644 docs/components/modal/examples/ModalEscapableExample.vue

diff --git a/docs/components/modal.md b/docs/components/modal.md
index ade6627..b098539 100644
--- a/docs/components/modal.md
+++ b/docs/components/modal.md
@@ -1,6 +1,7 @@
 <script setup>
 import ModalExample from './modal/examples/ModalExample.vue';
 import ModalSizeExample from './modal/examples/ModalSizeExample.vue';
+import ModalEscapableExample from './modal/examples/ModalEscapableExample.vue';
 </script>
 # Vue Modal - Flowbite
 
@@ -53,7 +54,7 @@ function showModal() {
 </template>
 ```
 
-## Sizes
+## Size
 
 You can use four different modal sizing options starting from small to extra large, but keep in mind that the width of these modals will remain the same when browsing on smaller devices.
 
@@ -75,3 +76,28 @@ import { Modal } from 'flowbite-vue'
     <Modal size="5xl" />
 </template>
 ```
+
+## Escapable
+
+The escapable property is true by default to improve user experience and accessibility.
+
+This means that you may close the modal by
+
+ - Using the close button on the modal
+ - Clicking outside of the modal
+ - Pressing the escape key
+
+In some situations, your user may be required to interact with the modal content. If this is the case, you can set the `escapable` property to false. The developer can then choose when they want to close the modal.
+
+Demo:
+<ModalEscapableExample/>
+
+```vue
+<script setup>
+import { Modal } from 'flowbite-vue'
+</script>
+<template>
+    <Modal />
+    <Modal :escapable="false" />
+</template>
+```
diff --git a/docs/components/modal/examples/ModalEscapableExample.vue b/docs/components/modal/examples/ModalEscapableExample.vue
new file mode 100644
index 0000000..bf5f58b
--- /dev/null
+++ b/docs/components/modal/examples/ModalEscapableExample.vue
@@ -0,0 +1,13 @@
+<template>
+  <div class="vp-raw flex justify-start space-x-2">
+    <span>
+      <ModalExample trigger-text="Escapable" />
+    </span>
+    <span>
+      <ModalExample :escapable="false" trigger-text="Not Escapable" />
+    </span>
+  </div>
+</template>
+<script setup>
+import ModalExample from './ModalExample.vue'
+</script>
diff --git a/docs/components/modal/examples/ModalExample.vue b/docs/components/modal/examples/ModalExample.vue
index 699141c..ff5a911 100644
--- a/docs/components/modal/examples/ModalExample.vue
+++ b/docs/components/modal/examples/ModalExample.vue
@@ -3,7 +3,7 @@
     <button @click="showModal" type="button" class="mt-5 text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800">
       {{ triggerText }}
     </button>
-    <Modal :size="size" v-if="isShowModal" @close="closeModal">
+    <Modal :escapable="escapable" :size="size" v-if="isShowModal" @close="closeModal">
       <template #header>
         <div class="flex items-center text-lg">
           Terms of Service
@@ -59,6 +59,10 @@ defineProps({
     type: String as PropType<ModalSize>,
     default: '2xl',
   },
+  escapable: {
+    type: Boolean,
+    default: true,
+  },
   triggerText: {
     type: String,
     default: 'Demo Modal',
diff --git a/src/components/Modal/Modal.vue b/src/components/Modal/Modal.vue
index 7714163..5b91768 100644
--- a/src/components/Modal/Modal.vue
+++ b/src/components/Modal/Modal.vue
@@ -4,14 +4,19 @@
     <div
         tabindex="-1"
         class="overflow-y-auto overflow-x-hidden fixed top-0 right-0 left-0 z-50 w-full md:inset-0 h-modal md:h-full justify-center items-center flex"
+        v-on="escapable ? { click: closeModal } : {}"
     >
-      <div class="relative p-4 w-full h-full md:h-auto" :class="`${modalSizeClasses[size]}`">
+      <div 
+          @click.stop
+          class="relative p-4 w-full h-full md:h-auto" 
+          :class="`${modalSizeClasses[size]}`"
+      >
         <!-- Modal content -->
         <div class="relative bg-white rounded-lg shadow dark:bg-gray-700">
           <!-- Modal header -->
           <div class="p-4 rounded-t flex justify-between items-center" :class="$slots.header ? 'border-b border-gray-200 dark:border-gray-600' : ''">
             <slot name="header" />
-            <button @click="closeModal" type="button" class="text-gray-400 bg-transparent hover:bg-gray-200 hover:text-gray-900 rounded-lg text-sm p-1.5 ml-auto inline-flex items-center dark:hover:bg-gray-600 dark:hover:text-white">
+            <button v-if="escapable" @click="closeModal" aria-label="close" type="button" class="text-gray-400 bg-transparent hover:bg-gray-200 hover:text-gray-900 rounded-lg text-sm p-1.5 ml-auto inline-flex items-center dark:hover:bg-gray-600 dark:hover:text-white">
               <slot name="close-icon">
                 <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>
               </slot>
@@ -34,7 +39,7 @@
 import type { PropType } from 'vue'
 import type { ModalSize, ModalPosition } from './types'
 
-defineProps({
+const props = defineProps({
   children: {
     type: Array,
     default() {
@@ -53,6 +58,10 @@ defineProps({
     type: String as PropType<ModalSize>,
     default: '2xl',
   },
+  escapable: {
+    type: Boolean,
+    default: true
+  },
 })
 const emit = defineEmits(['close'])
 const modalSizeClasses = {
@@ -72,4 +81,12 @@ const modalSizeClasses = {
 function closeModal() {
   emit('close')
 }
+
+addEventListener("keyup", function(e) {
+  if (props.escapable) {
+    if (e.key === "Escape") {
+      closeModal();
+    }
+  }
+})
 </script>