本文介绍如何通过 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 元素本身需支持聚焦。由于示例中

默认不可聚焦，你应在 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 标准方案，被屏幕阅读器与辅助技术广泛识别，是目前最可靠、最语义化的解法。

✅ 总结

要实现“鼠标点击不显示焦点轮廓、键盘操作才显示”，请：

1. 移除无条件 outline 样式；
2. 使用 .option-current:focus-visible 定义键盘专属焦点样式；
3. 通过 @supports not selector(:focus-visible) 提供 :focus 回退；
4. 确保选项元素可通过 focus() 方法获得真实 DOM 焦点（必要时补充调用）。

此举既满足 WCAG 2.4.7 对焦点可见性的严格要求，又提升了鼠标用户的视觉简洁性，是现代可访问 Web 组件开发的标准实践。