From 969cf638d27212052ade5e08e7de9786018bef9e Mon Sep 17 00:00:00 2001
From: Joshua Kiwiet-Pantaleoni <joshuak@kiva.org>
Date: Wed, 6 Dec 2023 12:29:51 -0800
Subject: [PATCH] fix(KvLightbox): allow focus on open alerts, clicks on
 browser extensions and outside lightbox

---
 @kiva/kv-components/vue/KvLightbox.vue        |  8 ++-
 .../vue/stories/KvLightbox.stories.js         | 49 +++++++++++++++++++
 2 files changed, 56 insertions(+), 1 deletion(-)

diff --git a/@kiva/kv-components/vue/KvLightbox.vue b/@kiva/kv-components/vue/KvLightbox.vue
index 057d5d94..efb2815e 100644
--- a/@kiva/kv-components/vue/KvLightbox.vue
+++ b/@kiva/kv-components/vue/KvLightbox.vue
@@ -218,10 +218,16 @@ export default {
 		const kvLightboxBody = ref(null);
 		const controlsRef = ref(null);
 
+		const trapElements = computed(() => [
+			kvLightbox.value, // This lightbox
+			'[role="alert"]', // Any open toasts/alerts on the page
+		]);
 		const {
 			activate: activateFocusTrap,
 			deactivate: deactivateFocusTrap,
-		} = useFocusTrap(kvLightbox);
+		} = useFocusTrap(trapElements, {
+			allowOutsideClick: true, // allow clicking outside the lightbox to close it
+		});
 
 		let makePageInertCallback = null;
 		let onKeyUp = null;
diff --git a/@kiva/kv-components/vue/stories/KvLightbox.stories.js b/@kiva/kv-components/vue/stories/KvLightbox.stories.js
index 797ba9c3..e2bb60eb 100644
--- a/@kiva/kv-components/vue/stories/KvLightbox.stories.js
+++ b/@kiva/kv-components/vue/stories/KvLightbox.stories.js
@@ -2,6 +2,7 @@ import { mdiLightningBolt } from '@mdi/js';
 import KvLightbox from '../KvLightbox.vue';
 import KvMaterialIcon from '../KvMaterialIcon.vue';
 import KvButton from '../KvButton.vue';
+import KvToast from '../KvToast.vue';
 
 export default {
 	title: 'KvLightbox',
@@ -253,3 +254,51 @@ export const Informational = InformationalTemplate.bind({});
 Informational.args = {
 	title: 'Lightbox Title',
 };
+
+const ToastInLightboxTemplate = (args, {
+	argTypes,
+}) => ({
+	props: Object.keys(argTypes),
+	components: {
+		KvToast,
+		KvButton,
+		KvLightbox,
+	},
+	template: `
+		<div>
+			<kv-button @click="isLightboxVisible = true;">Show lightbox</kv-button>
+
+			<kv-lightbox
+				:visible="isLightboxVisible"
+				title="Toast in Lightbox"
+				@lightbox-closed="isLightboxVisible = false"
+			>
+				<p>Click the button below to show a toast.</p>
+				<template #controls>
+					<kv-button @click="showToast(message, type, persist)">Show Toast</kv-button>
+				</template>
+			</kv-lightbox>
+
+			<!-- div below is a kludge for storybook docs -->
+			<div class="tw-fixed tw-z-toast tw-inset-0 tw-pointer-events-none">
+				<div class="tw-fixed tw-left-0 tw-right-0 tw-top-2 tw-pointer-events-auto">
+					<kv-toast ref="toastRef" @close="onClose" />
+				</div>
+			</div>
+		</div>
+	`,
+	data() {
+		return {
+			isLightboxVisible: false,
+		};
+	},
+	methods: {
+		showToast(messageInput, type, persistInput) {
+			this.$refs.toastRef.show(messageInput, type, persistInput);
+		},
+		onClose() {
+		},
+	},
+});
+export const toastInLightbox = ToastInLightboxTemplate.bind({});
+toastInLightbox.args = { type: 'confirmation', message: 'This is a toast in a lightbox.' };