移除默认焦点样式必须提供替代
别名: custom focus style · outline none · focus-visible · focus replacement
概念解释
自定义焦点指示（custom focus indicator）是在移除浏览器或平台默认焦点外观后，提供功能等价、可见且覆盖所有可聚焦状态的替代标记。默认轮廓有时与品牌视觉不协调，但它承担了键盘用户定位下一步操作对象的基础功能。把 outline 设为 none 并非单纯的样式清理；若没有替代，就删除了一个交互状态。替代必须在键盘焦点出现时生效，而不能只在鼠标点击、悬停或组件的某个「活跃」状态下出现。
机制
默认样式由浏览器在不同原生元素和系统设置下自动施加，覆盖范围广且常能适应用户主题。自定义样式通常通过组件库、重置样式或局部 CSS 分散实现，容易遗漏链接、第三方控件、嵌入内容、动态创建的元素与异常状态。更隐蔽的错误是把 :focus 与 :focus-visible 混为一谈：鼠标点击后的焦点显示策略可以不同，但键盘移动后的焦点不能被隐藏。每一次覆盖默认行为，产品团队便接管了跨组件、跨主题和跨输入方式保持可见性的责任。
怎么研究
可用静态扫描找出取消 outline 或覆写焦点规则的代码位置，再以端到端键盘测试遍历所有组件类型、路由和状态组合。检查项目包括原生与自定义控件、弹窗、错误字段、禁用后恢复、异步插入内容、深色主题、强制颜色与高缩放。扫描只能证明声明存在，不能证明替代真的呈现；测试者必须在不使用鼠标的条件下识别每个落点。将新组件加入组件库或升级第三方依赖时，焦点回归测试尤其重要。
边界
不必让鼠标操作与键盘操作共享完全相同的焦点外观；对指针点击后的短暂焦点可采用不同策略，前提是不会抹掉键盘路径。也不应为不可聚焦元素伪造焦点，以免制造可操作错觉。若平台原生控件的默认指示已可靠且符合产品情境，保留它通常优于无收益的重绘。自定义不是审美义务，而是只有在确有交互或视觉目的且能维护等价能力时才承担的工程选择。
怎么落地
- 在样式重置和组件库中禁止无替代地移除焦点轮廓；每条覆盖规则都应指向对应的键盘可见样式。
- 将焦点样式作为组件契约的一部分，测试链接、按钮、输入、复合控件和第三方嵌入，而非只检查主按钮。
- 分开验证键盘导航与鼠标点击路径，确保前者始终显示明确落点，后者的视觉策略不会影响它。
- 在浏览器、主题、强制颜色、缩放和动态状态变化下跑键盘回归；任何一个控件重新落回无指示状态都应阻止发布。