Merge pull request #367 from wazeerc/feature/modal-focustrap

Add focus trap functionality to modal component

Author: Sqrcz

docs/components/modal.md

@@ -4,6 +4,7 @@ import FwbModalExampleSize from './modal/examples/FwbModalExampleSize.vue'
 import FwbModalExampleEscapable from './modal/examples/FwbModalExampleEscapable.vue'
 import FwbModalExamplePersistent from './modal/examples/FwbModalExamplePersistent.vue'
 import FwbModalExamplePosition from './modal/examples/FwbModalExamplePosition.vue'
+import FwbModalExampleFocusTrap from './modal/examples/FwbModalExampleFocusTrap.vue'
 </script>
 # Vue Modal - Flowbite
 
@@ -158,15 +159,33 @@ import { FwbModal } from 'flowbite-vue'
 </script>
 ```
 
+## Focus Trap
+
+You can enable focus trapping by setting the `focus-trap` prop to `true`. This keeps the focus within the modal, preventing users from tabbing to elements outside of it, which improves accessibility.
+
+<fwb-modal-example-focus-trap />
+```vue
+<template>
+  <fwb-modal />
+  <fwb-modal focus-trap />
+</template>
+
+<script setup>
+import { FwbModal } from 'flowbite-vue'
+</script>
+```
+
 ## API
 
 ### Props:
 
-| Name         | Values                                                    | Default |
-|--------------|-----------------------------------------------------------|---------|
-| size         | `md`,`lg`, `xl`, `2xl`, `3xl`, `4xl`, `5xl`, `6xl`, `7xl` | 2xl     |
-| notEscapable | `true`, `false`                                           | `false` |
-| persistent   | `true`, `false`                                           | `true`  |
+| Name         | Values                                                                                                                            | Default |
+|--------------|-----------------------------------------------------------------------------------------------------------------------------------|---------|
+| size         | `xs`, `sm`, `md`,`lg`, `xl`, `2xl`, `3xl`, `4xl`, `5xl`, `6xl`, `7xl`                                                               | `2xl`   |
+| position     | `top-start`, `top-center`, `top-end`, `center-start`, `center`, `center-end`, `bottom-start`, `bottom-center`, `bottom-end` | `center`|
+| notEscapable | `true`, `false`                                                                                                                   | `false` |
+| persistent   | `true`, `false`                                                                                                                   | `false` |
+| focusTrap    | `true`, `false`                                                                                                                   | `false` |
 
 ### Events:
 | Name            | Type                                                                             |

docs/components/modal/examples/FwbModalExample.vue

@@ -9,6 +9,7 @@
       :persistent="persistent"
       :size="size"
       :position="position"
+      :focus-trap="focusTrap"
       @close="closeModal"
     >
       <template #header>
@@ -56,6 +57,7 @@ interface ModalProps {
   persistent?: boolean
   triggerText?: string
   position?: ModalPosition
+  focusTrap?: boolean
 }
 
 withDefaults(defineProps<ModalProps>(), {
@@ -64,6 +66,7 @@ withDefaults(defineProps<ModalProps>(), {
   persistent: false,
   triggerText: 'Open Modal',
   position: 'center',
+  focusTrap: false,
 })
 
 const isShowModal = ref(false)

docs/components/modal/examples/FwbModalExampleFocusTrap.vue

@@ -0,0 +1,15 @@
+<template>
+  <div class="vp-raw flex justify-start space-x-2">
+    <fwb-modal-example
+      trigger-text="Without Focus Trap"
+    />
+    <fwb-modal-example
+      focus-trap
+      trigger-text="With Focus Trap"
+    />
+  </div>
+</template>
+
+<script lang="ts" setup>
+import FwbModalExample from './FwbModalExample.vue'
+</script>

package-lock.json

@@ -69,6 +69,7 @@
     "@tailwindcss/postcss": "^4.0.14",
     "@tailwindcss/vite": "^4.0.14",
     "@vueuse/core": "12.8.2",
+    "@vueuse/integrations": "^13.1.0",
     "classnames": "2.5.1",
     "floating-vue": "^5.2.2",
     "flowbite": "3.1.2",

package.json

@@ -62,7 +62,8 @@
 </template>
 
 <script lang="ts" setup>
-import { onMounted, ref, type Ref } from 'vue'
+import { useFocusTrap } from '@vueuse/integrations/useFocusTrap'
+import { nextTick, onBeforeUnmount, onMounted, ref, type Ref } from 'vue'
 
 import type { ModalPosition, ModalSize } from './types'
 
@@ -71,13 +72,15 @@ interface ModalProps {
   persistent?: boolean
   size?: ModalSize
   position?: ModalPosition
+  focusTrap?: boolean
 }
 
 const props = withDefaults(defineProps<ModalProps>(), {
   notEscapable: false,
   persistent: false,
   size: '2xl',
   position: 'center',
+  focusTrap: false,
 })
 
 const emit = defineEmits(['close', 'click:outside'])
@@ -120,10 +123,23 @@ function clickOutside () {
 function closeWithEsc () {
   if (!props.notEscapable && !props.persistent) closeModal()
 }
+
 const modalRef: Ref<HTMLElement | null> = ref(null)
-onMounted(() => {
+const { activate, deactivate } = useFocusTrap(modalRef, {
+  immediate: false,
+  initialFocus: () => modalRef.value?.querySelector('button[aria-label="close"]') || modalRef.value,
+})
+
+onMounted(async () => {
   if (modalRef.value) {
-    modalRef.value.focus()
+    if (props.focusTrap) {
+      await nextTick()
+      activate()
+    }
   }
 })
+
+onBeforeUnmount(() => {
+  deactivate()
+})
 </script>