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