aria-haspopup="listbox" 表示触发元素激活后将展示一个 role="listbox" 的可聚焦、可键盘操作的菜单控件，仅声明语义关系，需配套 aria-expanded、role="listbox"、role="option"、aria-selected、aria-controls 及完整键盘交互逻辑，专用于完全自定义下拉选择器，不适用于原生 <select>。
aria-haspopup="listbox" 的语义含义和适用场景
这个属性不是“让元素弹出列表框”，而是告诉辅助技术：“这个触发元素（比如按钮）激活后，会展示一个 role="listbox" 的可聚焦、可键盘操作的菜单式控件”。它本身不创建任何 UI，只声明关系。常见误用是给普通下拉 <select> 或自定义弹层直接加这个属性却不配对 role="listbox" 和完整键盘导航逻辑。
必须配套的 DOM 结构和角色链
单独设 aria-haspopup="listbox" 没有意义。它必须和以下三者同时存在：
- 触发元素（如按钮）有
aria-haspopup="listbox"和aria-expanded（控制开闭状态） - 被控制的弹层容器必须有
role="listbox" - 弹层内每个可选项必须是
role="option"，且用aria-selected标识当前选中项 - 触发元素需通过
aria-controls指向弹层 ID（例如aria-controls="my-listbox"）
键盘交互和焦点管理不能省
仅加 ARIA 属性不会自动实现上下键切换、Enter 确认、Escape 关闭等行为。你得手动监听事件并控制：
- 按下
ArrowDown时，把焦点移到第一个role="option"；再次按则移到下一个 -
Home/End跳转首尾选项 - 聚焦到某个
option后，按Enter或Space触发选择，并同步更新aria-selected和aria-expanded - 弹层关闭时，焦点必须返回触发按钮（否则屏幕阅读器会丢失上下文）
别用在原生 <select> 上
原生 <select> 已自带完整 ARIA 语义和键盘支持，强行加 aria-haspopup="listbox" 反而可能干扰辅助技术。这个组合只适用于**完全自定义的下拉选择器**（比如用 <div> 实现的、需要精确控制样式或行为的组件）。如果你用的是 React/Vue 组件库，先查文档——很多已内置合规实现，直接传 role="listbox" 相关 props 即可，不用手撸 ARIA。
立即学习“前端免费学习笔记（深入）”；
最常被忽略的点：没有 aria-activedescendant 时，焦点必须真实落在 option 元素上；用了 aria-activedescendant（比如在 listbox 上设，指向某个 option ID），就得确保焦点始终留在 listbox 容器，由 ARIA 控制“视觉焦点”指示。二者选一，混用会出问题。
