Mizah/mizzkey
1
0
Fork 0
Code Issues Pull requests Actions Packages Projects Releases Wiki Activity

fix

Browse source
This commit is contained in:
kakkokari-gtyih 2024-07-09 23:44:44 +09:00
parent 2a9b8dc25c
commit 33523d8dfa
1 changed files with 14 additions and 2 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

16
packages/frontend/src/scripts/focus-trap.ts
View file

@ -5,6 +5,10 @@
import { getHTMLElementOrNull } from '@/scripts/get-or-null.js'; import { getHTMLElementOrNull } from '@/scripts/get-or-null.js';
const focusTrapElements = new Set<HTMLElement>(); const focusTrapElements = new Set<HTMLElement>();
const ignoreElements = [
'script',
'style',
];
function containsFocusTrappedElements(el: HTMLElement): boolean { function containsFocusTrappedElements(el: HTMLElement): boolean {
return Array.from(focusTrapElements).some((focusTrapElement) => { return Array.from(focusTrapElements).some((focusTrapElement) => {
@ -13,6 +17,7 @@ function containsFocusTrappedElements(el: HTMLElement): boolean {
} }
function releaseFocusTrap(el: HTMLElement): void { function releaseFocusTrap(el: HTMLElement): void {
console.log('releaseFocusTrap', el, focusTrapElements.size);
focusTrapElements.delete(el); focusTrapElements.delete(el);
if (el.parentElement != null && el !== document.body) { if (el.parentElement != null && el !== document.body) {
el.parentElement.childNodes.forEach((siblingNode) => { el.parentElement.childNodes.forEach((siblingNode) => {
@ -20,8 +25,15 @@ function releaseFocusTrap(el: HTMLElement): void {
if (!siblingEl) return; if (!siblingEl) return;
if (siblingEl !== el && (focusTrapElements.has(siblingEl) || containsFocusTrappedElements(siblingEl) || focusTrapElements.size === 0)) { if (siblingEl !== el && (focusTrapElements.has(siblingEl) || containsFocusTrappedElements(siblingEl) || focusTrapElements.size === 0)) {
siblingEl.inert = false; siblingEl.inert = false;
} else if (!containsFocusTrappedElements(siblingEl) && !focusTrapElements.has(siblingEl)) { } else if (
focusTrapElements.size > 0 &&
!containsFocusTrappedElements(siblingEl) &&
!focusTrapElements.has(siblingEl) &&
!ignoreElements.includes(siblingEl.tagName.toLowerCase())
) {
siblingEl.inert = true; siblingEl.inert = true;
} else {
siblingEl.inert = false;
} }
}); });
releaseFocusTrap(el.parentElement); releaseFocusTrap(el.parentElement);
@ -33,7 +45,7 @@ export function focusTrap(el: HTMLElement): { release: () => void; } {
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) { if (siblingEl !== el && !ignoreElements.includes(siblingEl.tagName.toLowerCase())) {
siblingEl.inert = true; siblingEl.inert = true;
} }
}); });