本文介绍在实现 WAI-ARIA Select-Only Combobox 时，如何精准控制焦点视觉反馈：禁用鼠标交互产生的 outline 高亮，同时完整保留键盘导航（Tab、Arrow 键等）下的可访问性焦点指示。
本文介绍在实现 wai-aria select-only combobox 时，如何精准控制焦点视觉反馈：禁用鼠标交互产生的 `outline` 高亮，同时完整保留键盘导航（tab、arrow 键等）下的可访问性焦点指示。
在遵循 W3C ARIA Combobox Pattern（Select-Only 版本） 实现自定义下拉控件时，一个常见但关键的无障碍需求是：区分输入方式，差异化呈现焦点状态。默认情况下，现代浏览器对
元素在鼠标点击后仍会应用 :focus 样式（如蓝色轮廓），这不仅干扰视觉设计，更违背 WCAG 2.4.7（焦点可见性）中“焦点指示应与用户输入方式一致”的原则——即：鼠标操作不应触发持久性焦点环，而键盘操作必须清晰可见。
✅ 正确解法：使用 :focus-visible + 渐进增强回退
核心策略是仅在用户通过键盘触发焦点时显示 outline，而鼠标点击或触摸操作则自动抑制该样式。现代标准推荐使用 CSS 的 :focus-visible 伪类：
.combo-option.option-current {
/* 移除原生 focus outline，改由 focus-visible 控制 */
outline: none;
}
/* 仅当键盘聚焦时显示高亮 */
.combo-option.option-current:focus-visible {
outline: 3px solid #0067b8;
outline-offset: -3px;
}
⚠️ 注意：.combo-option 元素需确保 tabindex="-1"（已在示例中设置），否则无法接收键盘焦点，:focus-visible 将不生效。
?️ 兼容性保障：为旧版浏览器提供 @supports 回退
并非所有浏览器都支持 :focus-visible（如 Safari ≤ 15.4、旧版 Edge）。为保证一致性体验，应通过 @supports 提供优雅降级：
/* 主流浏览器：仅键盘聚焦时显示 */
.combo-option.option-current:focus-visible {
outline: 3px solid #0067b8;
outline-offset: -3px;
}
/* 旧版浏览器回退：对所有:focus统一处理（但需配合JS优化） */
@supports not selector(:focus-visible) {
.combo-option.option-current:focus {
outline: 3px solid #0067b8;
outline-offset: -3px;
}
}
然而，单纯依赖 :focus 在旧浏览器中仍会导致鼠标点击后残留 outline。此时需结合 JavaScript 进行运行时输入模式检测（推荐方案）：
// 在 Select.prototype.onOptionClick 中增强
Select.prototype.onOptionClick = function(index) {
this.onOptionChange(index);
this.selectOption(index);
this.updateMenuState(false);
// 主动移除鼠标触发的焦点 outline（兼容旧浏览器）
const activeOption = this.listboxEl.querySelector('.option-current');
if (activeOption && activeOption.hasAttribute('tabindex')) {
activeOption.blur(); // 立即清除焦点，避免视觉残留
}
};
// 同时，在 onOptionMouseDown 中阻止默认焦点行为
Select.prototype.onOptionMouseDown = function(event) {
event.preventDefault(); // 阻止原生 focus 触发
this.ignoreBlur = true;
};
? 关键注意事项
- 不要移除 tabindex="-1"：它是使 role="option" 可键盘聚焦的必要条件，也是 aria-activedescendant 正常工作的基础。
- 避免 outline: 0 全局重置：这会破坏所有可访问性焦点，违反 WCAG。务必仅针对 .option-current 等特定状态重置，并用 :focus-visible 替代。
- 测试真实交互流：使用键盘（Tab → Arrow → Enter）验证焦点环是否出现；使用鼠标点击验证无 outline 残留；启用屏幕阅读器（NVDA/JAWS）确认 aria-selected 和 aria-activedescendant 语义未受影响。
- CSS 优先级检查：确保你的 .focus-visible 规则未被其他 outline 声明覆盖（如重置样式库中的 * { outline: 0 }）。
✅ 总结
实现“键盘有焦点、鼠标无高亮”的核心在于三层保障：
- CSS 层：用 :focus-visible 精准控制视觉反馈；
- 兼容层：用 @supports 为旧浏览器提供降级方案；
- JS 层：在鼠标事件中主动调用 blur() 并阻止默认聚焦，堵住兼容性缺口。
这种方案既满足 WCAG 2.1 AA 级别对焦点可见性的严格要求，又保持了 UI 的简洁性与专业性，是构建符合现代无障碍标准的自定义 Combobox 的必备实践。
