From 6e90ec832ce80d87a0bc099f4cc7dd1f004ff37e Mon Sep 17 00:00:00 2001
From: NFriedo <69233063+NFriedo@users.noreply.github.com>
Date: Wed, 4 Dec 2024 09:35:19 +0100
Subject: [PATCH 01/27] add vueuse focus trap

---
 package-lock.json | 252 ++++++++++++++++++++++++++++++++++------------
 package.json      |   3 +-
 2 files changed, 189 insertions(+), 66 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index b9d080c85e..03bde2c9f2 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -14,6 +14,7 @@
 				"@vuelidate/validators": "^2.0.4",
 				"@vueuse/components": "^10.11.0",
 				"@vueuse/core": "^10.11.0",
+				"@vueuse/integrations": "^12.0.0",
 				"axios": "^1.7.4",
 				"cross-env": "^7.0.3",
 				"dayjs": "^1.11.10",
@@ -32,7 +33,7 @@
 				"vue-router": "^4.2.4",
 				"vue3-mq": "^3.1.3",
 				"vuedraggable": "^4.1.0",
-				"vuetify": "^3.7.1",
+				"vuetify": "^3.7.5",
 				"vuex": "^4.0.2"
 			},
 			"devDependencies": {
@@ -4483,53 +4484,53 @@
 			}
 		},
 		"node_modules/@vue/compiler-core": {
-			"version": "3.5.11",
-			"resolved": "https://registry.npmjs.org/@vue/compiler-core/-/compiler-core-3.5.11.tgz",
-			"integrity": "sha512-PwAdxs7/9Hc3ieBO12tXzmTD+Ln4qhT/56S+8DvrrZ4kLDn4Z/AMUr8tXJD0axiJBS0RKIoNaR0yMuQB9v9Udg==",
+			"version": "3.5.13",
+			"resolved": "https://registry.npmjs.org/@vue/compiler-core/-/compiler-core-3.5.13.tgz",
+			"integrity": "sha512-oOdAkwqUfW1WqpwSYJce06wvt6HljgY3fGeM9NcVA1HaYOij3mZG9Rkysn0OHuyUAGMbEbARIpsG+LPVlBJ5/Q==",
 			"license": "MIT",
 			"dependencies": {
 				"@babel/parser": "^7.25.3",
-				"@vue/shared": "3.5.11",
+				"@vue/shared": "3.5.13",
 				"entities": "^4.5.0",
 				"estree-walker": "^2.0.2",
 				"source-map-js": "^1.2.0"
 			}
 		},
 		"node_modules/@vue/compiler-dom": {
-			"version": "3.5.11",
-			"resolved": "https://registry.npmjs.org/@vue/compiler-dom/-/compiler-dom-3.5.11.tgz",
-			"integrity": "sha512-pyGf8zdbDDRkBrEzf8p7BQlMKNNF5Fk/Cf/fQ6PiUz9at4OaUfyXW0dGJTo2Vl1f5U9jSLCNf0EZJEogLXoeew==",
+			"version": "3.5.13",
+			"resolved": "https://registry.npmjs.org/@vue/compiler-dom/-/compiler-dom-3.5.13.tgz",
+			"integrity": "sha512-ZOJ46sMOKUjO3e94wPdCzQ6P1Lx/vhp2RSvfaab88Ajexs0AHeV0uasYhi99WPaogmBlRHNRuly8xV75cNTMDA==",
 			"license": "MIT",
 			"dependencies": {
-				"@vue/compiler-core": "3.5.11",
-				"@vue/shared": "3.5.11"
+				"@vue/compiler-core": "3.5.13",
+				"@vue/shared": "3.5.13"
 			}
 		},
 		"node_modules/@vue/compiler-sfc": {
-			"version": "3.5.11",
-			"resolved": "https://registry.npmjs.org/@vue/compiler-sfc/-/compiler-sfc-3.5.11.tgz",
-			"integrity": "sha512-gsbBtT4N9ANXXepprle+X9YLg2htQk1sqH/qGJ/EApl+dgpUBdTv3yP7YlR535uHZY3n6XaR0/bKo0BgwwDniw==",
+			"version": "3.5.13",
+			"resolved": "https://registry.npmjs.org/@vue/compiler-sfc/-/compiler-sfc-3.5.13.tgz",
+			"integrity": "sha512-6VdaljMpD82w6c2749Zhf5T9u5uLBWKnVue6XWxprDobftnletJ8+oel7sexFfM3qIxNmVE7LSFGTpv6obNyaQ==",
 			"license": "MIT",
 			"dependencies": {
 				"@babel/parser": "^7.25.3",
-				"@vue/compiler-core": "3.5.11",
-				"@vue/compiler-dom": "3.5.11",
-				"@vue/compiler-ssr": "3.5.11",
-				"@vue/shared": "3.5.11",
+				"@vue/compiler-core": "3.5.13",
+				"@vue/compiler-dom": "3.5.13",
+				"@vue/compiler-ssr": "3.5.13",
+				"@vue/shared": "3.5.13",
 				"estree-walker": "^2.0.2",
 				"magic-string": "^0.30.11",
-				"postcss": "^8.4.47",
+				"postcss": "^8.4.48",
 				"source-map-js": "^1.2.0"
 			}
 		},
 		"node_modules/@vue/compiler-ssr": {
-			"version": "3.5.11",
-			"resolved": "https://registry.npmjs.org/@vue/compiler-ssr/-/compiler-ssr-3.5.11.tgz",
-			"integrity": "sha512-P4+GPjOuC2aFTk1Z4WANvEhyOykcvEd5bIj2KVNGKGfM745LaXGr++5njpdBTzVz5pZifdlR1kpYSJJpIlSePA==",
+			"version": "3.5.13",
+			"resolved": "https://registry.npmjs.org/@vue/compiler-ssr/-/compiler-ssr-3.5.13.tgz",
+			"integrity": "sha512-wMH6vrYHxQl/IybKJagqbquvxpWCuVYpoUJfCqFZwa/JY1GdATAQ+TgVtgrwwMZ0D07QhA99rs/EAAWfvG6KpA==",
 			"license": "MIT",
 			"dependencies": {
-				"@vue/compiler-dom": "3.5.11",
-				"@vue/shared": "3.5.11"
+				"@vue/compiler-dom": "3.5.13",
+				"@vue/shared": "3.5.13"
 			}
 		},
 		"node_modules/@vue/devtools-api": {
@@ -4565,53 +4566,53 @@
 			}
 		},
 		"node_modules/@vue/reactivity": {
-			"version": "3.5.11",
-			"resolved": "https://registry.npmjs.org/@vue/reactivity/-/reactivity-3.5.11.tgz",
-			"integrity": "sha512-Nqo5VZEn8MJWlCce8XoyVqHZbd5P2NH+yuAaFzuNSR96I+y1cnuUiq7xfSG+kyvLSiWmaHTKP1r3OZY4mMD50w==",
+			"version": "3.5.13",
+			"resolved": "https://registry.npmjs.org/@vue/reactivity/-/reactivity-3.5.13.tgz",
+			"integrity": "sha512-NaCwtw8o48B9I6L1zl2p41OHo/2Z4wqYGGIK1Khu5T7yxrn+ATOixn/Udn2m+6kZKB/J7cuT9DbWWhRxqixACg==",
 			"license": "MIT",
 			"dependencies": {
-				"@vue/shared": "3.5.11"
+				"@vue/shared": "3.5.13"
 			}
 		},
 		"node_modules/@vue/runtime-core": {
-			"version": "3.5.11",
-			"resolved": "https://registry.npmjs.org/@vue/runtime-core/-/runtime-core-3.5.11.tgz",
-			"integrity": "sha512-7PsxFGqwfDhfhh0OcDWBG1DaIQIVOLgkwA5q6MtkPiDFjp5gohVnJEahSktwSFLq7R5PtxDKy6WKURVN1UDbzA==",
+			"version": "3.5.13",
+			"resolved": "https://registry.npmjs.org/@vue/runtime-core/-/runtime-core-3.5.13.tgz",
+			"integrity": "sha512-Fj4YRQ3Az0WTZw1sFe+QDb0aXCerigEpw418pw1HBUKFtnQHWzwojaukAs2X/c9DQz4MQ4bsXTGlcpGxU/RCIw==",
 			"license": "MIT",
 			"dependencies": {
-				"@vue/reactivity": "3.5.11",
-				"@vue/shared": "3.5.11"
+				"@vue/reactivity": "3.5.13",
+				"@vue/shared": "3.5.13"
 			}
 		},
 		"node_modules/@vue/runtime-dom": {
-			"version": "3.5.11",
-			"resolved": "https://registry.npmjs.org/@vue/runtime-dom/-/runtime-dom-3.5.11.tgz",
-			"integrity": "sha512-GNghjecT6IrGf0UhuYmpgaOlN7kxzQBhxWEn08c/SQDxv1yy4IXI1bn81JgEpQ4IXjRxWtPyI8x0/7TF5rPfYQ==",
+			"version": "3.5.13",
+			"resolved": "https://registry.npmjs.org/@vue/runtime-dom/-/runtime-dom-3.5.13.tgz",
+			"integrity": "sha512-dLaj94s93NYLqjLiyFzVs9X6dWhTdAlEAciC3Moq7gzAc13VJUdCnjjRurNM6uTLFATRHexHCTu/Xp3eW6yoog==",
 			"license": "MIT",
 			"dependencies": {
-				"@vue/reactivity": "3.5.11",
-				"@vue/runtime-core": "3.5.11",
-				"@vue/shared": "3.5.11",
+				"@vue/reactivity": "3.5.13",
+				"@vue/runtime-core": "3.5.13",
+				"@vue/shared": "3.5.13",
 				"csstype": "^3.1.3"
 			}
 		},
 		"node_modules/@vue/server-renderer": {
-			"version": "3.5.11",
-			"resolved": "https://registry.npmjs.org/@vue/server-renderer/-/server-renderer-3.5.11.tgz",
-			"integrity": "sha512-cVOwYBxR7Wb1B1FoxYvtjJD8X/9E5nlH4VSkJy2uMA1MzYNdzAAB//l8nrmN9py/4aP+3NjWukf9PZ3TeWULaA==",
+			"version": "3.5.13",
+			"resolved": "https://registry.npmjs.org/@vue/server-renderer/-/server-renderer-3.5.13.tgz",
+			"integrity": "sha512-wAi4IRJV/2SAW3htkTlB+dHeRmpTiVIK1OGLWV1yeStVSebSQQOwGwIq0D3ZIoBj2C2qpgz5+vX9iEBkTdk5YA==",
 			"license": "MIT",
 			"dependencies": {
-				"@vue/compiler-ssr": "3.5.11",
-				"@vue/shared": "3.5.11"
+				"@vue/compiler-ssr": "3.5.13",
+				"@vue/shared": "3.5.13"
 			},
 			"peerDependencies": {
-				"vue": "3.5.11"
+				"vue": "3.5.13"
 			}
 		},
 		"node_modules/@vue/shared": {
-			"version": "3.5.11",
-			"resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.5.11.tgz",
-			"integrity": "sha512-W8GgysJVnFo81FthhzurdRAWP/byq3q2qIw70e0JWblzVhjgOMiC2GyovXrZTFQJnFVryYaKGP3Tc9vYzYm6PQ==",
+			"version": "3.5.13",
+			"resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.5.13.tgz",
+			"integrity": "sha512-/hnE/qP5ZoGpol0a5mDi45bOd7t3tjYJBjsgCsivow7D48cJeV5l05RD82lPqi7gRiphZM37rnhW1l6ZoCNNnQ==",
 			"license": "MIT"
 		},
 		"node_modules/@vue/test-utils": {
@@ -4790,6 +4791,108 @@
 				"url": "https://github.com/sponsors/antfu"
 			}
 		},
+		"node_modules/@vueuse/integrations": {
+			"version": "12.0.0",
+			"resolved": "https://registry.npmjs.org/@vueuse/integrations/-/integrations-12.0.0.tgz",
+			"integrity": "sha512-M16fkVp+i4je75I7uvifMbJKHFrjx2+0LuHEH9++iPJ11zc4SRy5NdRN0z2NR+a54eQ5Gs2Ds7pby5ST96zxCA==",
+			"license": "MIT",
+			"dependencies": {
+				"@vueuse/core": "12.0.0",
+				"@vueuse/shared": "12.0.0",
+				"vue": "^3.5.13"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/antfu"
+			},
+			"peerDependencies": {
+				"async-validator": "^4",
+				"axios": "^1",
+				"change-case": "^5",
+				"drauu": "^0.4",
+				"focus-trap": "^7",
+				"fuse.js": "^7",
+				"idb-keyval": "^6",
+				"jwt-decode": "^4",
+				"nprogress": "^0.2",
+				"qrcode": "^1.5",
+				"sortablejs": "^1",
+				"universal-cookie": "^7"
+			},
+			"peerDependenciesMeta": {
+				"async-validator": {
+					"optional": true
+				},
+				"axios": {
+					"optional": true
+				},
+				"change-case": {
+					"optional": true
+				},
+				"drauu": {
+					"optional": true
+				},
+				"focus-trap": {
+					"optional": true
+				},
+				"fuse.js": {
+					"optional": true
+				},
+				"idb-keyval": {
+					"optional": true
+				},
+				"jwt-decode": {
+					"optional": true
+				},
+				"nprogress": {
+					"optional": true
+				},
+				"qrcode": {
+					"optional": true
+				},
+				"sortablejs": {
+					"optional": true
+				},
+				"universal-cookie": {
+					"optional": true
+				}
+			}
+		},
+		"node_modules/@vueuse/integrations/node_modules/@vueuse/core": {
+			"version": "12.0.0",
+			"resolved": "https://registry.npmjs.org/@vueuse/core/-/core-12.0.0.tgz",
+			"integrity": "sha512-C12RukhXiJCbx4MGhjmd/gH52TjJsc3G0E0kQj/kb19H3Nt6n1CA4DRWuTdWWcaFRdlTe0npWDS942mvacvNBw==",
+			"license": "MIT",
+			"dependencies": {
+				"@types/web-bluetooth": "^0.0.20",
+				"@vueuse/metadata": "12.0.0",
+				"@vueuse/shared": "12.0.0",
+				"vue": "^3.5.13"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/antfu"
+			}
+		},
+		"node_modules/@vueuse/integrations/node_modules/@vueuse/metadata": {
+			"version": "12.0.0",
+			"resolved": "https://registry.npmjs.org/@vueuse/metadata/-/metadata-12.0.0.tgz",
+			"integrity": "sha512-Yzimd1D3sjxTDOlF05HekU5aSGdKjxhuhRFHA7gDWLn57PRbBIh+SF5NmjhJ0WRgF3my7T8LBucyxdFJjIfRJQ==",
+			"license": "MIT",
+			"funding": {
+				"url": "https://github.com/sponsors/antfu"
+			}
+		},
+		"node_modules/@vueuse/integrations/node_modules/@vueuse/shared": {
+			"version": "12.0.0",
+			"resolved": "https://registry.npmjs.org/@vueuse/shared/-/shared-12.0.0.tgz",
+			"integrity": "sha512-3i6qtcq2PIio5i/vVYidkkcgvmTjCqrf26u+Fd4LhnbBmIT6FN8y6q/GJERp8lfcB9zVEfjdV0Br0443qZuJpw==",
+			"license": "MIT",
+			"dependencies": {
+				"vue": "^3.5.13"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/antfu"
+			}
+		},
 		"node_modules/@vueuse/metadata": {
 			"version": "10.11.1",
 			"resolved": "https://registry.npmjs.org/@vueuse/metadata/-/metadata-10.11.1.tgz",
@@ -8618,6 +8721,17 @@
 			"dev": true,
 			"license": "ISC"
 		},
+		"node_modules/focus-trap": {
+			"version": "7.6.2",
+			"resolved": "https://registry.npmjs.org/focus-trap/-/focus-trap-7.6.2.tgz",
+			"integrity": "sha512-9FhUxK1hVju2+AiQIDJ5Dd//9R2n2RAfJ0qfhF4IHGHgcoEUTMpbTeG/zbEuwaiYXfuAH6XE0/aCyxDdRM+W5w==",
+			"license": "MIT",
+			"optional": true,
+			"peer": true,
+			"dependencies": {
+				"tabbable": "^6.2.0"
+			}
+		},
 		"node_modules/follow-redirects": {
 			"version": "1.15.9",
 			"resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.9.tgz",
@@ -13654,9 +13768,9 @@
 			"license": "MIT"
 		},
 		"node_modules/picocolors": {
-			"version": "1.1.0",
-			"resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.1.0.tgz",
-			"integrity": "sha512-TQ92mBOW0l3LeMeyLV6mzy/kWr8lkd/hp3mTg7wYK7zJhuBStmGMBG0BdeDZS/dZx1IukaX6Bk11zcln25o1Aw==",
+			"version": "1.1.1",
+			"resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.1.1.tgz",
+			"integrity": "sha512-xceH2snhtb5M9liqDsmEw56le376mTZkEX/jEb/RxNFyegNul7eNslCXP9FDj/Lcu0X8KEyMceP2ntpaHrDEVA==",
 			"license": "ISC"
 		},
 		"node_modules/picomatch": {
@@ -13825,9 +13939,9 @@
 			}
 		},
 		"node_modules/postcss": {
-			"version": "8.4.47",
-			"resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.47.tgz",
-			"integrity": "sha512-56rxCq7G/XfB4EkXq9Egn5GCqugWvDFjafDOThIdMBsI15iqPqR5r15TfSr1YPYeEI19YeaXMCbY6u88Y76GLQ==",
+			"version": "8.4.49",
+			"resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.49.tgz",
+			"integrity": "sha512-OCVPnIObs4N29kxTjzLfUryOkvZEq+pf8jTF0lg8E7uETuWHA+v7j3c/xJmiqpX450191LlmZfUKkXxkTry7nA==",
 			"funding": [
 				{
 					"type": "opencollective",
@@ -13845,7 +13959,7 @@
 			"license": "MIT",
 			"dependencies": {
 				"nanoid": "^3.3.7",
-				"picocolors": "^1.1.0",
+				"picocolors": "^1.1.1",
 				"source-map-js": "^1.2.1"
 			},
 			"engines": {
@@ -15452,6 +15566,14 @@
 				"url": "https://opencollective.com/unts"
 			}
 		},
+		"node_modules/tabbable": {
+			"version": "6.2.0",
+			"resolved": "https://registry.npmjs.org/tabbable/-/tabbable-6.2.0.tgz",
+			"integrity": "sha512-Cat63mxsVJlzYvN51JmVXIgNoUokrIaT2zLclCXjRd8boZ0004U4KCs/sToJ75C6sdlByWxpYnb5Boif1VSFew==",
+			"license": "MIT",
+			"optional": true,
+			"peer": true
+		},
 		"node_modules/tapable": {
 			"version": "2.2.1",
 			"resolved": "https://registry.npmjs.org/tapable/-/tapable-2.2.1.tgz",
@@ -16412,16 +16534,16 @@
 			}
 		},
 		"node_modules/vue": {
-			"version": "3.5.11",
-			"resolved": "https://registry.npmjs.org/vue/-/vue-3.5.11.tgz",
-			"integrity": "sha512-/8Wurrd9J3lb72FTQS7gRMNQD4nztTtKPmuDuPuhqXmmpD6+skVjAeahNpVzsuky6Sy9gy7wn8UadqPtt9SQIg==",
+			"version": "3.5.13",
+			"resolved": "https://registry.npmjs.org/vue/-/vue-3.5.13.tgz",
+			"integrity": "sha512-wmeiSMxkZCSc+PM2w2VRsOYAZC8GdipNFRTsLSfodVqI9mbejKeXEGr8SckuLnrQPGe3oJN5c3K0vpoU9q/wCQ==",
 			"license": "MIT",
 			"dependencies": {
-				"@vue/compiler-dom": "3.5.11",
-				"@vue/compiler-sfc": "3.5.11",
-				"@vue/runtime-dom": "3.5.11",
-				"@vue/server-renderer": "3.5.11",
-				"@vue/shared": "3.5.11"
+				"@vue/compiler-dom": "3.5.13",
+				"@vue/compiler-sfc": "3.5.13",
+				"@vue/runtime-dom": "3.5.13",
+				"@vue/server-renderer": "3.5.13",
+				"@vue/shared": "3.5.13"
 			},
 			"peerDependencies": {
 				"typescript": "*"
@@ -16737,9 +16859,9 @@
 			"license": "MIT"
 		},
 		"node_modules/vuetify": {
-			"version": "3.7.2",
-			"resolved": "https://registry.npmjs.org/vuetify/-/vuetify-3.7.2.tgz",
-			"integrity": "sha512-q0WTcRG977+a9Dqhb8TOaPm+Xmvj0oVhnBJhAdHWFSov3HhHTTxlH2nXP/GBTXZuuMHDbBeIWFuUR2/1Fx0PPw==",
+			"version": "3.7.5",
+			"resolved": "https://registry.npmjs.org/vuetify/-/vuetify-3.7.5.tgz",
+			"integrity": "sha512-5aiSz8WJyGzYe3yfgDbzxsFATwHvKtdvFAaUJEDTx7xRv55s3YiOho/MFhs5iTbmh2VT4ToRgP0imBUP660UOw==",
 			"license": "MIT",
 			"engines": {
 				"node": "^12.20 || >=14.13"
diff --git a/package.json b/package.json
index ed84f3b7dd..ffd8f69e7e 100644
--- a/package.json
+++ b/package.json
@@ -24,6 +24,7 @@
 		"@vuelidate/validators": "^2.0.4",
 		"@vueuse/components": "^10.11.0",
 		"@vueuse/core": "^10.11.0",
+		"@vueuse/integrations": "^12.0.0",
 		"axios": "^1.7.4",
 		"cross-env": "^7.0.3",
 		"dayjs": "^1.11.10",
@@ -42,7 +43,7 @@
 		"vue-router": "^4.2.4",
 		"vue3-mq": "^3.1.3",
 		"vuedraggable": "^4.1.0",
-		"vuetify": "^3.7.1",
+		"vuetify": "^3.7.5",
 		"vuex": "^4.0.2"
 	},
 	"devDependencies": {

From 7dc4c0bed833118043bbbd2436ee36cfadfb4bd2 Mon Sep 17 00:00:00 2001
From: NFriedo <69233063+NFriedo@users.noreply.github.com>
Date: Wed, 4 Dec 2024 09:35:39 +0100
Subject: [PATCH 02/27] close dialog with esc

---
 src/modules/page/room/RoomMembers.page.vue | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/modules/page/room/RoomMembers.page.vue b/src/modules/page/room/RoomMembers.page.vue
index 5e149ee83a..e3ea19c2d2 100644
--- a/src/modules/page/room/RoomMembers.page.vue
+++ b/src/modules/page/room/RoomMembers.page.vue
@@ -40,6 +40,7 @@
 			data-testid="dialog-add-participants"
 			max-width="480"
 			persistent
+			@keydown.esc="isMembersDialogOpen = false"
 		>
 			<AddMembers
 				:memberList="potentialRoomMembers"

From 0bf0afe69944ec990b19a1d0288b1c0f1ec54422 Mon Sep 17 00:00:00 2001
From: NFriedo <69233063+NFriedo@users.noreply.github.com>
Date: Wed, 4 Dec 2024 09:38:45 +0100
Subject: [PATCH 03/27] add focus trap for add members dialog

---
 .../feature/room/RoomMembers/AddMembers.vue     | 17 ++++++++++++++++-
 1 file changed, 16 insertions(+), 1 deletion(-)

diff --git a/src/modules/feature/room/RoomMembers/AddMembers.vue b/src/modules/feature/room/RoomMembers/AddMembers.vue
index 7a300dd8c0..b5adb5eff0 100644
--- a/src/modules/feature/room/RoomMembers/AddMembers.vue
+++ b/src/modules/feature/room/RoomMembers/AddMembers.vue
@@ -1,5 +1,5 @@
 <template>
-	<v-card>
+	<v-card ref="addMembersContent">
 		<template v-slot:prepend>
 			<div ref="textTitle" class="text-h4 mt-2">
 				{{ t("pages.rooms.members.add") }}
@@ -19,6 +19,7 @@
 						:items="schoolList"
 						:label="t('global.sidebar.item.school')"
 						@update:model-value="onSchoolChange"
+						@update:menu="onAutocompleteToggle"
 					/>
 				</div>
 
@@ -34,6 +35,7 @@
 						:items="roles"
 						:label="t('common.labels.role')"
 						@update:model-value="onRoleChange"
+						@update:menu="onAutocompleteToggle"
 					/>
 				</div>
 
@@ -51,6 +53,7 @@
 						:items="memberList"
 						:label="t('common.labels.name')"
 						:no-data-text="t('common.nodata')"
+						@update:menu="onAutocompleteToggle"
 					/>
 				</div>
 			</div>
@@ -86,6 +89,7 @@ import { useI18n } from "vue-i18n";
 import { PropType, ref, toRef } from "vue";
 import { RoleName, SchoolForExternalInviteResponse } from "@/serverApi/v3";
 import { RoomMember } from "@data-room";
+import { useFocusTrap } from "@vueuse/integrations/useFocusTrap";
 
 const props = defineProps({
 	memberList: {
@@ -125,5 +129,16 @@ const onAddMembers = () => {
 	emit("close");
 };
 
+const onAutocompleteToggle = (open: boolean) => {
+	if (open) {
+		pause();
+	} else {
+		unpause();
+	}
+};
+
 const onClose = () => emit("close");
+
+const addMembersContent = ref();
+const { pause, unpause } = useFocusTrap(addMembersContent, { immediate: true });
 </script>

From 528e8aeeeed973859fb57beac8309c8b142b4071 Mon Sep 17 00:00:00 2001
From: NFriedo <69233063+NFriedo@users.noreply.github.com>
Date: Wed, 4 Dec 2024 09:41:46 +0100
Subject: [PATCH 04/27] WIP: add focus trap remove dialog

---
 src/components/organisms/vCustomDialog.vue | 146 +++++++++++----------
 1 file changed, 75 insertions(+), 71 deletions(-)

diff --git a/src/components/organisms/vCustomDialog.vue b/src/components/organisms/vCustomDialog.vue
index 8e503755e0..042a91fc27 100644
--- a/src/components/organisms/vCustomDialog.vue
+++ b/src/components/organisms/vCustomDialog.vue
@@ -6,81 +6,85 @@
 		@click:outside="closeDialog"
 		@keydown.esc="closeDialog"
 	>
-		<v-card :ripple="false">
-			<v-card-title data-testid="dialog-title" class="dialog-title px-6 pt-4">
-				<slot name="title" />
-			</v-card-title>
-			<v-card-text class="text--primary">
-				<slot name="content" />
-			</v-card-text>
-			<v-card-actions v-if="hasButtons" class="action-buttons px-6">
-				<div class="button-section button-left">
-					<v-btn
-						v-if="checkButtons('back')"
-						data-testid="dialog-back"
-						variant="outlined"
-						@click="$emit('back')"
-					>
-						{{ $t("common.actions.back") }}
-					</v-btn>
-					<v-btn
-						v-if="checkButtons('edit')"
-						data-testid="dialog-edit"
-						variant="flat"
-						@click="$emit('dialog-edit')"
-					>
-						{{ $t("common.actions.edit") }}
-					</v-btn>
-				</div>
-				<v-spacer />
-				<div class="button-section button-right">
-					<v-btn
-						v-if="checkButtons('cancel')"
-						data-testid="dialog-cancel"
-						class="dialog-closed"
-						variant="text"
-						@click="cancelDialog"
-					>
-						{{ $t("common.actions.cancel") }}
-					</v-btn>
-					<v-btn
-						v-if="checkButtons('confirm')"
-						data-testid="dialog-confirm"
-						class="dialog-confirmed px-6"
-						color="primary"
-						variant="flat"
-						:disabled="confirmBtnDisabled"
-						@click="confirmDialog"
-					>
-						<v-icon v-if="confirmBtnIcon" size="small" class="mr-1">
-							{{ confirmBtnIcon }}
-						</v-icon>
-						{{ $t(confirmBtnTitleKey) }}
-					</v-btn>
-					<v-btn
-						v-if="checkButtons('close')"
-						data-testid="dialog-close"
-						variant="outlined"
-						@click="closeDialog"
-					>
-						{{ $t("common.labels.close") }}
-					</v-btn>
-					<v-btn
-						v-if="checkButtons('next')"
-						data-testid="dialog-next"
-						color="primary"
-						variant="flat"
-						:disabled="nextBtnDisabled"
-						@click="$emit('next')"
-						>{{ $t(nextBtnTitleKey) }}
-					</v-btn>
-				</div>
-			</v-card-actions>
-		</v-card>
+		<!-- ToDo: think about this focus trap if there could be problem to do it here -->
+		<UseFocusTrap>
+			<v-card :ripple="false">
+				<v-card-title data-testid="dialog-title" class="dialog-title px-6 pt-4">
+					<slot name="title" />
+				</v-card-title>
+				<v-card-text class="text--primary">
+					<slot name="content" />
+				</v-card-text>
+				<v-card-actions v-if="hasButtons" class="action-buttons px-6">
+					<div class="button-section button-left">
+						<v-btn
+							v-if="checkButtons('back')"
+							data-testid="dialog-back"
+							variant="outlined"
+							@click="$emit('back')"
+						>
+							{{ $t("common.actions.back") }}
+						</v-btn>
+						<v-btn
+							v-if="checkButtons('edit')"
+							data-testid="dialog-edit"
+							variant="flat"
+							@click="$emit('dialog-edit')"
+						>
+							{{ $t("common.actions.edit") }}
+						</v-btn>
+					</div>
+					<v-spacer />
+					<div class="button-section button-right">
+						<v-btn
+							v-if="checkButtons('cancel')"
+							data-testid="dialog-cancel"
+							class="dialog-closed"
+							variant="text"
+							@click="cancelDialog"
+						>
+							{{ $t("common.actions.cancel") }}
+						</v-btn>
+						<v-btn
+							v-if="checkButtons('confirm')"
+							data-testid="dialog-confirm"
+							class="dialog-confirmed px-6"
+							color="primary"
+							variant="flat"
+							:disabled="confirmBtnDisabled"
+							@click="confirmDialog"
+						>
+							<v-icon v-if="confirmBtnIcon" size="small" class="mr-1">
+								{{ confirmBtnIcon }}
+							</v-icon>
+							{{ $t(confirmBtnTitleKey) }}
+						</v-btn>
+						<v-btn
+							v-if="checkButtons('close')"
+							data-testid="dialog-close"
+							variant="outlined"
+							@click="closeDialog"
+						>
+							{{ $t("common.labels.close") }}
+						</v-btn>
+						<v-btn
+							v-if="checkButtons('next')"
+							data-testid="dialog-next"
+							color="primary"
+							variant="flat"
+							:disabled="nextBtnDisabled"
+							@click="$emit('next')"
+							>{{ $t(nextBtnTitleKey) }}
+						</v-btn>
+					</div>
+				</v-card-actions>
+			</v-card>
+		</UseFocusTrap>
 	</v-dialog>
 </template>
 
 <script setup lang="ts">
+import { UseFocusTrap } from "@vueuse/integrations/useFocusTrap/component";
 import { ModelRef, PropType } from "vue";
 
 const props = defineProps({

From 6ec5504434ebbc428fe7eee84f1a4d2411b015df Mon Sep 17 00:00:00 2001
From: NFriedo <69233063+NFriedo@users.noreply.github.com>
Date: Thu, 5 Dec 2024 17:59:24 +0100
Subject: [PATCH 05/27] add todos, remove focus trap from custom dialog

---
 src/components/organisms/vCustomDialog.vue    | 146 +++++++++---------
 .../ConfirmationDialog.vue                    |   1 +
 2 files changed, 72 insertions(+), 75 deletions(-)

diff --git a/src/components/organisms/vCustomDialog.vue b/src/components/organisms/vCustomDialog.vue
index 042a91fc27..8e503755e0 100644
--- a/src/components/organisms/vCustomDialog.vue
+++ b/src/components/organisms/vCustomDialog.vue
@@ -6,85 +6,81 @@
 		@click:outside="closeDialog"
 		@keydown.esc="closeDialog"
 	>
-		<!-- ToDo: think about this focus trap if there could be problem to do it here -->
-		<UseFocusTrap>
-			<v-card :ripple="false">
-				<v-card-title data-testid="dialog-title" class="dialog-title px-6 pt-4">
-					<slot name="title" />
-				</v-card-title>
-				<v-card-text class="text--primary">
-					<slot name="content" />
-				</v-card-text>
-				<v-card-actions v-if="hasButtons" class="action-buttons px-6">
-					<div class="button-section button-left">
-						<v-btn
-							v-if="checkButtons('back')"
-							data-testid="dialog-back"
-							variant="outlined"
-							@click="$emit('back')"
-						>
-							{{ $t("common.actions.back") }}
-						</v-btn>
-						<v-btn
-							v-if="checkButtons('edit')"
-							data-testid="dialog-edit"
-							variant="flat"
-							@click="$emit('dialog-edit')"
-						>
-							{{ $t("common.actions.edit") }}
-						</v-btn>
-					</div>
-					<v-spacer />
-					<div class="button-section button-right">
-						<v-btn
-							v-if="checkButtons('cancel')"
-							data-testid="dialog-cancel"
-							class="dialog-closed"
-							variant="text"
-							@click="cancelDialog"
-						>
-							{{ $t("common.actions.cancel") }}
-						</v-btn>
-						<v-btn
-							v-if="checkButtons('confirm')"
-							data-testid="dialog-confirm"
-							class="dialog-confirmed px-6"
-							color="primary"
-							variant="flat"
-							:disabled="confirmBtnDisabled"
-							@click="confirmDialog"
-						>
-							<v-icon v-if="confirmBtnIcon" size="small" class="mr-1">
-								{{ confirmBtnIcon }}
-							</v-icon>
-							{{ $t(confirmBtnTitleKey) }}
-						</v-btn>
-						<v-btn
-							v-if="checkButtons('close')"
-							data-testid="dialog-close"
-							variant="outlined"
-							@click="closeDialog"
-						>
-							{{ $t("common.labels.close") }}
-						</v-btn>
-						<v-btn
-							v-if="checkButtons('next')"
-							data-testid="dialog-next"
-							color="primary"
-							variant="flat"
-							:disabled="nextBtnDisabled"
-							@click="$emit('next')"
-							>{{ $t(nextBtnTitleKey) }}
-						</v-btn>
-					</div>
-				</v-card-actions>
-			</v-card>
-		</UseFocusTrap>
+		<v-card :ripple="false">
+			<v-card-title data-testid="dialog-title" class="dialog-title px-6 pt-4">
+				<slot name="title" />
+			</v-card-title>
+			<v-card-text class="text--primary">
+				<slot name="content" />
+			</v-card-text>
+			<v-card-actions v-if="hasButtons" class="action-buttons px-6">
+				<div class="button-section button-left">
+					<v-btn
+						v-if="checkButtons('back')"
+						data-testid="dialog-back"
+						variant="outlined"
+						@click="$emit('back')"
+					>
+						{{ $t("common.actions.back") }}
+					</v-btn>
+					<v-btn
+						v-if="checkButtons('edit')"
+						data-testid="dialog-edit"
+						variant="flat"
+						@click="$emit('dialog-edit')"
+					>
+						{{ $t("common.actions.edit") }}
+					</v-btn>
+				</div>
+				<v-spacer />
+				<div class="button-section button-right">
+					<v-btn
+						v-if="checkButtons('cancel')"
+						data-testid="dialog-cancel"
+						class="dialog-closed"
+						variant="text"
+						@click="cancelDialog"
+					>
+						{{ $t("common.actions.cancel") }}
+					</v-btn>
+					<v-btn
+						v-if="checkButtons('confirm')"
+						data-testid="dialog-confirm"
+						class="dialog-confirmed px-6"
+						color="primary"
+						variant="flat"
+						:disabled="confirmBtnDisabled"
+						@click="confirmDialog"
+					>
+						<v-icon v-if="confirmBtnIcon" size="small" class="mr-1">
+							{{ confirmBtnIcon }}
+						</v-icon>
+						{{ $t(confirmBtnTitleKey) }}
+					</v-btn>
+					<v-btn
+						v-if="checkButtons('close')"
+						data-testid="dialog-close"
+						variant="outlined"
+						@click="closeDialog"
+					>
+						{{ $t("common.labels.close") }}
+					</v-btn>
+					<v-btn
+						v-if="checkButtons('next')"
+						data-testid="dialog-next"
+						color="primary"
+						variant="flat"
+						:disabled="nextBtnDisabled"
+						@click="$emit('next')"
+						>{{ $t(nextBtnTitleKey) }}
+					</v-btn>
+				</div>
+			</v-card-actions>
+		</v-card>
 	</v-dialog>
 </template>
 
 <script setup lang="ts">
-import { UseFocusTrap } from "@vueuse/integrations/useFocusTrap/component";
 import { ModelRef, PropType } from "vue";
 
 const props = defineProps({
diff --git a/src/modules/ui/confirmation-dialog/ConfirmationDialog.vue b/src/modules/ui/confirmation-dialog/ConfirmationDialog.vue
index c6b5aee9d8..2e23c466c9 100644
--- a/src/modules/ui/confirmation-dialog/ConfirmationDialog.vue
+++ b/src/modules/ui/confirmation-dialog/ConfirmationDialog.vue
@@ -1,4 +1,5 @@
 <template>
+	<!-- ToDo: replace vCustomDialog with v-dailog, use component <UseFocusTrap>  -->
 	<vCustomDialog
 		data-testid="delete-dialog-item"
 		has-buttons

From 7a08ca6f7ae6a93be3f02ff581d0cfe6c8162280 Mon Sep 17 00:00:00 2001
From: NFriedo <69233063+NFriedo@users.noreply.github.com>
Date: Wed, 11 Dec 2024 10:44:02 +0100
Subject: [PATCH 06/27] use onDialogClose

---
 src/modules/page/room/RoomMembers.page.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/modules/page/room/RoomMembers.page.vue b/src/modules/page/room/RoomMembers.page.vue
index fa2b3c4fff..7514d42281 100644
--- a/src/modules/page/room/RoomMembers.page.vue
+++ b/src/modules/page/room/RoomMembers.page.vue
@@ -38,7 +38,7 @@
 			data-testid="dialog-add-participants"
 			max-width="480"
 			persistent
-			@keydown.esc="isMembersDialogOpen = false"
+			@keydown.esc="onDialogClose"
 		>
 			<AddMembers
 				:memberList="potentialRoomMembers"

From 9f71f848ce917ae0861a6b9d233e0c012918b50b Mon Sep 17 00:00:00 2001
From: NFriedo <69233063+NFriedo@users.noreply.github.com>
Date: Wed, 11 Dec 2024 16:50:30 +0100
Subject: [PATCH 07/27] add name for actions table header

---
 src/locales/de.ts                                         | 1 +
 src/locales/en.ts                                         | 1 +
 src/locales/es.ts                                         | 1 +
 src/locales/uk.ts                                         | 1 +
 src/modules/feature/room/RoomMembers/MembersTable.unit.ts | 2 +-
 src/modules/feature/room/RoomMembers/MembersTable.vue     | 7 ++++++-
 6 files changed, 11 insertions(+), 2 deletions(-)

diff --git a/src/locales/de.ts b/src/locales/de.ts
index 93aa56be06..22d1c2ebf2 100644
--- a/src/locales/de.ts
+++ b/src/locales/de.ts
@@ -1712,6 +1712,7 @@ export default {
 		"Mehrere Teilnehmer aus dem Raum entfernen",
 	"pages.rooms.members.remove.confirmation":
 		"{memberName} wirklich aus dem Raum entfernen?",
+	"pages.rooms.members.tableHeader.actions": "Aktionen",
 	"pages.rooms.members.multipleRemove.confirmation":
 		"Ausgewählte Teilnehmende wirklich aus dem Raum entfernen?",
 	"pages.rooms.members.roles.editor": "Raumeditor",
diff --git a/src/locales/en.ts b/src/locales/en.ts
index 4e0c95d93b..da43dacbb9 100644
--- a/src/locales/en.ts
+++ b/src/locales/en.ts
@@ -1685,6 +1685,7 @@ export default {
 		"Remove selected participants from the room?",
 	"pages.rooms.members.roles.editor": "Room editor",
 	"pages.rooms.members.roles.viewer": "Room viewer",
+	"pages.rooms.members.tableHeader.actions": "Actions",
 	"pages.rooms.title": "Rooms",
 	"pages.taskCard.addElement": "Add element",
 	"pages.taskCard.deleteElement.text":
diff --git a/src/locales/es.ts b/src/locales/es.ts
index e7e9c76c7d..e34dee9ad7 100644
--- a/src/locales/es.ts
+++ b/src/locales/es.ts
@@ -1734,6 +1734,7 @@ export default {
 		"¿Eliminar participantes seleccionadas de la sala?",
 	"pages.rooms.members.roles.editor": "Editor de salas",
 	"pages.rooms.members.roles.viewer": "Visor de salas",
+	"pages.rooms.members.tableHeader.actions": "Acciones",
 	"pages.rooms.title": "Salas",
 	"pages.taskCard.addElement": "Añadir artículo",
 	"pages.taskCard.deleteElement.text":
diff --git a/src/locales/uk.ts b/src/locales/uk.ts
index 7f754142b3..025d48fb5d 100644
--- a/src/locales/uk.ts
+++ b/src/locales/uk.ts
@@ -1713,6 +1713,7 @@ export default {
 		"Видалити вибраних учасників із кімнати?",
 	"pages.rooms.members.roles.editor": "Редактор кімнати",
 	"pages.rooms.members.roles.viewer": "Переглядач кімнати",
+	"pages.rooms.members.tableHeader.actions": "Дії",
 	"pages.rooms.title": "Кімнати",
 	"pages.taskCard.addElement": "Додати елемент",
 	"pages.taskCard.deleteElement.text":
diff --git a/src/modules/feature/room/RoomMembers/MembersTable.unit.ts b/src/modules/feature/room/RoomMembers/MembersTable.unit.ts
index a0da092c36..62818ee8db 100644
--- a/src/modules/feature/room/RoomMembers/MembersTable.unit.ts
+++ b/src/modules/feature/room/RoomMembers/MembersTable.unit.ts
@@ -33,7 +33,7 @@ describe("MembersTable", () => {
 		"common.labels.lastName",
 		"common.labels.role",
 		"common.words.mainSchool",
-		"",
+		"pages.rooms.members.tableHeader.actions",
 	];
 
 	const setup = () => {
diff --git a/src/modules/feature/room/RoomMembers/MembersTable.vue b/src/modules/feature/room/RoomMembers/MembersTable.vue
index d8ba934427..2d7d287c55 100644
--- a/src/modules/feature/room/RoomMembers/MembersTable.vue
+++ b/src/modules/feature/room/RoomMembers/MembersTable.vue
@@ -174,7 +174,12 @@ const tableHeader = [
 		key: "displayRoleName",
 	},
 	{ title: t("common.words.mainSchool"), key: "schoolName" },
-	{ title: "", key: "actions", sortable: false, width: 50 },
+	{
+		title: t("pages.rooms.members.tableHeader.actions"),
+		key: "actions",
+		sortable: false,
+		width: 50,
+	},
 ];
 </script>
 

From 7b123e88d927dc58986ebb398b310a0d4555120e Mon Sep 17 00:00:00 2001
From: NFriedo <69233063+NFriedo@users.noreply.github.com>
Date: Wed, 11 Dec 2024 17:32:35 +0100
Subject: [PATCH 08/27] Revert "add name for actions table header"

This reverts commit 9f71f848ce917ae0861a6b9d233e0c012918b50b.
---
 src/locales/de.ts                                         | 1 -
 src/locales/en.ts                                         | 1 -
 src/locales/es.ts                                         | 1 -
 src/locales/uk.ts                                         | 1 -
 src/modules/feature/room/RoomMembers/MembersTable.unit.ts | 2 +-
 src/modules/feature/room/RoomMembers/MembersTable.vue     | 7 +------
 6 files changed, 2 insertions(+), 11 deletions(-)

diff --git a/src/locales/de.ts b/src/locales/de.ts
index 22d1c2ebf2..93aa56be06 100644
--- a/src/locales/de.ts
+++ b/src/locales/de.ts
@@ -1712,7 +1712,6 @@ export default {
 		"Mehrere Teilnehmer aus dem Raum entfernen",
 	"pages.rooms.members.remove.confirmation":
 		"{memberName} wirklich aus dem Raum entfernen?",
-	"pages.rooms.members.tableHeader.actions": "Aktionen",
 	"pages.rooms.members.multipleRemove.confirmation":
 		"Ausgewählte Teilnehmende wirklich aus dem Raum entfernen?",
 	"pages.rooms.members.roles.editor": "Raumeditor",
diff --git a/src/locales/en.ts b/src/locales/en.ts
index da43dacbb9..4e0c95d93b 100644
--- a/src/locales/en.ts
+++ b/src/locales/en.ts
@@ -1685,7 +1685,6 @@ export default {
 		"Remove selected participants from the room?",
 	"pages.rooms.members.roles.editor": "Room editor",
 	"pages.rooms.members.roles.viewer": "Room viewer",
-	"pages.rooms.members.tableHeader.actions": "Actions",
 	"pages.rooms.title": "Rooms",
 	"pages.taskCard.addElement": "Add element",
 	"pages.taskCard.deleteElement.text":
diff --git a/src/locales/es.ts b/src/locales/es.ts
index e34dee9ad7..e7e9c76c7d 100644
--- a/src/locales/es.ts
+++ b/src/locales/es.ts
@@ -1734,7 +1734,6 @@ export default {
 		"¿Eliminar participantes seleccionadas de la sala?",
 	"pages.rooms.members.roles.editor": "Editor de salas",
 	"pages.rooms.members.roles.viewer": "Visor de salas",
-	"pages.rooms.members.tableHeader.actions": "Acciones",
 	"pages.rooms.title": "Salas",
 	"pages.taskCard.addElement": "Añadir artículo",
 	"pages.taskCard.deleteElement.text":
diff --git a/src/locales/uk.ts b/src/locales/uk.ts
index 025d48fb5d..7f754142b3 100644
--- a/src/locales/uk.ts
+++ b/src/locales/uk.ts
@@ -1713,7 +1713,6 @@ export default {
 		"Видалити вибраних учасників із кімнати?",
 	"pages.rooms.members.roles.editor": "Редактор кімнати",
 	"pages.rooms.members.roles.viewer": "Переглядач кімнати",
-	"pages.rooms.members.tableHeader.actions": "Дії",
 	"pages.rooms.title": "Кімнати",
 	"pages.taskCard.addElement": "Додати елемент",
 	"pages.taskCard.deleteElement.text":
diff --git a/src/modules/feature/room/RoomMembers/MembersTable.unit.ts b/src/modules/feature/room/RoomMembers/MembersTable.unit.ts
index 62818ee8db..a0da092c36 100644
--- a/src/modules/feature/room/RoomMembers/MembersTable.unit.ts
+++ b/src/modules/feature/room/RoomMembers/MembersTable.unit.ts
@@ -33,7 +33,7 @@ describe("MembersTable", () => {
 		"common.labels.lastName",
 		"common.labels.role",
 		"common.words.mainSchool",
-		"pages.rooms.members.tableHeader.actions",
+		"",
 	];
 
 	const setup = () => {
diff --git a/src/modules/feature/room/RoomMembers/MembersTable.vue b/src/modules/feature/room/RoomMembers/MembersTable.vue
index 2d7d287c55..d8ba934427 100644
--- a/src/modules/feature/room/RoomMembers/MembersTable.vue
+++ b/src/modules/feature/room/RoomMembers/MembersTable.vue
@@ -174,12 +174,7 @@ const tableHeader = [
 		key: "displayRoleName",
 	},
 	{ title: t("common.words.mainSchool"), key: "schoolName" },
-	{
-		title: t("pages.rooms.members.tableHeader.actions"),
-		key: "actions",
-		sortable: false,
-		width: 50,
-	},
+	{ title: "", key: "actions", sortable: false, width: 50 },
 ];
 </script>
 

From 8bd694952015968c023010cee413b7726041bbd7 Mon Sep 17 00:00:00 2001
From: NFriedo <69233063+NFriedo@users.noreply.github.com>
Date: Wed, 11 Dec 2024 18:23:15 +0100
Subject: [PATCH 09/27] WIP: repalce custom dialog with v-dialog

---
 .../ConfirmationDialog.vue                    | 46 +++++++++++++++++--
 1 file changed, 41 insertions(+), 5 deletions(-)

diff --git a/src/modules/ui/confirmation-dialog/ConfirmationDialog.vue b/src/modules/ui/confirmation-dialog/ConfirmationDialog.vue
index 2e23c466c9..e77ce585e8 100644
--- a/src/modules/ui/confirmation-dialog/ConfirmationDialog.vue
+++ b/src/modules/ui/confirmation-dialog/ConfirmationDialog.vue
@@ -1,6 +1,30 @@
 <template>
-	<!-- ToDo: replace vCustomDialog with v-dailog, use component <UseFocusTrap>  -->
-	<vCustomDialog
+	<!-- ToDo:  use component <UseFocusTrap>  -->
+	<!-- WIP: replace custom dialog with v-dialog -->
+	<VDialog v-model="isDialogOpen" data-testid="delete-dialog-item" :width="480">
+		<VCard>
+			<template #title>
+				<h2 class="text-h4 my-2 text-break-word dialog-title">{{ message }}</h2>
+			</template>
+
+			<template #actions>
+				<v-btn
+					data-testid="dialog-cancel"
+					variant="text"
+					:text="t('common.actions.cancel')"
+					@click="onCloseDialog"
+				/>
+				<v-btn
+					data-testid="dialog-confirm"
+					color="primary"
+					variant="flat"
+					:text="t(confirmBtnLangKey)"
+					@click="onConfirmation"
+				/>
+			</template>
+		</VCard>
+	</VDialog>
+	<!-- <vCustomDialog
 		data-testid="delete-dialog-item"
 		has-buttons
 		:confirm-btn-title-key="confirmBtnLangKey"
@@ -13,26 +37,32 @@
 				{{ message }}
 			</h2>
 		</template>
-	</vCustomDialog>
+	</vCustomDialog> -->
 </template>
 
 <script setup lang="ts">
 import vCustomDialog from "@/components/organisms/vCustomDialog.vue";
 import { computed } from "vue";
 import { useInternalConfirmationDialog } from "./Confirmation.composable";
+import { useI18n } from "vue-i18n";
 
+const { t } = useI18n();
 const { confirm, cancel, dialogOptions, isDialogOpen } =
 	useInternalConfirmationDialog();
 
 const onConfirmation = () => confirm();
-const onCloseDialog = () => cancel();
+const onCloseDialog = () => {
+	cancel();
+};
 
 const message = computed(() =>
 	dialogOptions.value ? dialogOptions.value.message : ""
 );
 
 const confirmBtnLangKey = computed(() =>
-	dialogOptions.value ? dialogOptions.value.confirmActionLangKey : undefined
+	dialogOptions.value
+		? dialogOptions.value.confirmActionLangKey
+		: "common.actions.confirm"
 );
 </script>
 
@@ -40,4 +70,10 @@ const confirmBtnLangKey = computed(() =>
 .text-break-word {
 	word-break: break-word;
 }
+
+.dialog-title {
+	white-space: normal;
+	hyphens: none;
+	word-break: break-word;
+}
 </style>

From 9fd0ee6afe7cce9175ea98c5173a0ab749e22dbb Mon Sep 17 00:00:00 2001
From: NFriedo <69233063+NFriedo@users.noreply.github.com>
Date: Thu, 12 Dec 2024 11:12:48 +0100
Subject: [PATCH 10/27] add focus trap for confirmation dialog

---
 .../ConfirmationDialog.vue                    | 63 +++++++++++--------
 1 file changed, 38 insertions(+), 25 deletions(-)

diff --git a/src/modules/ui/confirmation-dialog/ConfirmationDialog.vue b/src/modules/ui/confirmation-dialog/ConfirmationDialog.vue
index e77ce585e8..21bb5b56a7 100644
--- a/src/modules/ui/confirmation-dialog/ConfirmationDialog.vue
+++ b/src/modules/ui/confirmation-dialog/ConfirmationDialog.vue
@@ -1,28 +1,39 @@
 <template>
-	<!-- ToDo:  use component <UseFocusTrap>  -->
-	<!-- WIP: replace custom dialog with v-dialog -->
-	<VDialog v-model="isDialogOpen" data-testid="delete-dialog-item" :width="480">
-		<VCard>
-			<template #title>
-				<h2 class="text-h4 my-2 text-break-word dialog-title">{{ message }}</h2>
-			</template>
+	<!-- ToDO: Styling Dialog -->
+	<VDialog
+		v-model="isDialogOpen"
+		data-testid="delete-dialog-item"
+		:max-width="480"
+	>
+		<UseFocusTrap>
+			<VCard>
+				<template #title>
+					<h2 class="text-h4 my-2 dialog-title">
+						{{ message }}
+					</h2>
+				</template>
 
-			<template #actions>
-				<v-btn
-					data-testid="dialog-cancel"
-					variant="text"
-					:text="t('common.actions.cancel')"
-					@click="onCloseDialog"
-				/>
-				<v-btn
-					data-testid="dialog-confirm"
-					color="primary"
-					variant="flat"
-					:text="t(confirmBtnLangKey)"
-					@click="onConfirmation"
-				/>
-			</template>
-		</VCard>
+				<template #actions>
+					<v-spacer />
+					<!-- <div class="action-buttons px-6"> -->
+					<v-btn
+						data-testid="dialog-cancel"
+						variant="text"
+						:text="t('common.actions.cancel')"
+						@click="onCloseDialog"
+					/>
+					<v-btn
+						data-testid="dialog-confirm"
+						class="px-6"
+						color="primary"
+						variant="flat"
+						:text="t(confirmBtnLangKey)"
+						@click="onConfirmation"
+					/>
+					<!-- </div> -->
+				</template>
+			</VCard>
+		</UseFocusTrap>
 	</VDialog>
 	<!-- <vCustomDialog
 		data-testid="delete-dialog-item"
@@ -45,6 +56,7 @@ import vCustomDialog from "@/components/organisms/vCustomDialog.vue";
 import { computed } from "vue";
 import { useInternalConfirmationDialog } from "./Confirmation.composable";
 import { useI18n } from "vue-i18n";
+import { UseFocusTrap } from "@vueuse/integrations/useFocusTrap/component";
 
 const { t } = useI18n();
 const { confirm, cancel, dialogOptions, isDialogOpen } =
@@ -67,8 +79,9 @@ const confirmBtnLangKey = computed(() =>
 </script>
 
 <style scoped>
-.text-break-word {
-	word-break: break-word;
+.action-buttons {
+	margin-bottom: calc(var(--space-base-vuetify) * 2);
+	gap: calc(var(--space-base-vuetify) * 2);
 }
 
 .dialog-title {

From e29124a3406c479613836c653a30d1ce418607d0 Mon Sep 17 00:00:00 2001
From: NFriedo <69233063+NFriedo@users.noreply.github.com>
Date: Thu, 12 Dec 2024 13:59:57 +0100
Subject: [PATCH 11/27] remove custom dialog

---
 .../ConfirmationDialog.vue                    | 37 ++++---------------
 1 file changed, 8 insertions(+), 29 deletions(-)

diff --git a/src/modules/ui/confirmation-dialog/ConfirmationDialog.vue b/src/modules/ui/confirmation-dialog/ConfirmationDialog.vue
index 21bb5b56a7..c2d9916896 100644
--- a/src/modules/ui/confirmation-dialog/ConfirmationDialog.vue
+++ b/src/modules/ui/confirmation-dialog/ConfirmationDialog.vue
@@ -1,5 +1,5 @@
 <template>
-	<!-- ToDO: Styling Dialog -->
+	<!-- ToDo: Styling -->
 	<VDialog
 		v-model="isDialogOpen"
 		data-testid="delete-dialog-item"
@@ -8,51 +8,35 @@
 		<UseFocusTrap>
 			<VCard>
 				<template #title>
-					<h2 class="text-h4 my-2 dialog-title">
+					<h2 class="text-h4 dialog-title">
 						{{ message }}
 					</h2>
 				</template>
 
 				<template #actions>
-					<v-spacer />
-					<!-- <div class="action-buttons px-6"> -->
-					<v-btn
+					<VSpacer />
+					<!-- <div class="action-buttons"> -->
+					<VBtn
 						data-testid="dialog-cancel"
 						variant="text"
 						:text="t('common.actions.cancel')"
-						@click="onCloseDialog"
+						@click="cancel"
 					/>
-					<v-btn
+					<VBtn
 						data-testid="dialog-confirm"
-						class="px-6"
 						color="primary"
 						variant="flat"
 						:text="t(confirmBtnLangKey)"
-						@click="onConfirmation"
+						@click="confirm"
 					/>
 					<!-- </div> -->
 				</template>
 			</VCard>
 		</UseFocusTrap>
 	</VDialog>
-	<!-- <vCustomDialog
-		data-testid="delete-dialog-item"
-		has-buttons
-		:confirm-btn-title-key="confirmBtnLangKey"
-		@dialog-confirmed="onConfirmation"
-		:is-open="isDialogOpen"
-		@dialog-closed="onCloseDialog"
-	>
-		<template #title>
-			<h2 class="text-h4 my-2 text-break-word">
-				{{ message }}
-			</h2>
-		</template>
-	</vCustomDialog> -->
 </template>
 
 <script setup lang="ts">
-import vCustomDialog from "@/components/organisms/vCustomDialog.vue";
 import { computed } from "vue";
 import { useInternalConfirmationDialog } from "./Confirmation.composable";
 import { useI18n } from "vue-i18n";
@@ -62,11 +46,6 @@ const { t } = useI18n();
 const { confirm, cancel, dialogOptions, isDialogOpen } =
 	useInternalConfirmationDialog();
 
-const onConfirmation = () => confirm();
-const onCloseDialog = () => {
-	cancel();
-};
-
 const message = computed(() =>
 	dialogOptions.value ? dialogOptions.value.message : ""
 );

From 40eae14cd89f7278e8ada78cb60442fde1dea28c Mon Sep 17 00:00:00 2001
From: NFriedo <69233063+NFriedo@users.noreply.github.com>
Date: Fri, 13 Dec 2024 10:11:51 +0100
Subject: [PATCH 12/27] add styling for remove dialog

---
 .../ConfirmationDialog.vue                    | 36 ++++++++++---------
 1 file changed, 19 insertions(+), 17 deletions(-)

diff --git a/src/modules/ui/confirmation-dialog/ConfirmationDialog.vue b/src/modules/ui/confirmation-dialog/ConfirmationDialog.vue
index c2d9916896..5bdc340c52 100644
--- a/src/modules/ui/confirmation-dialog/ConfirmationDialog.vue
+++ b/src/modules/ui/confirmation-dialog/ConfirmationDialog.vue
@@ -1,5 +1,4 @@
 <template>
-	<!-- ToDo: Styling -->
 	<VDialog
 		v-model="isDialogOpen"
 		data-testid="delete-dialog-item"
@@ -8,28 +7,29 @@
 		<UseFocusTrap>
 			<VCard>
 				<template #title>
-					<h2 class="text-h4 dialog-title">
+					<h2 class="text-h4 my-2 px-2 dialog-title">
 						{{ message }}
 					</h2>
 				</template>
 
 				<template #actions>
 					<VSpacer />
-					<!-- <div class="action-buttons"> -->
-					<VBtn
-						data-testid="dialog-cancel"
-						variant="text"
-						:text="t('common.actions.cancel')"
-						@click="cancel"
-					/>
-					<VBtn
-						data-testid="dialog-confirm"
-						color="primary"
-						variant="flat"
-						:text="t(confirmBtnLangKey)"
-						@click="confirm"
-					/>
-					<!-- </div> -->
+					<div class="action-buttons px-6">
+						<VBtn
+							data-testid="dialog-cancel"
+							variant="text"
+							:text="t('common.actions.cancel')"
+							@click="cancel"
+						/>
+						<VBtn
+							data-testid="dialog-confirm"
+							class="px-6"
+							color="primary"
+							variant="flat"
+							:text="t(confirmBtnLangKey)"
+							@click="confirm"
+						/>
+					</div>
 				</template>
 			</VCard>
 		</UseFocusTrap>
@@ -59,6 +59,7 @@ const confirmBtnLangKey = computed(() =>
 
 <style scoped>
 .action-buttons {
+	display: flex;
 	margin-bottom: calc(var(--space-base-vuetify) * 2);
 	gap: calc(var(--space-base-vuetify) * 2);
 }
@@ -67,5 +68,6 @@ const confirmBtnLangKey = computed(() =>
 	white-space: normal;
 	hyphens: none;
 	word-break: break-word;
+	line-height: var(--line-height-lg);
 }
 </style>

From 26b3b8af306a761713dffd4a92e1a5139b142efa Mon Sep 17 00:00:00 2001
From: NFriedo <69233063+NFriedo@users.noreply.github.com>
Date: Fri, 13 Dec 2024 10:30:08 +0100
Subject: [PATCH 13/27] adjust styling

---
 src/modules/ui/confirmation-dialog/ConfirmationDialog.vue | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/src/modules/ui/confirmation-dialog/ConfirmationDialog.vue b/src/modules/ui/confirmation-dialog/ConfirmationDialog.vue
index 5bdc340c52..e8c097e038 100644
--- a/src/modules/ui/confirmation-dialog/ConfirmationDialog.vue
+++ b/src/modules/ui/confirmation-dialog/ConfirmationDialog.vue
@@ -7,14 +7,14 @@
 		<UseFocusTrap>
 			<VCard>
 				<template #title>
-					<h2 class="text-h4 my-2 px-2 dialog-title">
+					<h2 class="text-h4 ma-2 dialog-title">
 						{{ message }}
 					</h2>
 				</template>
 
 				<template #actions>
 					<VSpacer />
-					<div class="action-buttons px-6">
+					<div class="action-buttons mx-6">
 						<VBtn
 							data-testid="dialog-cancel"
 							variant="text"
@@ -41,6 +41,7 @@ import { computed } from "vue";
 import { useInternalConfirmationDialog } from "./Confirmation.composable";
 import { useI18n } from "vue-i18n";
 import { UseFocusTrap } from "@vueuse/integrations/useFocusTrap/component";
+import { VSpacer } from "vuetify/lib/components/index.mjs";
 
 const { t } = useI18n();
 const { confirm, cancel, dialogOptions, isDialogOpen } =

From 386a5bb54cced961facba59917933761e155c642 Mon Sep 17 00:00:00 2001
From: NFriedo <69233063+NFriedo@users.noreply.github.com>
Date: Fri, 13 Dec 2024 11:15:56 +0100
Subject: [PATCH 14/27] adjust margin action buttons

---
 .../ui/confirmation-dialog/ConfirmationDialog.vue  | 14 +++++++-------
 1 file changed, 7 insertions(+), 7 deletions(-)

diff --git a/src/modules/ui/confirmation-dialog/ConfirmationDialog.vue b/src/modules/ui/confirmation-dialog/ConfirmationDialog.vue
index e8c097e038..ff07222c8f 100644
--- a/src/modules/ui/confirmation-dialog/ConfirmationDialog.vue
+++ b/src/modules/ui/confirmation-dialog/ConfirmationDialog.vue
@@ -14,7 +14,7 @@
 
 				<template #actions>
 					<VSpacer />
-					<div class="action-buttons mx-6">
+					<div class="action-buttons mx-4">
 						<VBtn
 							data-testid="dialog-cancel"
 							variant="text"
@@ -59,16 +59,16 @@ const confirmBtnLangKey = computed(() =>
 </script>
 
 <style scoped>
-.action-buttons {
-	display: flex;
-	margin-bottom: calc(var(--space-base-vuetify) * 2);
-	gap: calc(var(--space-base-vuetify) * 2);
-}
-
 .dialog-title {
 	white-space: normal;
 	hyphens: none;
 	word-break: break-word;
 	line-height: var(--line-height-lg);
 }
+
+.action-buttons {
+	display: flex;
+	margin-bottom: calc(var(--space-base-vuetify) * 2);
+	gap: calc(var(--space-base-vuetify) * 2);
+}
 </style>

From 551a59588b1f60ab8251960b9426065596d0e02b Mon Sep 17 00:00:00 2001
From: NFriedo <69233063+NFriedo@users.noreply.github.com>
Date: Fri, 13 Dec 2024 11:50:08 +0100
Subject: [PATCH 15/27] add tabbable mock for focus trap

---
 tests/setup.js | 20 ++++++++++++++++++++
 1 file changed, 20 insertions(+)

diff --git a/tests/setup.js b/tests/setup.js
index 3adef7a143..aeac109237 100644
--- a/tests/setup.js
+++ b/tests/setup.js
@@ -7,6 +7,26 @@ config.global.renderStubDefaultSlot = true;
 global.mount = mount;
 global.shallowMount = shallowMount;
 
+/**
+ * mock needed for useFocusTrap in combination with jsdom
+ * this resolves the error "Your focus-trap must have at least one container with at least one tabbable node in it at all times"
+ * @see https://github.com/focus-trap/tabbable?tab=readme-ov-file#testing-in-jsdom
+ */
+jest.mock("tabbable", () => {
+	const lib = jest.requireActual("tabbable");
+	return {
+		...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" }),
+	};
+});
+
 /**
  * matchMedia is used by
  * - useBreakpoints from VueUse to distinguish breakpoints

From 904c6b2b6d6729b852a77dd619e00a604220a0fa Mon Sep 17 00:00:00 2001
From: NFriedo <69233063+NFriedo@users.noreply.github.com>
Date: Fri, 13 Dec 2024 17:03:40 +0100
Subject: [PATCH 16/27] refactor AddMembers test to not use wrapperVm

---
 .../room/RoomMembers/AddMembers.unit.ts       | 163 +++++++++---------
 1 file changed, 80 insertions(+), 83 deletions(-)

diff --git a/src/modules/feature/room/RoomMembers/AddMembers.unit.ts b/src/modules/feature/room/RoomMembers/AddMembers.unit.ts
index 78a77f9695..32b4a7fab8 100644
--- a/src/modules/feature/room/RoomMembers/AddMembers.unit.ts
+++ b/src/modules/feature/room/RoomMembers/AddMembers.unit.ts
@@ -3,15 +3,15 @@ import {
 	createTestingVuetify,
 } from "@@/tests/test-utils/setup";
 import AddMembers from "./AddMembers.vue";
-import { RoleName, SchoolForExternalInviteResponse } from "@/serverApi/v3";
+import { RoleName } from "@/serverApi/v3";
 import { AUTH_MODULE_KEY } from "@/utils/inject";
 import { authModule } from "@/store";
-import { nextTick } from "vue";
 import {
 	roomMemberListFactory,
 	roomMemberSchoolResponseFactory,
 } from "@@/tests/test-utils";
-import { RoomMember } from "@data-room";
+import { VueWrapper } from "@vue/test-utils";
+import { VAutocomplete } from "vuetify/lib/components/index.mjs";
 
 jest.mock("@/store/store-accessor", () => {
 	return {
@@ -22,94 +22,92 @@ jest.mock("@/store/store-accessor", () => {
 	};
 });
 
-const mockPotentialMembers = roomMemberListFactory.buildList(3);
-const roomMembersSchools = roomMemberSchoolResponseFactory.buildList(3);
-
 describe("AddMembers", () => {
 	const setup = () => {
-		const wrapper = mount(AddMembers, {
-			global: {
-				plugins: [createTestingVuetify(), createTestingI18n()],
-				provide: {
-					[AUTH_MODULE_KEY.valueOf()]: authModule,
+		const potentialRoomMembers = roomMemberListFactory.buildList(3);
+		const roomMembersSchools = roomMemberSchoolResponseFactory.buildList(3);
+		const wrapper: VueWrapper<InstanceType<typeof AddMembers>> = mount(
+			AddMembers,
+			{
+				attachTo: document.body,
+				global: {
+					plugins: [createTestingVuetify(), createTestingI18n()],
+					provide: {
+						[AUTH_MODULE_KEY.valueOf()]: authModule,
+					},
 				},
-			},
-			props: {
-				memberList: mockPotentialMembers,
-				schools: roomMembersSchools,
-			},
-		});
+				props: {
+					memberList: potentialRoomMembers,
+					schools: roomMembersSchools,
+				},
+			}
+		);
 
-		const wrapperVM = wrapper.vm as unknown as {
-			memberList: RoomMember[];
-			preSelectedRole: RoleName;
-			selectedUsers: RoomMember[];
-			schoolList: SchoolForExternalInviteResponse[];
-			roles: { id: string; name: string }[];
+		return {
+			wrapper,
+			potentialRoomMembers,
+			roomMembersSchools,
 		};
-
-		return { wrapper, wrapperVM };
 	};
 
 	describe("when component is mounted", () => {
 		it("should render component", () => {
-			const { wrapper, wrapperVM } = setup();
+			const { wrapper, potentialRoomMembers, roomMembersSchools } = setup();
 
 			expect(wrapper.exists()).toBe(true);
-			expect(wrapper.findComponent(AddMembers)).toBeTruthy();
-			expect(wrapperVM.memberList).toStrictEqual(mockPotentialMembers);
-			expect(wrapperVM.schoolList).toStrictEqual(roomMembersSchools);
-			expect(wrapperVM.schoolList).toHaveLength(3);
+			expect(wrapper.props()).toEqual({
+				memberList: potentialRoomMembers,
+				schools: roomMembersSchools,
+			});
 		});
 
-		describe("AutoComplete components", () => {
-			it("should render Autocomplete components", () => {
+		describe("Autocomplete components", () => {
+			it("should render autocomplete components", () => {
 				const { wrapper } = setup();
-				const autoCompleteComponents = wrapper.findAllComponents({
-					name: "v-autocomplete",
-				});
+				const autoCompleteComponents = wrapper.findAllComponents(VAutocomplete);
 
 				expect(autoCompleteComponents).toHaveLength(3);
 			});
 
 			it("should have proper props for autoCompleteSchool component", () => {
-				const { wrapper, wrapperVM } = setup();
-				const schoolComponent = wrapper.findComponent({
+				const { wrapper, roomMembersSchools } = setup();
+				const schoolComponent = wrapper.getComponent({
 					name: "v-autocomplete",
 					ref: "autoCompleteSchool",
 				});
 
-				expect(schoolComponent).toBeTruthy();
 				expect(schoolComponent.props("items")).toStrictEqual(
-					wrapperVM.schoolList
+					roomMembersSchools
 				);
 				expect(schoolComponent.props("modelValue")).toBe(
-					wrapperVM.schoolList[0].id
+					roomMembersSchools[0].id
 				);
 			});
-
 			it("should have proper props for autoCompleteRole component", () => {
-				const { wrapper, wrapperVM } = setup();
-				const roleComponent = wrapper.findComponent({
+				const { wrapper } = setup();
+
+				const roles = [
+					{ id: RoleName.Roomeditor, name: "common.labels.teacher" },
+				];
+
+				const roleComponent = wrapper.getComponent({
 					name: "v-autocomplete",
 					ref: "autoCompleteRole",
 				});
 
-				expect(roleComponent).toBeTruthy();
-				expect(roleComponent.props("items")).toStrictEqual(wrapperVM.roles);
-				expect(roleComponent.props("modelValue")).toBe(wrapperVM.roles[0].id);
+				expect(roleComponent.props("items")).toStrictEqual(roles);
+				expect(roleComponent.props("modelValue")).toBe(roles[0].id);
 			});
 
 			it("should have proper props for autoCompleteUsers component", () => {
-				const { wrapper, wrapperVM } = setup();
-				const userComponent = wrapper.findComponent({
+				const { wrapper, potentialRoomMembers } = setup();
+				const userComponent = wrapper.getComponent({
 					name: "v-autocomplete",
 					ref: "autoCompleteUsers",
 				});
 
-				expect(userComponent).toBeTruthy();
 				expect(userComponent.props("items")).toStrictEqual(
-					wrapperVM.memberList
+					potentialRoomMembers
 				);
 				expect(userComponent.props("modelValue")).toHaveLength(0);
 			});
@@ -118,15 +116,14 @@ describe("AddMembers", () => {
 
 	describe("when userRole is changed", () => {
 		it("should emit the userRole", async () => {
-			const { wrapper } = setup();
-			const roleComponent = wrapper.findComponent({
+			const { wrapper, roomMembersSchools } = setup();
+			const roleComponent = wrapper.getComponent({
 				name: "v-autocomplete",
 				ref: "autoCompleteRole",
 			});
 
-			expect(roleComponent).toBeTruthy();
-			await roleComponent.vm.$emit("update:modelValue", RoleName.Roomviewer);
-			await nextTick();
+			await roleComponent.setValue(RoleName.Roomviewer);
+
 			expect(wrapper.emitted("update:role")).toHaveLength(1);
 			expect(wrapper.emitted("update:role")![0]).toStrictEqual([
 				{ role: RoleName.Roomviewer, schoolId: roomMembersSchools[0].id },
@@ -136,52 +133,50 @@ describe("AddMembers", () => {
 
 	describe("when user(s) selected", () => {
 		it("should add user to selectedUsers", async () => {
-			const { wrapper, wrapperVM } = setup();
-			const userComponent = wrapper.findComponent({
+			const { wrapper, potentialRoomMembers } = setup();
+			const userComponent = wrapper.getComponent({
 				name: "v-autocomplete",
 				ref: "autoCompleteUsers",
 			});
 
-			expect(userComponent).toBeTruthy();
-			await userComponent.vm.$emit("update:modelValue", [
-				mockPotentialMembers[0].userId,
-				mockPotentialMembers[1].userId,
+			await userComponent.setValue([
+				potentialRoomMembers[0].userId,
+				potentialRoomMembers[1].userId,
 			]);
-			await nextTick();
-			expect(wrapperVM.selectedUsers).toHaveLength(2);
+
+			// todo refactor expect without wrapperVM
+			// expect(wrapperVM.selectedUsers).toHaveLength(2);
 			expect(userComponent.props("modelValue")).toStrictEqual([
-				mockPotentialMembers[0].userId,
-				mockPotentialMembers[1].userId,
+				potentialRoomMembers[0].userId,
+				potentialRoomMembers[1].userId,
 			]);
 		});
 	});
 
 	describe("when add button clicked", () => {
 		it("should emit the selectedUsers", async () => {
-			const { wrapper, wrapperVM } = setup();
-			const userComponent = wrapper.findComponent({
+			const { wrapper, potentialRoomMembers } = setup();
+			const userComponent = wrapper.getComponent({
 				name: "v-autocomplete",
 				ref: "autoCompleteUsers",
 			});
 
-			expect(userComponent).toBeTruthy();
-			await userComponent.vm.$emit("update:modelValue", [
-				mockPotentialMembers[0].userId,
-				mockPotentialMembers[1].userId,
-			]);
-			await nextTick();
+			const selectedUsers = [
+				potentialRoomMembers[0].userId,
+				potentialRoomMembers[1].userId,
+			];
+
+			userComponent.setValue(selectedUsers);
 
-			const addButton = wrapper.findComponent({
+			const addButton = wrapper.getComponent({
 				name: "v-btn",
 				ref: "addButton",
 			});
-			expect(addButton).toBeTruthy();
+
 			await addButton.trigger("click");
-			await nextTick();
+
 			expect(wrapper.emitted("add:members")).toHaveLength(1);
-			expect(wrapper.emitted("add:members")![0]).toStrictEqual([
-				wrapperVM.selectedUsers,
-			]);
+			expect(wrapper.emitted("add:members")![0]).toStrictEqual([selectedUsers]);
 			expect(wrapper.emitted("close")).toHaveLength(1);
 		});
 	});
@@ -190,14 +185,16 @@ describe("AddMembers", () => {
 		it("should emit the selectedUsers", async () => {
 			const { wrapper } = setup();
 
-			const cancelButton = wrapper.findComponent({
+			const cancelButton = wrapper.getComponent({
 				name: "v-btn",
 				ref: "cancelButton",
 			});
-			expect(cancelButton).toBeTruthy();
+
 			await cancelButton.trigger("click");
-			await nextTick();
-			expect(wrapper.emitted("close")).toHaveLength(1);
+
+			expect(wrapper.emitted()).toHaveProperty("close");
 		});
 	});
 });
+
+// TODO: add tests for focus trap (@update:menu)

From bb9341cb4005505d2e4fd46f2cc3e3d4509115ed Mon Sep 17 00:00:00 2001
From: NFriedo <69233063+NFriedo@users.noreply.github.com>
Date: Fri, 13 Dec 2024 18:26:18 +0100
Subject: [PATCH 17/27] add tests confirm dialog

---
 .../ConfirmationDialog.unit.ts                | 119 ++++++++++++------
 1 file changed, 82 insertions(+), 37 deletions(-)

diff --git a/src/modules/ui/confirmation-dialog/ConfirmationDialog.unit.ts b/src/modules/ui/confirmation-dialog/ConfirmationDialog.unit.ts
index c157505cbc..ae41b0fe17 100644
--- a/src/modules/ui/confirmation-dialog/ConfirmationDialog.unit.ts
+++ b/src/modules/ui/confirmation-dialog/ConfirmationDialog.unit.ts
@@ -1,61 +1,106 @@
-import { shallowMount } from "@vue/test-utils";
 import { ref } from "vue";
 import { useInternalConfirmationDialog } from "./Confirmation.composable";
-import DeleteConfirmation from "./ConfirmationDialog.vue";
-import { createTestingI18n } from "@@/tests/test-utils/setup";
-jest.mock("./Confirmation.composable");
+import {
+	createTestingI18n,
+	createTestingVuetify,
+} from "@@/tests/test-utils/setup";
+import ConfirmationDialog from "./ConfirmationDialog.vue";
+import { VCard, VDialog } from "vuetify/lib/components/index.mjs";
+import { createMock, DeepMocked } from "@golevelup/ts-jest";
 
-const mockedUseInternalConfirmationDialog = jest.mocked(
+jest.mock("./Confirmation.composable");
+const useInternalConfirmationDialogMock = jest.mocked(
 	useInternalConfirmationDialog
 );
 
-describe("DeleteConfirmation", () => {
-	const confirmSpy = jest.fn();
-	const cancelSpy = jest.fn();
-	const setup = (options: {
-		isDeleteModalOpen?: boolean;
-		title?: string;
-		typeName?: string;
+describe("ConfirmationDialog", () => {
+	let internalConfirmationDialogMock: DeepMocked<
+		ReturnType<typeof useInternalConfirmationDialog>
+	>;
+
+	beforeEach(() => {
+		internalConfirmationDialogMock =
+			createMock<ReturnType<typeof useInternalConfirmationDialog>>();
+		useInternalConfirmationDialogMock.mockReturnValue(
+			internalConfirmationDialogMock
+		);
+	});
+
+	const setup = (options?: {
+		isDialogOpen?: boolean;
+		message?: string;
+		confirmActionLangKey?: string;
 	}) => {
-		mockedUseInternalConfirmationDialog.mockReturnValue({
-			confirm: confirmSpy,
-			cancel: cancelSpy,
-			askInternal: jest.fn(),
-			dialogOptions: ref({ message: "TestMessage" }),
-			isDialogOpen: ref(true),
+		const { isDialogOpen, message, confirmActionLangKey } = {
+			isDialogOpen: true,
+			message: "titleMessage",
+			confirmActionLangKey: "ActionKey",
+			...options,
+		};
+
+		internalConfirmationDialogMock.dialogOptions = ref({
+			message,
+			confirmActionLangKey,
 		});
+		internalConfirmationDialogMock.isDialogOpen = ref(isDialogOpen);
 
-		const wrapper = shallowMount(DeleteConfirmation, {
-			global: { plugins: [createTestingI18n()] },
-			props: {
-				isDeleteModalOpen: options?.isDeleteModalOpen ?? true,
-				title: options.title ?? "title",
-				typeName: options.typeName ?? "card",
+		const wrapper = mount(ConfirmationDialog, {
+			global: {
+				plugins: [createTestingVuetify(), createTestingI18n()],
 			},
 		});
-		return wrapper;
+		return { wrapper, message };
 	};
 
+	afterEach(() => {
+		useInternalConfirmationDialogMock.mockReset();
+	});
+
 	describe("when component is mounted", () => {
 		it("should be found in dom", () => {
-			const wrapper = setup({});
-			expect(wrapper.findComponent(DeleteConfirmation).exists()).toBe(true);
+			const { wrapper } = setup({});
+
+			expect(wrapper.exists()).toBe(true);
+		});
+
+		it("should render dialog title", async () => {
+			const { wrapper, message } = setup();
+
+			const dialogTitle = wrapper
+				.findComponent(VDialog)
+				.findComponent(VCard)
+				.find(".dialog-title");
+
+			expect(dialogTitle.text()).toContain(message);
 		});
 	});
 
+	// fix: tests should be independent
 	describe("when a dialog button clicked", () => {
-		it("should broadcast 'confirm' if 'remove' button clicked", () => {
-			const wrapper = setup({});
-			const dialog = wrapper.findComponent({ name: "vCustomDialog" });
-			dialog.vm.$emit("dialog-confirmed");
-			expect(confirmSpy).toHaveBeenCalled();
+		it("should call 'confirm' if 'confirm' button clicked", () => {
+			const { wrapper } = setup();
+
+			const confirmButton = wrapper
+				.findComponent(VDialog)
+				.findComponent(VCard)
+				.findComponent("[data-testid='dialog-confirm']");
+
+			confirmButton.trigger("click");
+			expect(internalConfirmationDialogMock.confirm).toHaveBeenCalled();
 		});
 
-		it("should emit 'dialog-cancel' if 'cancel' button clicked", () => {
-			const wrapper = setup({});
-			const dialog = wrapper.findComponent({ name: "vCustomDialog" });
-			dialog.vm.$emit("dialog-closed");
-			expect(cancelSpy).toHaveBeenCalled();
+		it("should call 'cancel' if 'cancel' button clicked", () => {
+			const { wrapper } = setup();
+
+			const cancelButton = wrapper
+				.findComponent(VDialog)
+				.findComponent(VCard)
+				.findComponent("[data-testid='dialog-cancel']");
+
+			cancelButton.trigger("click");
+			expect(internalConfirmationDialogMock.cancel).toHaveBeenCalled();
 		});
 	});
 });
+
+// ToDo: add test confirmBtnLanguageKey

From 67b5d0cb58391ccade6b241d71ca2c88e116fd86 Mon Sep 17 00:00:00 2001
From: NFriedo <69233063+NFriedo@users.noreply.github.com>
Date: Mon, 16 Dec 2024 10:23:02 +0100
Subject: [PATCH 18/27] make dialog tests independent

---
 .../ConfirmationDialog.unit.ts                | 58 +++++++++----------
 .../ConfirmationDialog.vue                    |  6 +-
 2 files changed, 30 insertions(+), 34 deletions(-)

diff --git a/src/modules/ui/confirmation-dialog/ConfirmationDialog.unit.ts b/src/modules/ui/confirmation-dialog/ConfirmationDialog.unit.ts
index ae41b0fe17..40be22ba30 100644
--- a/src/modules/ui/confirmation-dialog/ConfirmationDialog.unit.ts
+++ b/src/modules/ui/confirmation-dialog/ConfirmationDialog.unit.ts
@@ -6,7 +6,7 @@ import {
 } from "@@/tests/test-utils/setup";
 import ConfirmationDialog from "./ConfirmationDialog.vue";
 import { VCard, VDialog } from "vuetify/lib/components/index.mjs";
-import { createMock, DeepMocked } from "@golevelup/ts-jest";
+import { VueWrapper } from "@vue/test-utils";
 
 jest.mock("./Confirmation.composable");
 const useInternalConfirmationDialogMock = jest.mocked(
@@ -14,37 +14,36 @@ const useInternalConfirmationDialogMock = jest.mocked(
 );
 
 describe("ConfirmationDialog", () => {
-	let internalConfirmationDialogMock: DeepMocked<
-		ReturnType<typeof useInternalConfirmationDialog>
-	>;
+	let cancelMock: jest.Mock;
+	let confirmMock: jest.Mock;
+	let wrapper: VueWrapper<InstanceType<typeof ConfirmationDialog>>;
 
 	beforeEach(() => {
-		internalConfirmationDialogMock =
-			createMock<ReturnType<typeof useInternalConfirmationDialog>>();
-		useInternalConfirmationDialogMock.mockReturnValue(
-			internalConfirmationDialogMock
-		);
+		cancelMock = jest.fn();
+		confirmMock = jest.fn();
 	});
 
 	const setup = (options?: {
-		isDialogOpen?: boolean;
 		message?: string;
-		confirmActionLangKey?: string;
+		confirmActionLanguageKey?: string;
 	}) => {
-		const { isDialogOpen, message, confirmActionLangKey } = {
-			isDialogOpen: true,
+		const { message, confirmActionLanguageKey } = {
 			message: "titleMessage",
-			confirmActionLangKey: "ActionKey",
+			confirmActionLanguageKey: "ActionKey",
 			...options,
 		};
 
-		internalConfirmationDialogMock.dialogOptions = ref({
-			message,
-			confirmActionLangKey,
+		useInternalConfirmationDialogMock.mockReturnValue({
+			dialogOptions: ref({
+				message,
+				confirmActionLanguageKey,
+			}),
+			isDialogOpen: ref(true),
+			confirm: confirmMock,
+			cancel: cancelMock,
+			askInternal: jest.fn(),
 		});
-		internalConfirmationDialogMock.isDialogOpen = ref(isDialogOpen);
-
-		const wrapper = mount(ConfirmationDialog, {
+		wrapper = mount(ConfirmationDialog, {
 			global: {
 				plugins: [createTestingVuetify(), createTestingI18n()],
 			},
@@ -53,12 +52,12 @@ describe("ConfirmationDialog", () => {
 	};
 
 	afterEach(() => {
-		useInternalConfirmationDialogMock.mockReset();
+		wrapper.unmount(); // otherwise tests break when running all tests
 	});
 
 	describe("when component is mounted", () => {
 		it("should be found in dom", () => {
-			const { wrapper } = setup({});
+			const { wrapper } = setup();
 
 			expect(wrapper.exists()).toBe(true);
 		});
@@ -75,9 +74,8 @@ describe("ConfirmationDialog", () => {
 		});
 	});
 
-	// fix: tests should be independent
-	describe("when a dialog button clicked", () => {
-		it("should call 'confirm' if 'confirm' button clicked", () => {
+	describe("when a dialog button is clicked", () => {
+		it("should call 'confirm' if 'confirm' button clicked", async () => {
 			const { wrapper } = setup();
 
 			const confirmButton = wrapper
@@ -85,11 +83,11 @@ describe("ConfirmationDialog", () => {
 				.findComponent(VCard)
 				.findComponent("[data-testid='dialog-confirm']");
 
-			confirmButton.trigger("click");
-			expect(internalConfirmationDialogMock.confirm).toHaveBeenCalled();
+			await confirmButton.trigger("click");
+			expect(confirmMock).toHaveBeenCalled();
 		});
 
-		it("should call 'cancel' if 'cancel' button clicked", () => {
+		it("should call 'cancel' if 'cancel' button clicked", async () => {
 			const { wrapper } = setup();
 
 			const cancelButton = wrapper
@@ -97,8 +95,8 @@ describe("ConfirmationDialog", () => {
 				.findComponent(VCard)
 				.findComponent("[data-testid='dialog-cancel']");
 
-			cancelButton.trigger("click");
-			expect(internalConfirmationDialogMock.cancel).toHaveBeenCalled();
+			await cancelButton.trigger("click");
+			expect(cancelMock).toHaveBeenCalled();
 		});
 	});
 });
diff --git a/src/modules/ui/confirmation-dialog/ConfirmationDialog.vue b/src/modules/ui/confirmation-dialog/ConfirmationDialog.vue
index ff07222c8f..10151caf16 100644
--- a/src/modules/ui/confirmation-dialog/ConfirmationDialog.vue
+++ b/src/modules/ui/confirmation-dialog/ConfirmationDialog.vue
@@ -51,10 +51,8 @@ const message = computed(() =>
 	dialogOptions.value ? dialogOptions.value.message : ""
 );
 
-const confirmBtnLangKey = computed(() =>
-	dialogOptions.value
-		? dialogOptions.value.confirmActionLangKey
-		: "common.actions.confirm"
+const confirmBtnLangKey = computed(
+	() => dialogOptions.value?.confirmActionLangKey ?? "common.actions.confirm"
 );
 </script>
 

From 5d9f177804be02d73fef481e4ddaad47261b3c8b Mon Sep 17 00:00:00 2001
From: NFriedo <69233063+NFriedo@users.noreply.github.com>
Date: Mon, 16 Dec 2024 12:13:56 +0100
Subject: [PATCH 19/27] fix and add tests for confirmation dialog

---
 .../ConfirmationDialog.unit.ts                | 65 +++++++++++++++++--
 1 file changed, 58 insertions(+), 7 deletions(-)

diff --git a/src/modules/ui/confirmation-dialog/ConfirmationDialog.unit.ts b/src/modules/ui/confirmation-dialog/ConfirmationDialog.unit.ts
index 40be22ba30..f1df48e3a0 100644
--- a/src/modules/ui/confirmation-dialog/ConfirmationDialog.unit.ts
+++ b/src/modules/ui/confirmation-dialog/ConfirmationDialog.unit.ts
@@ -25,30 +25,31 @@ describe("ConfirmationDialog", () => {
 
 	const setup = (options?: {
 		message?: string;
-		confirmActionLanguageKey?: string;
+		confirmActionLangKey?: string;
 	}) => {
-		const { message, confirmActionLanguageKey } = {
+		const { message, confirmActionLangKey } = {
 			message: "titleMessage",
-			confirmActionLanguageKey: "ActionKey",
+			confirmActionLangKey: "ActionKey",
 			...options,
 		};
 
 		useInternalConfirmationDialogMock.mockReturnValue({
 			dialogOptions: ref({
 				message,
-				confirmActionLanguageKey,
+				confirmActionLangKey,
 			}),
 			isDialogOpen: ref(true),
 			confirm: confirmMock,
 			cancel: cancelMock,
 			askInternal: jest.fn(),
 		});
+
 		wrapper = mount(ConfirmationDialog, {
 			global: {
 				plugins: [createTestingVuetify(), createTestingI18n()],
 			},
 		});
-		return { wrapper, message };
+		return { wrapper, message, confirmActionLangKey };
 	};
 
 	afterEach(() => {
@@ -99,6 +100,56 @@ describe("ConfirmationDialog", () => {
 			expect(cancelMock).toHaveBeenCalled();
 		});
 	});
-});
 
-// ToDo: add test confirmBtnLanguageKey
+	describe("confirm button", () => {
+		it("should call 'confirm' if button is clicked", async () => {
+			const { wrapper } = setup();
+
+			const confirmButton = wrapper
+				.findComponent(VDialog)
+				.findComponent(VCard)
+				.findComponent("[data-testid='dialog-confirm']");
+
+			await confirmButton.trigger("click");
+			expect(confirmMock).toHaveBeenCalled();
+		});
+
+		it("should have correct text when own language key is provided", async () => {
+			const { wrapper, confirmActionLangKey } = setup({
+				confirmActionLangKey: "providedLanguageKey",
+			});
+
+			const confirmButton = wrapper
+				.findComponent(VDialog)
+				.findComponent(VCard)
+				.findComponent("[data-testid='dialog-confirm']");
+
+			expect(confirmButton.text()).toContain(confirmActionLangKey);
+		});
+
+		it("should have default text when no language key is provided", async () => {
+			const { wrapper } = setup({ confirmActionLangKey: undefined });
+
+			const confirmButton = wrapper
+				.findComponent(VDialog)
+				.findComponent(VCard)
+				.findComponent("[data-testid='dialog-confirm']");
+
+			expect(confirmButton.text()).toContain("common.actions.confirm");
+		});
+	});
+
+	describe("cancel button", () => {
+		it("should call 'cancel' if dialog is cancelled", async () => {
+			const { wrapper } = setup();
+
+			const cancelButton = wrapper
+				.findComponent(VDialog)
+				.findComponent(VCard)
+				.findComponent("[data-testid='dialog-cancel']");
+
+			await cancelButton.trigger("click");
+			expect(cancelMock).toHaveBeenCalled();
+		});
+	});
+});

From 5016bacf12e905a0b65eaec4e9d48963ec4e9979 Mon Sep 17 00:00:00 2001
From: NFriedo <69233063+NFriedo@users.noreply.github.com>
Date: Mon, 16 Dec 2024 15:46:50 +0100
Subject: [PATCH 20/27] fix tests

---
 .../room/RoomMembers/AddMembers.unit.ts       | 33 ++++++++++---------
 .../ConfirmationDialog.unit.ts                |  2 +-
 2 files changed, 19 insertions(+), 16 deletions(-)

diff --git a/src/modules/feature/room/RoomMembers/AddMembers.unit.ts b/src/modules/feature/room/RoomMembers/AddMembers.unit.ts
index 32b4a7fab8..66be98ef4b 100644
--- a/src/modules/feature/room/RoomMembers/AddMembers.unit.ts
+++ b/src/modules/feature/room/RoomMembers/AddMembers.unit.ts
@@ -23,25 +23,24 @@ jest.mock("@/store/store-accessor", () => {
 });
 
 describe("AddMembers", () => {
+	let wrapper: VueWrapper<InstanceType<typeof AddMembers>>;
+
 	const setup = () => {
 		const potentialRoomMembers = roomMemberListFactory.buildList(3);
 		const roomMembersSchools = roomMemberSchoolResponseFactory.buildList(3);
-		const wrapper: VueWrapper<InstanceType<typeof AddMembers>> = mount(
-			AddMembers,
-			{
-				attachTo: document.body,
-				global: {
-					plugins: [createTestingVuetify(), createTestingI18n()],
-					provide: {
-						[AUTH_MODULE_KEY.valueOf()]: authModule,
-					},
-				},
-				props: {
-					memberList: potentialRoomMembers,
-					schools: roomMembersSchools,
+		wrapper = mount(AddMembers, {
+			attachTo: document.body,
+			global: {
+				plugins: [createTestingVuetify(), createTestingI18n()],
+				provide: {
+					[AUTH_MODULE_KEY.valueOf()]: authModule,
 				},
-			}
-		);
+			},
+			props: {
+				memberList: potentialRoomMembers,
+				schools: roomMembersSchools,
+			},
+		});
 
 		return {
 			wrapper,
@@ -50,6 +49,10 @@ describe("AddMembers", () => {
 		};
 	};
 
+	afterEach(() => {
+		wrapper.unmount(); // necessary due focus trap
+	});
+
 	describe("when component is mounted", () => {
 		it("should render component", () => {
 			const { wrapper, potentialRoomMembers, roomMembersSchools } = setup();
diff --git a/src/modules/ui/confirmation-dialog/ConfirmationDialog.unit.ts b/src/modules/ui/confirmation-dialog/ConfirmationDialog.unit.ts
index f1df48e3a0..d1b0ca6536 100644
--- a/src/modules/ui/confirmation-dialog/ConfirmationDialog.unit.ts
+++ b/src/modules/ui/confirmation-dialog/ConfirmationDialog.unit.ts
@@ -53,7 +53,7 @@ describe("ConfirmationDialog", () => {
 	};
 
 	afterEach(() => {
-		wrapper.unmount(); // otherwise tests break when running all tests
+		wrapper.unmount(); // otherwise tests break when running all tests, necessary due focus trap
 	});
 
 	describe("when component is mounted", () => {

From ab45e434f46ea8530bccbcbb8bddd452969940a8 Mon Sep 17 00:00:00 2001
From: NFriedo <69233063+NFriedo@users.noreply.github.com>
Date: Mon, 16 Dec 2024 16:23:46 +0100
Subject: [PATCH 21/27] fix room member page

---
 src/modules/page/room/RoomMembers.page.unit.ts | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

diff --git a/src/modules/page/room/RoomMembers.page.unit.ts b/src/modules/page/room/RoomMembers.page.unit.ts
index 520b31a623..51fbc219f2 100644
--- a/src/modules/page/room/RoomMembers.page.unit.ts
+++ b/src/modules/page/room/RoomMembers.page.unit.ts
@@ -22,6 +22,7 @@ import { roomDetailsFactory } from "@@/tests/test-utils/factory/roomDetailsFacto
 import { VBtn, VDialog } from "vuetify/lib/components/index.mjs";
 import { AddMembers, MembersTable } from "@feature-room";
 import { mdiPlus } from "@icons/material";
+import { VueWrapper } from "@vue/test-utils";
 
 jest.mock("vue-router");
 const useRouterMock = <jest.Mock>useRouter;
@@ -34,6 +35,7 @@ describe("RoomMembersPage", () => {
 	let router: DeepMocked<Router>;
 	let route: DeepMocked<ReturnType<typeof useRoute>>;
 	let mockRoomMemberCalls: DeepMocked<ReturnType<typeof useRoomMembers>>;
+	let wrapper: VueWrapper<InstanceType<typeof RoomMembersPage>>;
 
 	const routeRoomId = "room-id";
 
@@ -79,7 +81,7 @@ describe("RoomMembersPage", () => {
 		const members = roomMemberResponseFactory.buildList(3);
 		mockRoomMemberCalls.roomMembers = ref(members);
 
-		const wrapper = mount(RoomMembersPage, {
+		wrapper = mount(RoomMembersPage, {
 			attachTo: document.body,
 			global: {
 				plugins: [
@@ -103,6 +105,10 @@ describe("RoomMembersPage", () => {
 		return { wrapper, roomDetailsStore, members, room };
 	};
 
+	afterEach(() => {
+		wrapper.unmount(); // necessary due focus trap in AddMembers
+	});
+
 	it("should be found in the dom", () => {
 		const { wrapper } = setup();
 

From d67ee0b80e2ed77236331a3422634bc4149bcc67 Mon Sep 17 00:00:00 2001
From: NFriedo <69233063+NFriedo@users.noreply.github.com>
Date: Mon, 16 Dec 2024 16:34:45 +0100
Subject: [PATCH 22/27] mock focus trap in room member page

---
 src/modules/page/room/RoomMembers.page.unit.ts | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/src/modules/page/room/RoomMembers.page.unit.ts b/src/modules/page/room/RoomMembers.page.unit.ts
index 51fbc219f2..42684c1a1e 100644
--- a/src/modules/page/room/RoomMembers.page.unit.ts
+++ b/src/modules/page/room/RoomMembers.page.unit.ts
@@ -31,6 +31,8 @@ const useRouteMock = <jest.Mock>useRoute;
 jest.mock("../../data/room/roomMembers/roomMembers.composable");
 const mockUseRoomMembers = jest.mocked(useRoomMembers);
 
+jest.mock("@vueuse/integrations"); // mock focus trap from add members because we use mount
+
 describe("RoomMembersPage", () => {
 	let router: DeepMocked<Router>;
 	let route: DeepMocked<ReturnType<typeof useRoute>>;

From ade9a65927cb7efc079b69d5e35caf30bdcad139 Mon Sep 17 00:00:00 2001
From: NFriedo <69233063+NFriedo@users.noreply.github.com>
Date: Tue, 17 Dec 2024 09:42:48 +0100
Subject: [PATCH 23/27] add tests add members

---
 .../room/RoomMembers/AddMembers.unit.ts       | 101 +++++++++++++++---
 1 file changed, 87 insertions(+), 14 deletions(-)

diff --git a/src/modules/feature/room/RoomMembers/AddMembers.unit.ts b/src/modules/feature/room/RoomMembers/AddMembers.unit.ts
index 66be98ef4b..d25cc4cf7e 100644
--- a/src/modules/feature/room/RoomMembers/AddMembers.unit.ts
+++ b/src/modules/feature/room/RoomMembers/AddMembers.unit.ts
@@ -75,7 +75,6 @@ describe("AddMembers", () => {
 			it("should have proper props for autoCompleteSchool component", () => {
 				const { wrapper, roomMembersSchools } = setup();
 				const schoolComponent = wrapper.getComponent({
-					name: "v-autocomplete",
 					ref: "autoCompleteSchool",
 				});
 
@@ -94,7 +93,6 @@ describe("AddMembers", () => {
 				];
 
 				const roleComponent = wrapper.getComponent({
-					name: "v-autocomplete",
 					ref: "autoCompleteRole",
 				});
 
@@ -105,7 +103,6 @@ describe("AddMembers", () => {
 			it("should have proper props for autoCompleteUsers component", () => {
 				const { wrapper, potentialRoomMembers } = setup();
 				const userComponent = wrapper.getComponent({
-					name: "v-autocomplete",
 					ref: "autoCompleteUsers",
 				});
 
@@ -117,28 +114,90 @@ describe("AddMembers", () => {
 		});
 	});
 
+	describe("when school is changed", () => {
+		it("should emit 'update:role'", async () => {
+			const { wrapper, roomMembersSchools } = setup();
+			const selectedSchool = roomMembersSchools[1].id;
+			const schoolComponent = wrapper.getComponent({
+				ref: "autoCompleteSchool",
+			});
+
+			await schoolComponent.setValue(selectedSchool);
+
+			expect(wrapper.emitted("update:role")).toHaveLength(1);
+			expect(wrapper.emitted("update:role")![0]).toStrictEqual([
+				{ role: RoleName.Roomeditor, schoolId: selectedSchool },
+			]);
+		});
+
+		it("should set the role to room editor", async () => {
+			const { wrapper } = setup();
+			const schoolComponent = wrapper.getComponent({
+				ref: "autoCompleteSchool",
+			});
+
+			await schoolComponent.setValue("schoolId");
+
+			const roleComponent = wrapper.getComponent({
+				ref: "autoCompleteRole",
+			});
+
+			expect(roleComponent.props("modelValue")).toBe(RoleName.Roomeditor);
+		});
+
+		it("should reset selectedUsers", async () => {
+			const { wrapper } = setup();
+			const schoolComponent = wrapper.getComponent({
+				ref: "autoCompleteSchool",
+			});
+
+			const userComponent = wrapper.getComponent({
+				ref: "autoCompleteUsers",
+			});
+
+			await schoolComponent.setValue("schoolId");
+
+			expect(userComponent.props("modelValue")).toEqual([]);
+		});
+	});
+
 	describe("when userRole is changed", () => {
 		it("should emit the userRole", async () => {
 			const { wrapper, roomMembersSchools } = setup();
+			const selectedRole = RoleName.Roomeditor;
 			const roleComponent = wrapper.getComponent({
-				name: "v-autocomplete",
 				ref: "autoCompleteRole",
 			});
 
-			await roleComponent.setValue(RoleName.Roomviewer);
+			await roleComponent.setValue(selectedRole);
 
 			expect(wrapper.emitted("update:role")).toHaveLength(1);
 			expect(wrapper.emitted("update:role")![0]).toStrictEqual([
-				{ role: RoleName.Roomviewer, schoolId: roomMembersSchools[0].id },
+				{ role: selectedRole, schoolId: roomMembersSchools[0].id },
 			]);
 		});
+
+		it("should reset selectedUsers", async () => {
+			const { wrapper } = setup();
+			const roleComponent = wrapper.getComponent({
+				ref: "autoCompleteRole",
+			});
+
+			const userComponent = wrapper.getComponent({
+				ref: "autoCompleteUsers",
+			});
+
+			await roleComponent.setValue(RoleName.Roomeditor);
+
+			expect(wrapper.emitted()).toHaveProperty("update:role");
+			expect(userComponent.props("modelValue")).toEqual([]);
+		});
 	});
 
 	describe("when user(s) selected", () => {
 		it("should add user to selectedUsers", async () => {
 			const { wrapper, potentialRoomMembers } = setup();
 			const userComponent = wrapper.getComponent({
-				name: "v-autocomplete",
 				ref: "autoCompleteUsers",
 			});
 
@@ -147,8 +206,7 @@ describe("AddMembers", () => {
 				potentialRoomMembers[1].userId,
 			]);
 
-			// todo refactor expect without wrapperVM
-			// expect(wrapperVM.selectedUsers).toHaveLength(2);
+			expect(userComponent.props("modelValue")).toHaveLength(2);
 			expect(userComponent.props("modelValue")).toStrictEqual([
 				potentialRoomMembers[0].userId,
 				potentialRoomMembers[1].userId,
@@ -160,7 +218,6 @@ describe("AddMembers", () => {
 		it("should emit the selectedUsers", async () => {
 			const { wrapper, potentialRoomMembers } = setup();
 			const userComponent = wrapper.getComponent({
-				name: "v-autocomplete",
 				ref: "autoCompleteUsers",
 			});
 
@@ -168,20 +225,37 @@ describe("AddMembers", () => {
 				potentialRoomMembers[0].userId,
 				potentialRoomMembers[1].userId,
 			];
-
 			userComponent.setValue(selectedUsers);
 
 			const addButton = wrapper.getComponent({
-				name: "v-btn",
 				ref: "addButton",
 			});
-
 			await addButton.trigger("click");
 
 			expect(wrapper.emitted("add:members")).toHaveLength(1);
 			expect(wrapper.emitted("add:members")![0]).toStrictEqual([selectedUsers]);
 			expect(wrapper.emitted("close")).toHaveLength(1);
 		});
+
+		it("should emit 'close'", async () => {
+			const { wrapper, potentialRoomMembers } = setup();
+			const userComponent = wrapper.getComponent({
+				ref: "autoCompleteUsers",
+			});
+
+			const selectedUsers = [
+				potentialRoomMembers[0].userId,
+				potentialRoomMembers[1].userId,
+			];
+			userComponent.setValue(selectedUsers);
+
+			const addButton = wrapper.getComponent({
+				ref: "addButton",
+			});
+			await addButton.trigger("click");
+
+			expect(wrapper.emitted()).toHaveProperty("close");
+		});
 	});
 
 	describe("when cancel button clicked", () => {
@@ -189,7 +263,6 @@ describe("AddMembers", () => {
 			const { wrapper } = setup();
 
 			const cancelButton = wrapper.getComponent({
-				name: "v-btn",
 				ref: "cancelButton",
 			});
 

From 6c0335ca977d69e7a7f9e679c6aa87c89064e717 Mon Sep 17 00:00:00 2001
From: NFriedo <69233063+NFriedo@users.noreply.github.com>
Date: Tue, 17 Dec 2024 14:20:03 +0100
Subject: [PATCH 24/27] fix bug when opening a different autocomplete than the
 currently opened one

---
 .../feature/room/RoomMembers/AddMembers.vue   | 32 ++++++++++++++-----
 1 file changed, 24 insertions(+), 8 deletions(-)

diff --git a/src/modules/feature/room/RoomMembers/AddMembers.vue b/src/modules/feature/room/RoomMembers/AddMembers.vue
index 2128bf5019..d3e2ceb1c3 100644
--- a/src/modules/feature/room/RoomMembers/AddMembers.vue
+++ b/src/modules/feature/room/RoomMembers/AddMembers.vue
@@ -52,7 +52,6 @@
 						variant="underlined"
 						:items="memberList"
 						:label="t('common.labels.name')"
-						:no-data-text="t('common.nodata')"
 						@update:menu="onAutocompleteToggle"
 					/>
 				</div>
@@ -90,6 +89,7 @@ import { PropType, ref, toRef } from "vue";
 import { RoleName, SchoolForExternalInviteResponse } from "@/serverApi/v3";
 import { RoomMember } from "@data-room";
 import { useFocusTrap } from "@vueuse/integrations/useFocusTrap";
+import { VAutocomplete } from "vuetify/lib/components/index.mjs";
 
 const props = defineProps({
 	memberList: {
@@ -129,16 +129,32 @@ const onAddMembers = () => {
 	emit("close");
 };
 
-const onAutocompleteToggle = (open: boolean) => {
-	if (open) {
+const onClose = () => emit("close");
+
+const addMembersContent = ref();
+const { pause, unpause } = useFocusTrap(addMembersContent, {
+	immediate: true,
+});
+
+const autoCompleteSchool = ref<VAutocomplete>();
+const autoCompleteRole = ref<VAutocomplete>();
+const autoCompleteUsers = ref<VAutocomplete>();
+
+const onAutocompleteToggle = () => {
+	const autocompleteRefs = [
+		autoCompleteSchool,
+		autoCompleteRole,
+		autoCompleteUsers,
+	];
+
+	const isAnyAutocompleteOpen = autocompleteRefs.some(
+		(autocomplete) => autocomplete.value?.menu
+	);
+
+	if (isAnyAutocompleteOpen) {
 		pause();
 	} else {
 		unpause();
 	}
 };
-
-const onClose = () => emit("close");
-
-const addMembersContent = ref();
-const { pause, unpause } = useFocusTrap(addMembersContent, { immediate: true });
 </script>

From 5fe5dfdf5d8889ecab2ff91576c6230ae5ff5506 Mon Sep 17 00:00:00 2001
From: NFriedo <69233063+NFriedo@users.noreply.github.com>
Date: Tue, 17 Dec 2024 14:53:56 +0100
Subject: [PATCH 25/27] add test for closing dialog via escape key

---
 src/modules/page/room/RoomMembers.page.unit.ts | 12 ++++++++++++
 1 file changed, 12 insertions(+)

diff --git a/src/modules/page/room/RoomMembers.page.unit.ts b/src/modules/page/room/RoomMembers.page.unit.ts
index c8f1a5c9ec..5a3124ae2d 100644
--- a/src/modules/page/room/RoomMembers.page.unit.ts
+++ b/src/modules/page/room/RoomMembers.page.unit.ts
@@ -247,6 +247,18 @@ describe("RoomMembersPage", () => {
 					expect(dialog.props("modelValue")).toBe(false);
 				});
 
+				it("should close dialog on escape key", async () => {
+					const { wrapper } = setup();
+
+					const dialog = wrapper.getComponent(VDialog);
+					await dialog.setValue(true);
+
+					const dialogContent = dialog.getComponent(AddMembers);
+					await dialogContent.trigger("keydown.escape");
+
+					expect(dialog.props("modelValue")).toBe(false);
+				});
+
 				it("should call addMembers method on @add:members", async () => {
 					const { wrapper } = setup();
 

From ddc0d330d51d81afbfc60b8cab31c0a6aa56b3cf Mon Sep 17 00:00:00 2001
From: NFriedo <69233063+NFriedo@users.noreply.github.com>
Date: Tue, 17 Dec 2024 15:19:15 +0100
Subject: [PATCH 26/27] add tests

---
 .../ui/confirmation-dialog/ConfirmationDialog.unit.ts | 11 +++++++++++
 1 file changed, 11 insertions(+)

diff --git a/src/modules/ui/confirmation-dialog/ConfirmationDialog.unit.ts b/src/modules/ui/confirmation-dialog/ConfirmationDialog.unit.ts
index d1b0ca6536..3cf0b8783a 100644
--- a/src/modules/ui/confirmation-dialog/ConfirmationDialog.unit.ts
+++ b/src/modules/ui/confirmation-dialog/ConfirmationDialog.unit.ts
@@ -73,6 +73,17 @@ describe("ConfirmationDialog", () => {
 
 			expect(dialogTitle.text()).toContain(message);
 		});
+
+		it("should render empty dialog title if no message is provided", async () => {
+			const { wrapper } = setup({ message: undefined });
+
+			const dialogTitle = wrapper
+				.findComponent(VDialog)
+				.findComponent(VCard)
+				.find(".dialog-title");
+
+			expect(dialogTitle.text()).toBe("");
+		});
 	});
 
 	describe("when a dialog button is clicked", () => {

From ffb17ed9a413c295279e8a7e4f94bafca9e0ffd9 Mon Sep 17 00:00:00 2001
From: NFriedo <69233063+NFriedo@users.noreply.github.com>
Date: Tue, 17 Dec 2024 16:53:35 +0100
Subject: [PATCH 27/27] add tests for focus trap

---
 .../room/RoomMembers/AddMembers.unit.ts       | 67 ++++++++++++++++++-
 .../feature/room/RoomMembers/AddMembers.vue   |  4 +-
 2 files changed, 67 insertions(+), 4 deletions(-)

diff --git a/src/modules/feature/room/RoomMembers/AddMembers.unit.ts b/src/modules/feature/room/RoomMembers/AddMembers.unit.ts
index d25cc4cf7e..a965da19c8 100644
--- a/src/modules/feature/room/RoomMembers/AddMembers.unit.ts
+++ b/src/modules/feature/room/RoomMembers/AddMembers.unit.ts
@@ -12,6 +12,7 @@ import {
 } from "@@/tests/test-utils";
 import { VueWrapper } from "@vue/test-utils";
 import { VAutocomplete } from "vuetify/lib/components/index.mjs";
+import { useFocusTrap } from "@vueuse/integrations/useFocusTrap";
 
 jest.mock("@/store/store-accessor", () => {
 	return {
@@ -22,8 +23,25 @@ jest.mock("@/store/store-accessor", () => {
 	};
 });
 
+jest.mock("@vueuse/integrations/useFocusTrap", () => {
+	return {
+		...jest.requireActual("@vueuse/integrations/useFocusTrap"),
+		useFocusTrap: jest.fn(),
+	};
+});
 describe("AddMembers", () => {
 	let wrapper: VueWrapper<InstanceType<typeof AddMembers>>;
+	let pauseMock: jest.Mock;
+	let unpauseMock: jest.Mock;
+
+	beforeEach(() => {
+		pauseMock = jest.fn();
+		unpauseMock = jest.fn();
+		(useFocusTrap as jest.Mock).mockReturnValue({
+			pause: pauseMock,
+			unpause: unpauseMock,
+		});
+	});
 
 	const setup = () => {
 		const potentialRoomMembers = roomMemberListFactory.buildList(3);
@@ -271,6 +289,51 @@ describe("AddMembers", () => {
 			expect(wrapper.emitted()).toHaveProperty("close");
 		});
 	});
-});
 
-// TODO: add tests for focus trap (@update:menu)
+	describe("focus trap", () => {
+		it("should pause focus trap when any autocomplete menu is open", async () => {
+			const { wrapper } = setup();
+			const schoolComponent = wrapper.getComponent({
+				ref: "autoCompleteSchool",
+			});
+
+			schoolComponent.vm.menu = true;
+
+			expect(pauseMock).toHaveBeenCalledTimes(1);
+		});
+
+		it("should unpause focus trap when all autocomplete menus are closed", async () => {
+			const { wrapper } = setup();
+			const schoolComponent = wrapper.getComponent({
+				ref: "autoCompleteSchool",
+			});
+
+			schoolComponent.vm.menu = true;
+			expect(pauseMock).toHaveBeenCalledTimes(1);
+
+			schoolComponent.vm.menu = false;
+			expect(unpauseMock).toHaveBeenCalled();
+		});
+
+		it("should not unpause focus trap when a autocomplete is closed while another one is opened", async () => {
+			// this happens when user switches between autocomplete components for brief moment both are treated as open
+			const { wrapper } = setup();
+			const schoolComponent = wrapper.getComponent({
+				ref: "autoCompleteSchool",
+			});
+
+			const roleComponent = wrapper.getComponent({
+				ref: "autoCompleteRole",
+			});
+
+			schoolComponent.vm.menu = true;
+			roleComponent.vm.menu = true;
+
+			expect(pauseMock).toHaveBeenCalled();
+			expect(unpauseMock).not.toHaveBeenCalled();
+
+			schoolComponent.vm.menu = false;
+			expect(unpauseMock).not.toHaveBeenCalled();
+		});
+	});
+});
diff --git a/src/modules/feature/room/RoomMembers/AddMembers.vue b/src/modules/feature/room/RoomMembers/AddMembers.vue
index d3e2ceb1c3..a8ab6f64db 100644
--- a/src/modules/feature/room/RoomMembers/AddMembers.vue
+++ b/src/modules/feature/room/RoomMembers/AddMembers.vue
@@ -89,7 +89,7 @@ import { PropType, ref, toRef } from "vue";
 import { RoleName, SchoolForExternalInviteResponse } from "@/serverApi/v3";
 import { RoomMember } from "@data-room";
 import { useFocusTrap } from "@vueuse/integrations/useFocusTrap";
-import { VAutocomplete } from "vuetify/lib/components/index.mjs";
+import { VAutocomplete, VCard } from "vuetify/lib/components/index.mjs";
 
 const props = defineProps({
 	memberList: {
@@ -131,7 +131,7 @@ const onAddMembers = () => {
 
 const onClose = () => emit("close");
 
-const addMembersContent = ref();
+const addMembersContent = ref<VCard>();
 const { pause, unpause } = useFocusTrap(addMembersContent, {
 	immediate: true,
 });