展品详情关闭后键盘焦点丢了，怎样验证 dialog 的进入、圈定与返回

打开模态详情时把焦点送入详情，关闭后回到有意义的触发入口。原生 dialog.showModal 可以提供模态基础行为，但仍要验证初始焦点、Tab范围、Escape关闭和返回位置，不能只看弹层有没有显示。

先明确是模态还是普通浮层

附件使用原生dialog并调用showModal，而不是给一个div加灰色遮罩。模态期间背景应不可交互，键盘焦点在对话框内部循环；普通浮层则未必拥有这些责任。给div添加role=dialog只能表达语义，不能自动实现背景inert、焦点限制或关闭逻辑。项目中应先确认需求，再选择原生元素或完整的自定义实现。

为进入位置选择一个具体目标

示例把autofocus放在第一颗操作按钮，打开后脚本断言activeElement是first。长篇图文详情可能更适合先聚焦带tabindex=-1的标题，危险确认则可能把初始焦点放在取消操作；这些取舍取决于任务。不要无论内容多少都把焦点塞进一个不可见的关闭叉号，导致键盘用户不知道自己进入了什么上下文。

循环和返回都要实际按键

程序连续按四次Tab，确认焦点只在first与last之间，没有跑到背景按钮，再按Escape检查dialog已关闭且焦点回open。夹具在两端显式处理Tab与Shift+Tab，避免所测headless环境越过末项后出现空activeElement记录；这段端点处理属于示例代码，不冒称原生dialog必然提供同样循环。反例是关闭后focus到body，迫使用户重找入口；触发按钮被删除时应选择逻辑下一步目标。

原生行为仍有适用范围

这些断言针对本地Chromium，不替代浏览器与屏幕阅读器组合测试。弹层中再打开嵌套弹层、删除当前展品或发生路由跳转时，需要另外设计返回栈。这个实验不锁定系统快捷键，不阻止工作人员退出浏览器；网页模态与Windows展台限制是不同职责，把dialog测试通过写成“展台无法退出”会越出证据。

动态弹窗需要更新端点集合

本例两端键盘处理只针对固定first与last按钮，不应直接复制到会增删控件的复杂弹窗。动态内容需在按键时或内容变化后重新确认当前可达项，并考虑禁用、隐藏和嵌套层。反向Shift+Tab也必须验证，不能只测正向循环。若弹窗暂时没有可聚焦按钮，应提供适当容器焦点与关闭方式，避免端点列表为空时陷入无法操作的状态。

下载并复现

下载原创HTML夹具、独立验证程序、本次执行记录和依赖与运行说明，放在同一目录。安装Playwright 1.58.0及其Chromium后运行 python verify.py；程序使用两个随机本地端口，自动关闭浏览器与服务，不请求外网或业务接口。

本次实际环境为Python 3.12.4、Playwright 1.58.0、Chromium 145.0.7632.6。Playwright浏览器鼠标/键盘与页面API实跑；无实体硬件或业务控制。断言已通过；完整事件和数值保留在执行记录，不能把它改名后当目标展项测量。

自动化只检查焦点、控件行为和可查询语义，没有实际运行屏幕阅读器，也没有招募参与者。朗读顺序、触摸辅助技术和目标终端可用性需要另外验证。

继续核查与一级出处

基础背景见中控触摸界面（UI）设计规范。弹窗返回入口依赖页面原有焦点顺序保持合理，可继续用查询页 Tab 顺序跳到屏幕角落，怎样核对 tabindex 与 DOM 顺序取证；相关工程入口在专题与产品对接说明。

• APG非规范性模式：模态焦点、关闭与返回：2026-10-24已联网读取一级来源；W3C APG现行非规范性实践指导，不是跨浏览器支持保证。