本文介绍如何通过 CSS :focus-visible 实现“仅键盘聚焦显示轮廓、鼠标点击不显示”的无障碍交互行为，并提供兼容旧浏览器的渐进增强方案。
本文介绍如何通过 css :focus-visible 实现“仅键盘聚焦显示轮廓、鼠标点击不显示”的无障碍交互行为，并提供兼容旧浏览器的渐进增强方案。
在实现符合 WAI-ARIA 规范的可访问下拉组合框（如 W3C ARIA Authoring Practices Guide 中的 select-only combobox 示例）时，一个常见但关键的细节是：视觉焦点指示器（focus outline）应服务于键盘用户，而非干扰鼠标用户的操作流。当前示例中，鼠标点击某项后，该项仍保留蓝色焦点轮廓（由 .combo-option.option-current { outline: 3px solid #0067b8; } 触发），这不仅违背用户直觉，更可能造成 WCAG 2.4.7（焦点可见性）的误用——因为该轮廓并非由键盘导航触发，而是由点击行为被动继承。
✅ 正确做法：区分输入方式，按需显示焦点
现代解决方案是使用 :focus-visible 伪类，它仅在元素因键盘操作（如 Tab、方向键）获得焦点时生效，而忽略鼠标或触摸事件触发的 focus：
.combo-option.option-current {
/* 移除默认的无条件 outline */
outline: none;
}
/* 仅键盘聚焦时显示高亮轮廓 */
.combo-option.option-current:focus-visible {
outline: 3px solid #0067b8;
outline-offset: -3px;
}⚠️ 注意：
.combo-option元素本身需支持聚焦。由于示例中<div role="option"> 默认不可聚焦，你应在 <code>createOption()方法中为其添加tabindex="-1"（已存在语义聚焦能力），并在onOptionChange()中确保调用options[index].focus()（当前代码未显式聚焦选项元素，但aria-activedescendant+option-current类已满足 ARIA 模式要求；若需视觉 focus 轮廓生效，建议补充）：// 在 Select.prototype.onOptionChange 中添加： options[index].focus(); // 确保 DOM 元素真正获得焦点，使 :focus-visible 可触发?️ 兼容性保障：优雅降级至
:focus尽管 Chrome、Firefox、Edge 等主流浏览器均已支持
:focus-visible，但为兼容 Safari 15.4 之前版本及部分旧版 IE/Edge，推荐使用@supports进行特性检测降级：.combo-option.option-current { outline: none; } /* 现代浏览器：仅键盘聚焦显示 */ .combo-option.option-current:focus-visible { outline: 3px solid #0067b8; outline-offset: -3px; } /* 旧浏览器回退：所有 focus 均显示（仍优于无 outline） */ @supports not selector(:focus-visible) { .combo-option.option-current:focus { outline: 3px solid #0067b8; outline-offset: -3px; } }此方案确保：
- 键盘用户始终获得清晰、一致的焦点反馈；
- 鼠标/触摸用户不会看到突兀的轮廓干扰界面；
- 所有浏览器至少提供基础焦点指示（无障碍底线保障）。
? 补充说明：为何不用
:focus-within或mousedown移除？
:focus-within作用于父容器，无法精准控制子项 outline；- 通过 JavaScript 监听
mousedown并el.blur()会破坏键盘导航流程，且违反“焦点管理应由用户代理主导”的可访问性原则；:focus-visible是 W3C 标准方案，被屏幕阅读器与辅助技术广泛识别，是目前最可靠、最语义化的解法。✅ 总结
要实现“鼠标点击不显示焦点轮廓、键盘操作才显示”，请：
- 移除无条件
outline样式；- 使用
.option-current:focus-visible定义键盘专属焦点样式；- 通过
@supports not selector(:focus-visible)提供:focus回退；- 确保选项元素可通过
focus()方法获得真实 DOM 焦点（必要时补充调用）。此举既满足 WCAG 2.4.7 对焦点可见性的严格要求，又提升了鼠标用户的视觉简洁性，是现代可访问 Web 组件开发的标准实践。
