amechama/sharkey
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

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

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

* typo
This commit is contained in:
かっこかり 2024-07-13 13:02:27 +09:00 committed by GitHub
parent 91de35ecdf
commit 1b175ea759
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
3 changed files with 22 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
packages/frontend/src/components/MkEmojiPickerDialog.vue
View File

@ -9,6 +9,7 @@ SPDX-License-Identifier: AGPL-3.0-only
v-slot="{ type, maxHeight }" v-slot="{ type, maxHeight }"
:zPriority="'middle'" :zPriority="'middle'"
:preferType="defaultStore.state.emojiPickerUseDrawerForMobile === false ? 'popup' : 'auto'" :preferType="defaultStore.state.emojiPickerUseDrawerForMobile === false ? 'popup' : 'auto'"
:hasInteractionWithOtherFocusTrappedEls="true"
:transparentBg="true" :transparentBg="true"
:manualShowing="manualShowing" :manualShowing="manualShowing"
:src="src" :src="src"

4
packages/frontend/src/components/MkModal.vue
View File

@ -71,6 +71,7 @@ const props = withDefaults(defineProps<{
zPriority?: 'low' | 'middle' | 'high'; zPriority?: 'low' | 'middle' | 'high';
noOverlap?: boolean; noOverlap?: boolean;
transparentBg?: boolean; transparentBg?: boolean;
hasInteractionWithOtherFocusTrappedEls?: boolean;
returnFocusTo?: HTMLElement | null; returnFocusTo?: HTMLElement | null;
}>(), { }>(), {
manualShowing: null, manualShowing: null,
@ -80,6 +81,7 @@ const props = withDefaults(defineProps<{
zPriority: 'low', zPriority: 'low',
noOverlap: true, noOverlap: true,
transparentBg: false, transparentBg: false,
hasInteractionWithOtherFocusTrappedEls: false,
returnFocusTo: null, returnFocusTo: null,
}); });
@ -326,7 +328,7 @@ onMounted(() => {
watch([showing, () => props.manualShowing], ([showing, manualShowing]) => { watch([showing, () => props.manualShowing], ([showing, manualShowing]) => {
if (manualShowing === true || (manualShowing == null && showing === true)) { if (manualShowing === true || (manualShowing == null && showing === true)) {
if (modalRootEl.value != null) { if (modalRootEl.value != null) {
const { release } = focusTrap(modalRootEl.value); const { release } = focusTrap(modalRootEl.value, props.hasInteractionWithOtherFocusTrappedEls);
releaseFocusTrap = release; releaseFocusTrap = release;
modalRootEl.value.focus(); modalRootEl.value.focus();

23
packages/frontend/src/scripts/focus-trap.ts
View File

@ -18,6 +18,9 @@ function containsFocusTrappedElements(el: HTMLElement): boolean {
function releaseFocusTrap(el: HTMLElement): void { function releaseFocusTrap(el: HTMLElement): void {
focusTrapElements.delete(el); focusTrapElements.delete(el);
if (el.inert === true) {
el.inert = false;
}
if (el.parentElement != null && el !== document.body) { if (el.parentElement != null && el !== document.body) {
el.parentElement.childNodes.forEach((siblingNode) => { el.parentElement.childNodes.forEach((siblingNode) => {
const siblingEl = getHTMLElementOrNull(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, hasInteractionWithOtherFocusTrappedEls: boolean, parent: true): void;
export function focusTrap(el: HTMLElement, parent?: false): { release: () => void; }; export function focusTrap(el: HTMLElement, hasInteractionWithOtherFocusTrappedEls?: boolean, parent?: false): { release: () => void; };
export function focusTrap(el: HTMLElement, parent = false): { release: () => void; } | 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) { if (el.parentElement != null && el !== document.body) {
el.parentElement.childNodes.forEach((siblingNode) => { el.parentElement.childNodes.forEach((siblingNode) => {
const siblingEl = getHTMLElementOrNull(siblingNode); const siblingEl = getHTMLElementOrNull(siblingNode);
if (!siblingEl) return; 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; siblingEl.inert = true;
} }
}); });
focusTrap(el.parentElement, true); focusTrap(el.parentElement, hasInteractionWithOtherFocusTrappedEls, true);
} }
if (!parent) { if (!parent) {