fix(NcModal): fix focus-trap fallback

Signed-off-by: John Molakvoæ <skjnldsv@protonmail.com>

package.json

@@ -61,7 +61,7 @@
     "emoji-mart-vue-fast": "^15.0.0",
     "escape-html": "^1.0.3",
     "floating-vue": "^1.0.0-beta.19",
-    "focus-trap": "^7.1.0",
+    "focus-trap": "^7.4.3",
     "linkify-string": "^4.0.0",
     "md5": "^2.3.0",
     "node-polyfill-webpack-plugin": "^2.0.1",

src/components/NcModal/NcModal.vue

@@ -180,7 +180,8 @@ export default {
 			role="dialog"
 			aria-modal="true"
 			:aria-labelledby="'modal-name-' + randId"
-			:aria-describedby="'modal-description-' + randId">
+			:aria-describedby="'modal-description-' + randId"
+			tabindex="-1">
 			<!-- Header -->
 			<transition name="fade-visibility" appear>
 				<div class="modal-header">
@@ -707,11 +708,14 @@ export default {
 			// wait until all children are mounted and available in the DOM before focusTrap can be added
 			await this.$nextTick()
 
-			// Init focus trap
-			this.focusTrap = createFocusTrap(contentContainer, {
+			const options = {
 				allowOutsideClick: true,
+				fallbackFocus: contentContainer,
 				trapStack: getTrapStack(),
-			})
+			}
+
+			// Init focus trap
+			this.focusTrap = createFocusTrap(contentContainer, options)
 			this.focusTrap.activate()
 		},
 		clearFocusTrap() {