From 28062d88aa89499ea2733a8e2ffb85a230ab6599 Mon Sep 17 00:00:00 2001 From: kakkokari-gtyih <67428053+kakkokari-gtyih@users.noreply.github.com> Date: Sat, 13 Jul 2024 11:29:06 +0900 Subject: [PATCH 1/3] =?UTF-8?q?fix(frontend):=20=E3=81=99=E3=81=A7?= =?UTF-8?q?=E3=81=ABfocus=20trap=E5=AF=BE=E8=B1=A1=E3=81=AE=E8=A6=81?= =?UTF-8?q?=E7=B4=A0=E3=81=ABinert=E3=81=8C=E3=81=8B=E3=81=8B=E3=81=A3?= =?UTF-8?q?=E3=81=A6=E3=81=84=E3=82=8B=E5=A0=B4=E5=90=88=E3=81=AF=E8=A7=A3?= =?UTF-8?q?=E9=99=A4=E3=81=99=E3=82=8B=E3=82=88=E3=81=86=E3=81=AB?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/frontend/src/scripts/focus-trap.ts | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/packages/frontend/src/scripts/focus-trap.ts b/packages/frontend/src/scripts/focus-trap.ts index 734c73652f36..abfa4ebde570 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); @@ -42,6 +45,9 @@ 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 { + if (el.inert === true) { + el.inert = false; + } if (el.parentElement != null && el !== document.body) { el.parentElement.childNodes.forEach((siblingNode) => { const siblingEl = getHTMLElementOrNull(siblingNode); From a0aa6e0a4506637eb07f57df66f895e332b4b955 Mon Sep 17 00:00:00 2001 From: kakkokari-gtyih <67428053+kakkokari-gtyih@users.noreply.github.com> Date: Sat, 13 Jul 2024 12:08:29 +0900 Subject: [PATCH 2/3] =?UTF-8?q?=E4=BB=96=E3=81=AEfocus-trapped=E8=A6=81?= =?UTF-8?q?=E7=B4=A0=E3=81=A8=E3=81=AE=E3=82=A4=E3=83=B3=E3=82=BF=E3=83=A9?= =?UTF-8?q?=E3=82=AF=E3=82=B7=E3=83=A7=E3=83=B3=E3=81=8C=E3=81=82=E3=82=8B?= =?UTF-8?q?=E5=A0=B4=E5=90=88=E3=81=AE=E5=8B=95=E4=BD=9C=E3=82=92=E5=A4=89?= =?UTF-8?q?=E6=9B=B4?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../src/components/MkEmojiPickerDialog.vue | 1 + packages/frontend/src/components/MkModal.vue | 4 +++- packages/frontend/src/scripts/focus-trap.ts | 17 ++++++++++++----- 3 files changed, 16 insertions(+), 6 deletions(-) diff --git a/packages/frontend/src/components/MkEmojiPickerDialog.vue b/packages/frontend/src/components/MkEmojiPickerDialog.vue index a413b146ba02..7e1ffbfa9e4c 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 a5fbf8d36539..70694af406f2 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; + hasIntractionWithOtherFocusTrappedEls?: boolean; returnFocusTo?: HTMLElement | null; }>(), { manualShowing: null, @@ -80,6 +81,7 @@ const props = withDefaults(defineProps<{ zPriority: 'low', noOverlap: true, transparentBg: false, + hasIntractionWithOtherFocusTrappedEls: 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.hasIntractionWithOtherFocusTrappedEls); releaseFocusTrap = release; modalRootEl.value.focus(); diff --git a/packages/frontend/src/scripts/focus-trap.ts b/packages/frontend/src/scripts/focus-trap.ts index abfa4ebde570..a5df36f52014 100644 --- a/packages/frontend/src/scripts/focus-trap.ts +++ b/packages/frontend/src/scripts/focus-trap.ts @@ -42,9 +42,9 @@ 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; } @@ -52,11 +52,18 @@ export function focusTrap(el: HTMLElement, parent = false): { release: () => voi 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) { From ecf92561624b74bcd35fff02b2402f3bcba322dd 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 12:55:12 +0900 Subject: [PATCH 3/3] typo --- packages/frontend/src/components/MkModal.vue | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/frontend/src/components/MkModal.vue b/packages/frontend/src/components/MkModal.vue index 70694af406f2..f8032f9b431b 100644 --- a/packages/frontend/src/components/MkModal.vue +++ b/packages/frontend/src/components/MkModal.vue @@ -71,7 +71,7 @@ const props = withDefaults(defineProps<{ zPriority?: 'low' | 'middle' | 'high'; noOverlap?: boolean; transparentBg?: boolean; - hasIntractionWithOtherFocusTrappedEls?: boolean; + hasInteractionWithOtherFocusTrappedEls?: boolean; returnFocusTo?: HTMLElement | null; }>(), { manualShowing: null, @@ -81,7 +81,7 @@ const props = withDefaults(defineProps<{ zPriority: 'low', noOverlap: true, transparentBg: false, - hasIntractionWithOtherFocusTrappedEls: false, + hasInteractionWithOtherFocusTrappedEls: false, returnFocusTo: null, }); @@ -328,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, props.hasIntractionWithOtherFocusTrappedEls); + const { release } = focusTrap(modalRootEl.value, props.hasInteractionWithOtherFocusTrappedEls); releaseFocusTrap = release; modalRootEl.value.focus();