aria-haspopup必须设为menu、listbox、tree、grid、dialog之一，禁用true；因ARIA 1.1已废弃该值，否则语义错误且读屏器可能忽略子菜单逻辑。
aria-haspopup 不是弹出“标注”，而是声明一个元素具有可展开的交互式子菜单或弹出内容。它本身不触发弹出，也不控制样式或行为，只是为辅助技术（如屏幕阅读器）提供语义信息。用错类型或忽略配套逻辑，会导致键盘用户无法操作、AT 读不出菜单状态、甚至被误判为 bug。
怎么设 aria-haspopup 的值才对
它的值必须匹配实际弹出内容的类型，且仅当有真实交互逻辑支撑时才可用：
-
aria-haspopup="menu"：对应传统下拉菜单（如<button></button>点击后展开<ul role="menu"></ul>），这是最常见也最稳妥的选择 -
aria-haspopup="listbox"：仅用于类似<select></select>的列表选择器，且父元素需配role="combobox"或role="listbox" -
aria-haspopup="tree"：用于可展开/折叠的树形结构（如文件浏览器），需配合role="tree"和完整 ARIA 树模式 -
aria-haspopup="grid"或"dialog"：极少用；若用"dialog"，必须确保弹出的是模态对话框（role="dialog"），且焦点管理正确 - 禁止用
true、"true"或空字符串 —— 这些是非标准值，部分 AT 会忽略或报错
为什么加了 aria-haspopup 键盘还是打不开菜单
因为 aria-haspopup 只是“说它有”，不是“让它有”。键盘操作（如 Enter、Space、ArrowDown）必须由你手动监听并实现：
DeepBI DHTML 页面生成器
下载
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
- 按钮类触发器需监听
keydown，对Enter和Space阻止默认行为并 toggle 菜单 - 若支持方向键导航（如
ArrowDown打开 + 自动聚焦第一个菜单项），需额外实现焦点流和aria-expanded同步 - 菜单容器必须有
role="menu"（或其他对应 role），且每个菜单项要有role="menuitem" - 忘记加
aria-expanded="true/false"是高频问题 —— 屏幕阅读器靠它判断当前开闭态，否则用户不知道菜单是否已展开
aria-haspopup 和原生 <details>/<summary></summary></details> 怎么选
如果只是简单展开一段说明文字或静态内容，优先用 <details></details>：
立即学习“前端免费学习笔记（深入）”；
- 它原生支持键盘（
Space切换）、屏幕阅读器语义明确、无需手写 JS 控制aria-expanded -
aria-haspopup是给“菜单”“树”“列表框”这类复杂交互组件用的，目标是满足 WCAG 2.1 SC 1.3.1 和 4.1.2 - 混用会出问题：比如给
<summary></summary>加aria-haspopup="menu"是冗余且错误的 ——<details></details>已有完整语义，AT 会重复播报 - 真要自定义菜单样式又想省事？用
<div role="button" aria-haspopup="menu" aria-expanded="false"> + 手动 JS，但务必补全焦点管理与键盘逻辑 <p>真正难的不是写对 <code>aria-haspopup，而是让整个菜单链路（触发、展开、聚焦、关闭、状态同步、键盘导航）在所有主流 AT（NVDA、JAWS、VoiceOver）下表现一致。漏掉任意一环，对依赖键盘或屏幕阅读器的用户就是不可用。
