From 385969e9f56a39a1e5547b94901d155e1e811263 Mon Sep 17 00:00:00 2001 From: かっこかり <67428053+kakkokari-gtyih@users.noreply.github.com> Date: Fri, 12 Jul 2024 16:25:44 +0900 Subject: fix(frontend): フォーカスの挙動を修正 (#14158) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * fix(frontend): 直前のパターンを記録するように * fix(frontend): フォーカス/タブ移動に関する挙動を調整 (#226) Cherry-pick commit e8c030673326871edf3623cf2b8675d68f9e1b13 Co-authored-by: taiyme <53635909+taiyme@users.noreply.github.com> * focusのデザイン修正 * move scripts * Modalにfocus trapを追加 * 記録するホットキーはレートリミット式にする * escキーのハンドリングをMkModalに統一 * fix * enterで子メニューを開けるように * lint * fix focus trap * improve switch accessibility * 一部のmodalのフォーカストラップが外れない問題を修正 * fix * fix * Revert "記録するホットキーはレートリミット式にする" This reverts commit 40a7509286a87911ad4cc06d9482e8a2e5d0e7e8. * Revert "fix(frontend): 直前のパターンを記録するように" This reverts commit 5372b2594023952cff34aa62253ed4efef15b5dd. * Revert "Revert "fix(frontend): 直前のパターンを記録するように"" This reverts commit a9bb52e799e110927ad92cd8f26af980819334e1. * Revert "Revert "記録するホットキーはレートリミット式にする"" This reverts commit bdac34273e0bc5f13604c7e2f9fa6b1321a0df3d. * 試験的にCypressでのFocustrapを無効化 * fix * fix focus-trap * Update Changelog * :v: * fix focustrap invocation logic * スクロールがsticky headerを考慮するように * :art: * スタイルの微調整 * :art: * remove deprecated key aliases * focusElementが足りなかったので修正 * preview系にfocus時スタイルが足りなかったので修正 * `returnFocusElement` -> `returnFocusTo` * lint * Update packages/frontend/src/components/MkModalWindow.vue * Apply suggestions from code review Co-authored-by: taiy <53635909+taiyme@users.noreply.github.com> * keydownイベントをまとめる * use correct pesudo-element selector * fix * rename --------- Co-authored-by: taiyme <53635909+taiyme@users.noreply.github.com> Co-authored-by: syuilo <4439005+syuilo@users.noreply.github.com> --- packages/frontend/src/scripts/focus-trap.ts | 65 +++++++++++++++++++++++++++++ 1 file changed, 65 insertions(+) create mode 100644 packages/frontend/src/scripts/focus-trap.ts (limited to 'packages/frontend/src/scripts/focus-trap.ts') diff --git a/packages/frontend/src/scripts/focus-trap.ts b/packages/frontend/src/scripts/focus-trap.ts new file mode 100644 index 0000000000..734c73652f --- /dev/null +++ b/packages/frontend/src/scripts/focus-trap.ts @@ -0,0 +1,65 @@ +/* + * SPDX-FileCopyrightText: syuilo and misskey-project + * SPDX-License-Identifier: AGPL-3.0-only + */ +import { getHTMLElementOrNull } from '@/scripts/get-dom-node-or-null.js'; + +const focusTrapElements = new Set(); +const ignoreElements = [ + 'script', + 'style', +]; + +function containsFocusTrappedElements(el: HTMLElement): boolean { + return Array.from(focusTrapElements).some((focusTrapElement) => { + return el.contains(focusTrapElement); + }); +} + +function releaseFocusTrap(el: HTMLElement): void { + focusTrapElements.delete(el); + if (el.parentElement != null && el !== document.body) { + el.parentElement.childNodes.forEach((siblingNode) => { + const siblingEl = getHTMLElementOrNull(siblingNode); + if (!siblingEl) return; + if (siblingEl !== el && (focusTrapElements.has(siblingEl) || containsFocusTrappedElements(siblingEl) || focusTrapElements.size === 0)) { + siblingEl.inert = false; + } else if ( + focusTrapElements.size > 0 && + !containsFocusTrappedElements(siblingEl) && + !focusTrapElements.has(siblingEl) && + !ignoreElements.includes(siblingEl.tagName.toLowerCase()) + ) { + siblingEl.inert = true; + } else { + siblingEl.inert = false; + } + }); + releaseFocusTrap(el.parentElement); + } +} + +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.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())) { + siblingEl.inert = true; + } + }); + focusTrap(el.parentElement, true); + } + + if (!parent) { + focusTrapElements.add(el); + + return { + release: () => { + releaseFocusTrap(el); + }, + }; + } +} -- cgit v1.2.3-freya From 1b175ea759ffdb0e70b66f1958ef114ecd00a50f Mon Sep 17 00:00:00 2001 From: かっこかり <67428053+kakkokari-gtyih@users.noreply.github.com> Date: Sat, 13 Jul 2024 13:02:27 +0900 Subject: fix(frontend): すでにfocus trap対象の要素にinertがかかっている場合は解除するように (#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(-) (limited to 'packages/frontend/src/scripts/focus-trap.ts') 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) { -- cgit v1.2.3-freya