add focus trap for confirmation dialog

hpi-schul-cloud · Dec 12, 2024 · 9fd0ee6 · 9fd0ee6
1 parent 8bd6949
commit 9fd0ee6
Showing 1 changed file with 38 additions and 25 deletions.
diff --git 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 {