本文详解如何实现“键盘聚焦可见、鼠标点击不显示焦点轮廓”的无障碍友好交互，通过 :focus-visible 与 @supports 回退方案精准控制 role="listbox" 中选项的视觉焦点，兼顾可访问性与用户体验。
本文详解如何实现“键盘聚焦可见、鼠标点击不显示焦点轮廓”的无障碍友好交互，通过 :focus-visible 与 @supports 回退方案精准控制 role="listbox" 中选项的视觉焦点，兼顾可访问性与用户体验。
在实现符合 WAI-ARIA 规范的自定义下拉组合框（如 W3C ARIA Authoring Practices Guide 示例）时，一个常见但关键的 UX/AX 问题浮现：当用户用鼠标点击某项选项后，该选项常被意外加上浏览器默认的蓝色焦点轮廓（outline），干扰视觉一致性；而与此同时，键盘导航（如 Tab、方向键）必须保留清晰的焦点指示——这是 WCAG 2.4.7（焦点可见性）的强制要求。
直接移除 outline: none 是错误做法，它将同时破坏键盘用户的可感知性。正确解法是采用现代 CSS 的 :focus-visible 伪类，它仅在由键盘触发聚焦时生效，对鼠标或触摸操作自动忽略：
.combo-option:focus-visible {
outline: 3px solid #0067b8;
outline-offset: -3px;
}但需注意兼容性：截至 2026 年，尽管主流浏览器（Chrome 86+、Firefox 89+、Edge 89+、Safari 15.4+）均已支持 :focus-visible，部分旧版或企业环境浏览器（如 IE11、旧版 Electron 内核）仍不支持。因此，必须提供优雅降级方案。
推荐使用 @supports 检测并回退至传统 :focus：
/* 仅键盘聚焦时显示轮廓（现代标准） */
.combo-option:focus-visible {
outline: 3px solid #0067b8;
outline-offset: -3px;
}
/* 为不支持 :focus-visible 的浏览器回退 */
@supports not selector(:focus-visible) {
.combo-option:focus {
outline: 3px solid #0067b8;
outline-offset: -3px;
}
}⚠️ 重要注意事项：
- 不要对
.combo-option同时设置tabindex="-1"和:focus-visible——tabindex="-1"本身不阻止鼠标点击触发聚焦，但会阻止键盘自然聚焦（除非显式调用.focus()）。本例中，选项元素本就不应接收键盘焦点（焦点始终保留在combobox元素上，通过aria-activedescendant管理），因此.combo-option的:focus-visible实际作用于鼠标点击后临时获得焦点的瞬间。若你观察到点击后轮廓残留，可补充 JavaScript 清除焦点：onOptionClick(index) { this.onOptionChange(index); this.selectOption(index); this.updateMenuState(false); // 防止点击后选项残留焦点轮廓 event.currentTarget.blur(); // 或 setTimeout(() => optionEl.blur(), 0) } - 确保
role="listbox"容器本身tabindex="-1"（如示例代码所示），避免其意外捕获键盘焦点； - 所有交互逻辑（如
onOptionMouseDown中设置this.ignoreBlur = true）已为防 blur 冲突做了处理，配合:focus-visible可实现平滑过渡。
✅ 总结：
通过 :focus-visible + @supports 回退的双层 CSS 策略，你既能满足无障碍标准（键盘用户始终有明确焦点指示），又能提升鼠标/触控用户的视觉纯净度。这是当前构建现代化、合规 Web 组件的推荐实践，无需依赖 JavaScript 检测输入设备类型，语义清晰、性能高效、维护成本低。
