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

@@ -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>
+```

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>

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',