本文详解如何实现 aria 标准下 combobox 组件的“智能焦点”行为：仅当用户通过键盘导航（如 tab、方向键）激活选项时显示焦点轮廓，而鼠标点击时不触发视觉焦点，从而兼顾可访问性与 ui 干净度。
本文详解如何实现 aria 标准下 combobox 组件的“智能焦点”行为：仅当用户通过键盘导航（如 tab、方向键）激活选项时显示焦点轮廓，而鼠标点击时不触发视觉焦点，从而兼顾可访问性与 ui 干净度。
在构建符合 WAI-ARIA Combobox (Select-Only) 模式 的自定义下拉组件时，一个常见且关键的可访问性需求是：区分输入方式——键盘导航需清晰可见焦点状态，而鼠标点击应避免冗余的焦点高亮（如蓝色外边框），防止视觉干扰。
当前示例中，.combo-option.option-current 类通过 outline: 3px solid #0067b8 强制渲染焦点环，但该样式对所有 :focus 场景一视同仁，导致鼠标点击后仍残留明显轮廓，违背“仅键盘可见”的设计原则。
✅ 正确解法：使用 :focus-visible + 渐进增强回退
现代浏览器支持 :focus-visible 伪类，它仅在用户通过键盘（而非鼠标/触摸）触发焦点时生效，完美匹配需求：
.combo-option.option-current {
/* 移除默认 focus outline */
outline: none;
}
/* 仅键盘操作时显示焦点环 */
.combo-option.option-current:focus-visible {
outline: 3px solid #0067b8;
outline-offset: -3px;
}⚠️ 兼容性保障：为旧版浏览器提供 @supports 回退
由于 Safari 15.4 之前、部分旧版 Edge 等不支持 :focus-visible，需用 @supports 规则优雅降级：
.combo-option.option-current {
outline: none; /* 始终禁用默认 focus */
}
.combo-option.option-current:focus-visible {
outline: 3px solid #0067b8;
outline-offset: -3px;
}
/* 当浏览器不支持 :focus-visible 时，退回到传统 :focus */
@supports not selector(:focus-visible) {
.combo-option.option-current:focus {
outline: 3px solid #0067b8;
outline-offset: -3px;
}
}? 原理说明：
@supports not selector(:focus-visible)是 CSS 中检测选择器支持性的标准方式，比 UA 判断更可靠。它确保旧浏览器仍能获得基础键盘焦点反馈，而新浏览器优先启用更精准的:focus-visible行为。
? 额外建议：配合 JavaScript 增强体验
虽然 CSS 层面已解决核心问题，但为彻底消除鼠标点击后的瞬时焦点残留（尤其在快速连点时），可在 onOptionMouseDown 中主动移除焦点（注意不影响键盘逻辑）：
Select.prototype.onOptionMouseDown = function(event) {
// 阻止鼠标点击触发 comboEl 的 focus 流程（避免 blur/focus 闪烁）
event.preventDefault();
// 可选：立即移除 listbox 的焦点，确保无视觉残留
this.listboxEl.blur();
};同时确保 onOptionClick 不再调用 focus()，保持焦点始终锚定在主 combobox 输入区（this.comboEl），符合 ARIA 推荐的焦点管理模型。
✅ 总结
| 方案 | 优点 | 缺点 | 适用场景 |
|---|---|---|---|
:focus-visible（推荐） |
语义精准、原生支持、无需 JS | 需检查兼容性 | 现代应用首选 |
@supports 回退 |
兼容 IE11+/旧 Safari，渐进增强 | 需额外 CSS 规则 | 生产环境必备 |
完全禁用 outline
|
简单粗暴 | 损害键盘用户可访问性 ❌ | 不推荐 |
最终效果：键盘用户 Tab 或方向键导航时，选项清晰高亮；鼠标用户点击即选、无焦点环干扰，真正实现「无障碍友好」与「界面简洁」的统一。
