iter(g27): 抽出弹层 Esc 栈,多弹层只关最上层

This commit is contained in:
HIsheR
2026-10-26 11:37:45 +08:00
parent c6ce184aeb
commit d80e132a45
7 changed files with 67 additions and 20 deletions
+7 -5
View File
@@ -1,5 +1,6 @@
import { effect, h } from '@ui-arch/frame';
import type { ModalProps } from './types.js';
import { pushOverlay } from './overlay.js';
/*** 弹窗:open 信号驱动显隐,点遮罩、× 或 Esc 触发 onClose;Tab 焦点陷阱 + 关闭归还焦点 ***/
export function modal(props: ModalProps, ...children: unknown[]): HTMLElement {
@@ -23,6 +24,7 @@ export function modal(props: ModalProps, ...children: unknown[]): HTMLElement {
);
overlay.append(box);
let lastFocus: HTMLElement | null = null; // 打开前焦点宿主,关闭时归还
let release: (() => void) | null = null; // Esc 栈注销函数,关闭时释放
const focusables = (): HTMLElement[] =>
Array.from(box.querySelectorAll<HTMLElement>('button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])'))
.filter((el) => !el.hasAttribute('disabled')); // 弹窗内可聚焦元素(排除禁用)
@@ -31,9 +33,12 @@ export function modal(props: ModalProps, ...children: unknown[]): HTMLElement {
overlay.classList.toggle('ua-open', open); // 显隐跟随信号
if (open) {
lastFocus = document.activeElement as HTMLElement | null; // 记录打开前焦点
release ??= pushOverlay(close); // 入 Esc 栈:多弹层时只关最上层
(box.querySelector('button, input, textarea') as HTMLElement | null)?.focus(); // 打开时聚焦首个可交互元素
} else if (lastFocus) {
lastFocus.focus(); // 关闭时归还焦点
} else {
release?.(); // 出 Esc 栈
release = null;
lastFocus?.focus(); // 关闭时归还焦点
lastFocus = null;
}
});
@@ -49,8 +54,5 @@ export function modal(props: ModalProps, ...children: unknown[]): HTMLElement {
e.preventDefault(); first.focus(); // Tab 到末位时回绕到开头
}
});
document.addEventListener('keydown', (e: KeyboardEvent) => {
if (e.key === 'Escape' && props.open()) close(); // Esc 关闭当前打开的弹窗
});
return overlay;
}