tabindex="0"只应加在业务上必须被键盘访问且无原生聚焦能力的容器上，如自定义下拉触发器，并同步设置role属性、监听Enter/Space键、实现焦点管理与:focus-visible样式。
tabindex="0"加在哪才真正有用
只给
加
tabindex="0"，键盘用户能停住，但按空格或回车没反应——这不是 bug，是语义没配齐。必须同时满足三个条件：元素本身可聚焦、有明确交互意图、能响应键盘行为。
-
tabindex="0"只该加在**业务上必须被键盘访问，且没有原生聚焦能力的容器**上，比如自定义下拉触发器、手写 tab 标题栏、折叠面板开关 - 原生
<button>、<a href>、<input>绝不能加tabindex="0"，会干扰 React/Vue 的焦点同步或 SSR hydration - 加了之后必须同步设
role，例如role="button"或role="tab"，否则屏幕阅读器读不出“这是个按钮”，只报“div” - 别给图标
<span>或装饰性<div>加tabindex="0"——键盘用户停在那儿，既不能操作，也没语义，纯属增加无效停靠点
Enter/Space 键为什么按了没反应
键盘用户不会“点击”，他们按 Enter 或 Space 触发行为。只监听click事件，等于对键盘用户完全关闭入口。
- 必须监听
keydown，不是keyup——后者可能已被浏览器滚动等默认行为吞掉 - 用
event.key === 'Enter'或event.key === ' '（注意是空格字符）判断，别用已废弃的keyCode - 按 Space 时务必调
e.preventDefault()，否则页面会向下滚动一屏 - 如果用了
role="button"却没处理这两个键，屏幕阅读器会报“不可操作”，但用户实际按了毫无反馈
方向键导航卡死或跳到页面外
方向键（ArrowUp/Down 等）不绑定逻辑，就只是普通按键；没做焦点围栏，Tab 键一按就跳出组件，导航链直接断掉。
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
- 监听容器的
keydown，用Array.from(items).indexOf(document.activeElement)算当前索引，再手动.focus()到目标项 - Home/End 键要单独处理：跳首项或末项，别指望 Tab 循环自动覆盖
- 焦点移出组件时，靠
container.contains(document.activeElement)判断归属，再event.preventDefault()+items[0].focus()拉回来 - 嵌套组件（如菜单里套子菜单）要加
data-focus-lock标记，否则外层拦截会吃掉内层合法焦点转移
焦点样式看不见或鼠标用户被干扰
清掉outline又没补替代方案，等于让键盘用户彻底失焦；全用:focus则鼠标点击也亮轮廓，体验突兀。
立即学习“前端免费学习笔记（深入）”；
- 必须用
:focus-visible，它只在键盘触发聚焦时生效，鼠标/触摸后自动退场 - 不要写
outline: none全局禁用——这是无障碍红线 - 如果用了
tabindex="-1"做程序化聚焦（如模态框打开后聚焦按钮），记得提前在 HTML 中写好tabindex="-1"，否则.focus()静默失败 - Safari 不支持
focus({ preventScroll: true })，传对象参数会失效；生产环境建议先检测'preventScroll' in FocusOptions.prototype
tabindex值背后都绑着语义、行为、样式三重契约。漏掉任意一环，键盘用户就会卡在“看得见、停得住、动不了”的状态里。
