From 1b175ea759ffdb0e70b66f1958ef114ecd00a50f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E3=81=8B=E3=81=A3=E3=81=93=E3=81=8B=E3=82=8A?=
 <67428053+kakkokari-gtyih@users.noreply.github.com>
Date: Sat, 13 Jul 2024 13:02:27 +0900
Subject: [PATCH] =?UTF-8?q?fix(frontend):=20=E3=81=99=E3=81=A7=E3=81=ABfoc?=
 =?UTF-8?q?us=20trap=E5=AF=BE=E8=B1=A1=E3=81=AE=E8=A6=81=E7=B4=A0=E3=81=AB?=
 =?UTF-8?q?inert=E3=81=8C=E3=81=8B=E3=81=8B=E3=81=A3=E3=81=A6=E3=81=84?=
 =?UTF-8?q?=E3=82=8B=E5=A0=B4=E5=90=88=E3=81=AF=E8=A7=A3=E9=99=A4=E3=81=99?=
 =?UTF-8?q?=E3=82=8B=E3=82=88=E3=81=86=E3=81=AB=20(#14189)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* fix(frontend): すでにfocus trap対象の要素にinertがかかっている場合は解除するように

* 他のfocus-trapped要素とのインタラクションがある場合の動作を変更

* typo
---
 .../src/components/MkEmojiPickerDialog.vue    |  1 +
 packages/frontend/src/components/MkModal.vue  |  4 +++-
 packages/frontend/src/scripts/focus-trap.ts   | 23 +++++++++++++++----
 3 files changed, 22 insertions(+), 6 deletions(-)

diff --git a/packages/frontend/src/components/MkEmojiPickerDialog.vue b/packages/frontend/src/components/MkEmojiPickerDialog.vue
index a413b146ba..7e1ffbfa9e 100644
--- a/packages/frontend/src/components/MkEmojiPickerDialog.vue
+++ b/packages/frontend/src/components/MkEmojiPickerDialog.vue
@@ -9,6 +9,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 	v-slot="{ type, maxHeight }"
 	:zPriority="'middle'"
 	:preferType="defaultStore.state.emojiPickerUseDrawerForMobile === false ? 'popup' : 'auto'"
+	:hasInteractionWithOtherFocusTrappedEls="true"
 	:transparentBg="true"
 	:manualShowing="manualShowing"
 	:src="src"
diff --git a/packages/frontend/src/components/MkModal.vue b/packages/frontend/src/components/MkModal.vue
index a5fbf8d365..f8032f9b43 100644
--- a/packages/frontend/src/components/MkModal.vue
+++ b/packages/frontend/src/components/MkModal.vue
@@ -71,6 +71,7 @@ const props = withDefaults(defineProps<{
 	zPriority?: 'low' | 'middle' | 'high';
 	noOverlap?: boolean;
 	transparentBg?: boolean;
+	hasInteractionWithOtherFocusTrappedEls?: boolean;
 	returnFocusTo?: HTMLElement | null;
 }>(), {
 	manualShowing: null,
@@ -80,6 +81,7 @@ const props = withDefaults(defineProps<{
 	zPriority: 'low',
 	noOverlap: true,
 	transparentBg: false,
+	hasInteractionWithOtherFocusTrappedEls: false,
 	returnFocusTo: null,
 });
 
@@ -326,7 +328,7 @@ onMounted(() => {
 	watch([showing, () => props.manualShowing], ([showing, manualShowing]) => {
 		if (manualShowing === true || (manualShowing == null && showing === true)) {
 			if (modalRootEl.value != null) {
-				const { release } = focusTrap(modalRootEl.value);
+				const { release } = focusTrap(modalRootEl.value, props.hasInteractionWithOtherFocusTrappedEls);
 
 				releaseFocusTrap = release;
 				modalRootEl.value.focus();
diff --git a/packages/frontend/src/scripts/focus-trap.ts b/packages/frontend/src/scripts/focus-trap.ts
index 734c73652f..a5df36f520 100644
--- a/packages/frontend/src/scripts/focus-trap.ts
+++ b/packages/frontend/src/scripts/focus-trap.ts
@@ -18,6 +18,9 @@ function containsFocusTrappedElements(el: HTMLElement): boolean {
 
 function releaseFocusTrap(el: HTMLElement): void {
 	focusTrapElements.delete(el);
+	if (el.inert === true) {
+		el.inert = false;
+	}
 	if (el.parentElement != null && el !== document.body) {
 		el.parentElement.childNodes.forEach((siblingNode) => {
 			const siblingEl = getHTMLElementOrNull(siblingNode);
@@ -39,18 +42,28 @@ function releaseFocusTrap(el: HTMLElement): void {
 	}
 }
 
-export function focusTrap(el: HTMLElement, parent: true): void;
-export function focusTrap(el: HTMLElement, parent?: false): { release: () => void; };
-export function focusTrap(el: HTMLElement, parent = false): { release: () => void; } | void {
+export function focusTrap(el: HTMLElement, hasInteractionWithOtherFocusTrappedEls: boolean, parent: true): void;
+export function focusTrap(el: HTMLElement, hasInteractionWithOtherFocusTrappedEls?: boolean, parent?: false): { release: () => void; };
+export function focusTrap(el: HTMLElement, hasInteractionWithOtherFocusTrappedEls = false, parent = false): { release: () => void; } | void {
+	if (el.inert === true) {
+		el.inert = false;
+	}
 	if (el.parentElement != null && el !== document.body) {
 		el.parentElement.childNodes.forEach((siblingNode) => {
 			const siblingEl = getHTMLElementOrNull(siblingNode);
 			if (!siblingEl) return;
-			if (siblingEl !== el && !ignoreElements.includes(siblingEl.tagName.toLowerCase())) {
+			if (
+				siblingEl !== el &&
+				(
+					hasInteractionWithOtherFocusTrappedEls === false ||
+					(!focusTrapElements.has(siblingEl) && !containsFocusTrappedElements(siblingEl))
+				) &&
+				!ignoreElements.includes(siblingEl.tagName.toLowerCase())
+			) {
 				siblingEl.inert = true;
 			}
 		});
-		focusTrap(el.parentElement, true);
+		focusTrap(el.parentElement, hasInteractionWithOtherFocusTrappedEls, true);
 	}
 
 	if (!parent) {