diff --git a/jest.config.js b/jest.config.js
index fde356dfda5..db267830187 100644
--- a/jest.config.js
+++ b/jest.config.js
@@ -59,6 +59,10 @@ module.exports = {
 		'vue',
 	],
 
+	moduleNameMapper: {
+		'\\.(css|scss)$': '<rootDir>/src/__mocks__/styles.js',
+	},
+
 	transform: {
 		// process `*.js` files with `babel-jest`
 		'.*\\.(js)$': 'babel-jest',
diff --git a/package-lock.json b/package-lock.json
index 01a5931cc5a..a3f564e77b5 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -20,7 +20,7 @@
 				"@nextcloud/moment": "^1.2.1",
 				"@nextcloud/paths": "^2.1.0",
 				"@nextcloud/router": "^2.0.1",
-				"@nextcloud/vue": "^7.6.1",
+				"@nextcloud/vue": "^7.7.1",
 				"@nextcloud/vue-richtext": "^2.0.4",
 				"attachmediastream": "^2.1.0",
 				"color.js": "^1.2.0",
@@ -3040,9 +3040,9 @@
 			}
 		},
 		"node_modules/@nextcloud/vue": {
-			"version": "7.6.1",
-			"resolved": "https://registry.npmjs.org/@nextcloud/vue/-/vue-7.6.1.tgz",
-			"integrity": "sha512-MKYn72BUR73iZWAYROGbT3Uf1ihlVBS/XxAqQOQEs9oqF4ULdCY0EA+xR43OzGpDOQdgWeW5wt9I59kcC3qbzw==",
+			"version": "7.7.1",
+			"resolved": "https://registry.npmjs.org/@nextcloud/vue/-/vue-7.7.1.tgz",
+			"integrity": "sha512-ORfJxNh80tb4wM5jWjUWiiNewa1aeKKE3VuG576KSMSAdQjZ/qYvnfBEJHgc+CBwln6qt5/Nh+jHlbVu484K0Q==",
 			"dependencies": {
 				"@floating-ui/dom": "^1.1.0",
 				"@nextcloud/auth": "^2.0.0",
@@ -3056,6 +3056,7 @@
 				"@nextcloud/l10n": "^2.0.1",
 				"@nextcloud/logger": "^2.2.1",
 				"@nextcloud/router": "^2.0.0",
+				"@nextcloud/vue-richtext": "^2.1.0-beta.5",
 				"@nextcloud/vue-select": "^3.21.2",
 				"@skjnldsv/sanitize-svg": "^1.0.2",
 				"debounce": "1.2.1",
@@ -3101,14 +3102,6 @@
 				"vue": "^2.7.8"
 			}
 		},
-		"node_modules/@nextcloud/vue-richtext/node_modules/clone": {
-			"version": "2.1.2",
-			"resolved": "https://registry.npmjs.org/clone/-/clone-2.1.2.tgz",
-			"integrity": "sha512-3Pe/CF1Nn94hyhIYpjtiLhdCoEoz0DqQ+988E9gmeEdQZlojxnOb74wctFyuwWQHzqyf9X7C7MG8juUpqBJT8w==",
-			"engines": {
-				"node": ">=0.8"
-			}
-		},
 		"node_modules/@nextcloud/vue-select": {
 			"version": "3.22.2",
 			"resolved": "https://registry.npmjs.org/@nextcloud/vue-select/-/vue-select-3.22.2.tgz",
@@ -3130,6 +3123,28 @@
 				"@floating-ui/core": "^1.0.5"
 			}
 		},
+		"node_modules/@nextcloud/vue/node_modules/@nextcloud/vue-richtext": {
+			"version": "2.1.0-beta.5",
+			"resolved": "https://registry.npmjs.org/@nextcloud/vue-richtext/-/vue-richtext-2.1.0-beta.5.tgz",
+			"integrity": "sha512-ivvP5AfjyQyhvqfFjJGkjwWFHtur3YaRHwatTYu0BWL3wDKoX9S1I6tb/GQphXB5jabMCTmdi7sPywAs9rwH4Q==",
+			"dependencies": {
+				"@nextcloud/axios": "^2.0.0",
+				"@nextcloud/event-bus": "^3.0.2",
+				"@nextcloud/initial-state": "^2.0.0",
+				"@nextcloud/router": "^2.0.0",
+				"@nextcloud/vue": "^7.5.0",
+				"clone": "^2.1.2",
+				"vue": "^2.7.8",
+				"vue-material-design-icons": "^5.1.2"
+			},
+			"engines": {
+				"node": ">=14.0.0",
+				"npm": ">=7.0.0"
+			},
+			"peerDependencies": {
+				"vue": "^2.7.8"
+			}
+		},
 		"node_modules/@nextcloud/vue/node_modules/ansi-regex": {
 			"version": "6.0.1",
 			"resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-6.0.1.tgz",
@@ -5635,6 +5650,14 @@
 				"wrap-ansi": "^7.0.0"
 			}
 		},
+		"node_modules/clone": {
+			"version": "2.1.2",
+			"resolved": "https://registry.npmjs.org/clone/-/clone-2.1.2.tgz",
+			"integrity": "sha512-3Pe/CF1Nn94hyhIYpjtiLhdCoEoz0DqQ+988E9gmeEdQZlojxnOb74wctFyuwWQHzqyf9X7C7MG8juUpqBJT8w==",
+			"engines": {
+				"node": ">=0.8"
+			}
+		},
 		"node_modules/clone-deep": {
 			"version": "4.0.1",
 			"resolved": "https://registry.npmjs.org/clone-deep/-/clone-deep-4.0.1.tgz",
@@ -21995,9 +22018,9 @@
 			}
 		},
 		"@nextcloud/vue": {
-			"version": "7.6.1",
-			"resolved": "https://registry.npmjs.org/@nextcloud/vue/-/vue-7.6.1.tgz",
-			"integrity": "sha512-MKYn72BUR73iZWAYROGbT3Uf1ihlVBS/XxAqQOQEs9oqF4ULdCY0EA+xR43OzGpDOQdgWeW5wt9I59kcC3qbzw==",
+			"version": "7.7.1",
+			"resolved": "https://registry.npmjs.org/@nextcloud/vue/-/vue-7.7.1.tgz",
+			"integrity": "sha512-ORfJxNh80tb4wM5jWjUWiiNewa1aeKKE3VuG576KSMSAdQjZ/qYvnfBEJHgc+CBwln6qt5/Nh+jHlbVu484K0Q==",
 			"requires": {
 				"@floating-ui/dom": "^1.1.0",
 				"@nextcloud/auth": "^2.0.0",
@@ -22011,6 +22034,7 @@
 				"@nextcloud/l10n": "^2.0.1",
 				"@nextcloud/logger": "^2.2.1",
 				"@nextcloud/router": "^2.0.0",
+				"@nextcloud/vue-richtext": "^2.1.0-beta.5",
 				"@nextcloud/vue-select": "^3.21.2",
 				"@skjnldsv/sanitize-svg": "^1.0.2",
 				"debounce": "1.2.1",
@@ -22047,6 +22071,21 @@
 						"@floating-ui/core": "^1.0.5"
 					}
 				},
+				"@nextcloud/vue-richtext": {
+					"version": "2.1.0-beta.5",
+					"resolved": "https://registry.npmjs.org/@nextcloud/vue-richtext/-/vue-richtext-2.1.0-beta.5.tgz",
+					"integrity": "sha512-ivvP5AfjyQyhvqfFjJGkjwWFHtur3YaRHwatTYu0BWL3wDKoX9S1I6tb/GQphXB5jabMCTmdi7sPywAs9rwH4Q==",
+					"requires": {
+						"@nextcloud/axios": "^2.0.0",
+						"@nextcloud/event-bus": "^3.0.2",
+						"@nextcloud/initial-state": "^2.0.0",
+						"@nextcloud/router": "^2.0.0",
+						"@nextcloud/vue": "^7.5.0",
+						"clone": "^2.1.2",
+						"vue": "^2.7.8",
+						"vue-material-design-icons": "^5.1.2"
+					}
+				},
 				"ansi-regex": {
 					"version": "6.0.1",
 					"resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-6.0.1.tgz",
@@ -22092,13 +22131,6 @@
 				"@nextcloud/router": "^2.0.0",
 				"clone": "^2.1.2",
 				"vue": "^2.7.8"
-			},
-			"dependencies": {
-				"clone": {
-					"version": "2.1.2",
-					"resolved": "https://registry.npmjs.org/clone/-/clone-2.1.2.tgz",
-					"integrity": "sha512-3Pe/CF1Nn94hyhIYpjtiLhdCoEoz0DqQ+988E9gmeEdQZlojxnOb74wctFyuwWQHzqyf9X7C7MG8juUpqBJT8w=="
-				}
 			}
 		},
 		"@nextcloud/vue-select": {
@@ -24054,6 +24086,11 @@
 				"wrap-ansi": "^7.0.0"
 			}
 		},
+		"clone": {
+			"version": "2.1.2",
+			"resolved": "https://registry.npmjs.org/clone/-/clone-2.1.2.tgz",
+			"integrity": "sha512-3Pe/CF1Nn94hyhIYpjtiLhdCoEoz0DqQ+988E9gmeEdQZlojxnOb74wctFyuwWQHzqyf9X7C7MG8juUpqBJT8w=="
+		},
 		"clone-deep": {
 			"version": "4.0.1",
 			"resolved": "https://registry.npmjs.org/clone-deep/-/clone-deep-4.0.1.tgz",
diff --git a/package.json b/package.json
index ddf04bc7103..e7c183c031e 100644
--- a/package.json
+++ b/package.json
@@ -28,7 +28,7 @@
 		"@nextcloud/moment": "^1.2.1",
 		"@nextcloud/paths": "^2.1.0",
 		"@nextcloud/router": "^2.0.1",
-		"@nextcloud/vue": "^7.6.1",
+		"@nextcloud/vue": "^7.7.1",
 		"@nextcloud/vue-richtext": "^2.0.4",
 		"attachmediastream": "^2.1.0",
 		"color.js": "^1.2.0",
diff --git a/src/__mocks__/styles.js b/src/__mocks__/styles.js
new file mode 100644
index 00000000000..4ba52ba2c8d
--- /dev/null
+++ b/src/__mocks__/styles.js
@@ -0,0 +1 @@
+module.exports = {}
diff --git a/src/__mocks__/tabbable.js b/src/__mocks__/tabbable.js
new file mode 100644
index 00000000000..c7d1bc1541f
--- /dev/null
+++ b/src/__mocks__/tabbable.js
@@ -0,0 +1,12 @@
+// https://github.com/focus-trap/tabbable#testing-in-jsdom
+const lib = jest.requireActual('tabbable')
+
+const tabbable = {
+	...lib,
+	tabbable: (node, options) => lib.tabbable(node, { ...options, displayCheck: 'none' }),
+	focusable: (node, options) => lib.focusable(node, { ...options, displayCheck: 'none' }),
+	isFocusable: (node, options) => lib.isFocusable(node, { ...options, displayCheck: 'none' }),
+	isTabbable: (node, options) => lib.isTabbable(node, { ...options, displayCheck: 'none' }),
+}
+
+module.exports = tabbable