role="button"元素默认不响应Enter/Space键，需手动添加tabindex="0"并监听keydown事件，调用preventDefault()和click()；推荐优先使用原生<button>。
role="button" 的元素默认不响应 Enter 键
给非 <button> 元素（比如 <div> 或 <span>）加 role="button"，只是告诉辅助技术“这玩意儿语义上是个按钮”，但浏览器不会自动赋予它键盘交互能力。它既不能被 Tab 焦点捕获（除非手动加 tabindex="0"），也不会在按 Enter 或 Space 时触发点击逻辑 —— 这和原生 <button> 行为有本质区别。
必须手动监听 keydown 并调用 click()
要让 role="button" 响应回车，得自己补全交互链：
- 确保元素可聚焦：
tabindex="0"是硬性前提，否则键盘用户根本碰不到它 - 监听
keydown（不是keypress，后者已废弃），判断event.key === 'Enter'或兼容旧环境的event.keyCode === 13 - 必须调用
event.preventDefault()，否则在表单内可能触发表单提交，在<textarea>里会插入换行 - 手动触发逻辑：推荐
this.click()（如果绑在元素上）或document.getElementById('xxx').click()，复用已有事件监听器
示例：
<div role="button" tabindex="0" id="myBtn">点我</div>
<script>
document.getElementById('myBtn').addEventListener('keydown', (e) => {
if (e.key === 'Enter' || e.keyCode === 13) {
e.preventDefault();
e.target.click();
}
});
</script>
比 role="button" 更优的解法是直接用 <button>
如果你只是为了获得按钮语义和键盘支持，<button type="button"> 是零成本方案：
立即学习“前端免费学习笔记（深入）”；
- 天然可聚焦、默认响应 Enter/Space 键
- 无需
tabindex、无需手写事件监听 - 自带
role="button"和正确无障碍状态，Lighthouse 不报错 - 避免因忘记
preventDefault()导致表单意外提交或输入框换行
只有当你无法修改 HTML 结构（如第三方组件只允许传入 <div>）时，才被迫走 role="button" + 手动监听这条路。
别漏掉空格键（Space）的支持
WCAG 要求切换类按钮同时支持 Enter 和 Space。如果你的场景是开关/展开收起，仅处理 Enter 是不够的：
- 用户习惯用空格键确认聚焦项，尤其在表单中
- Screen Reader 用户依赖两者行为一致
- 判断条件应扩展为：
if (e.key === 'Enter' || e.key === ' ') - 注意：按空格时，
e.preventDefault()同样必要，否则会在<input>或<textarea>中插入空格字符
真正容易被忽略的是：很多人写了 Enter 支持，却忘了空格——结果在无障碍测试里直接挂掉。
