折叠说明能点开却不能键盘展开,怎样用 details summary 核对行为
简单的展开说明可优先采用 details 与首个 summary,让浏览器提供焦点与激活基础行为。用键盘实际切换 open 状态,再检查内容是否可见;不要给标题加一个 click 就当折叠控件已完整实现。
把控件任务限定为披露内容
夹具只有一项展品材料说明,summary作为可聚焦的摘要,后面是展开内容。这个元素适合展开和收起同一份说明,不适合冒充标签页、菜单或跨页面导航。若设计要求多级树、选中状态或复杂方向键,需要选择对应模式,不能仅因为details能折叠就把所有结构都塞进去。
状态从open读取而非从样式猜
程序先Tab到summary,再按Enter,断言details.open为真;按Space后应回到假,并采集toggle事件。真实键盘激活与事件由浏览器产生,脚本没有手工dispatch一个toggle冒充用户操作。属性是布尔状态,HTML里写open=false仍然是存在open属性,不能把字符串false误当关闭,关闭应移除属性或设置IDL属性为false。
事件不必对应每一次同步赋值
toggle反映状态改变,快速连续的程序变动可能被合并,不应把它当每条业务操作不可丢失的审计流。本例两次按键之间等待浏览器处理,目的是检验用户可见的往返状态。如果项目需要统计具体操作,应在自己的动作入口记录来源与编号,同时把最终open作为状态事实,不能只数toggle回调推断观众点了几次。
补上真实内容和样式复测
自定义summary标记、隐藏默认箭头或加入内部链接后,需再次核对焦点环和激活范围。展开很长内容时,页面滚动与后续Tab位置也应检查。附件不引入互斥name分组,避免把单项披露与手风琴规则混写;没有测试屏幕阅读器、移动WebView或参与者理解,项目验收应明确这些待测项。
不要在summary内部堆叠冲突动作
摘要区域若同时放按钮、链接或输入框,键盘和点击的职责容易混杂。实际设计应先确认点摘要是展开说明还是触发子动作,再用目标浏览器验证。对简单展品说明,保留清楚的摘要文字和一个披露入口通常更容易测清楚;若要做每行右侧多个控制动作,应考虑其他结构。附件只用纯文字summary,不宣称复杂嵌套元素也有同样激活结果。
下载并复现
下载原创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)设计规范。普通披露内容与需要圈定焦点的模态详情属于不同任务,可继续用展品详情关闭后键盘焦点丢了,怎样验证 dialog 的进入、圈定与返回取证;相关工程入口在专题与产品对接说明。
- details的open状态与summary激活:2026-10-24已联网读取一级来源;WHATWG HTML Living Standard,读取页标记2026-10-22更新。
留言讨论
评论发布后会被人工复核,违规内容将被删除。
如果发表没有反应,可以前往联系我们告诉我们。