本文介绍在不依赖 CSS :has() 的前提下，实现“仅当子 input 通过键盘（如 Tab）获得焦点时，才为父容器添加视觉焦点样式”的可靠方案，涵盖原生 JavaScript 实现缺陷分析及推荐的 React Aria 专业解法。
本文介绍在不依赖 css `:has()` 的前提下，实现“仅当子 input 通过键盘（如 tab）获得焦点时，才为父容器添加视觉焦点样式”的可靠方案，涵盖原生 javascript 实现缺陷分析及推荐的 react aria 专业解法。
在构建可访问性（a11y）友好的自定义表单组件（如封装的 Radio、Checkbox）时，一个常见需求是：视觉焦点环需出现在语义化的父容器上（如 .radio-wrapper），而非裸露的 元素本身；且该焦点样式应仅在键盘导航（如按 Tab 键）触发时显示，避免鼠标点击时误激活。这既满足 WCAG 2.1 的焦点可见性要求，又保持交互直觉——用户用键盘操作时能清晰感知当前焦点位置，而鼠标用户则不受干扰。
❌ 原生方案的局限性
- :focus-within 虽能捕获子元素获得焦点的状态，但无法区分焦点来源（键盘 vs 鼠标），导致点击即触发，违背设计意图；
- 纯 CSS :has(:focus) 是理想解法，但截至 2024 年，其在 Safari 中支持仍受限（iOS
- 手动监听 keydown/keyup（如仅检测 Tab）看似可行，但存在严重缺陷：
- 忽略 Shift+Tab（反向导航）、Enter/Space 触发的焦点移动；
- 无法处理浏览器自动聚焦（如页面加载后首个可聚焦元素）；
- 全局事件监听逻辑脆弱，难以覆盖所有边缘场景（如 iframe、Shadow DOM）；
- 单元测试困难（如 Jest 中模拟真实焦点流成本高），代码覆盖率低，维护性差。
✅ 推荐方案：使用 @react-aria/focus（useFocusRing）
React Aria 提供的 useFocusRing 是经过无障碍专家验证的工业级解决方案。它通过底层检测 focus 事件的 detail 属性、document.activeElement 变化及键盘事件序列，智能判断当前焦点是否由键盘触发，并返回精确的 isFocusVisible 布尔值。
使用示例（React + TypeScript）
import React, { useState } from 'react';
import { useFocusRing } from '@react-aria/focus';
import classNames from 'classnames';
interface RadioOptionProps {
id: string;
label: string;
checked: boolean;
onChange: (checked: boolean) => void;
}
export function RadioOption({ id, label, checked, onChange }: RadioOptionProps) {
const { isFocusVisible, focusProps } = useFocusRing();
return (
<label
className={classNames('radio-wrapper', {
'is-focused': isFocusVisible,
'is-checked': checked,
})}
onClick={() => onChange(true)}
>
<input
{...focusProps} // ✅ 关键：将 focusProps 透传给 input
id={id}
type="radio"
name="radio-group"
checked={checked}
onChange={(e) => onChange(e.target.checked)}
// ⚠️ 注意：不要设置 tabIndex！focusProps 已处理
/>
<span className="radio-visual" aria-hidden="true" />
<span className="radio-label">{label}</span>
</label>
);
}样式建议（CSS）
.radio-wrapper {
display: inline-flex;
align-items: center;
padding: 8px 12px;
border-radius: 6px;
cursor: pointer;
transition: outline 0.2s ease;
}
/* 仅键盘焦点时显示外框 */
.radio-wrapper.is-focused {
outline: 2px solid #007aff;
outline-offset: 2px;
}
/* 选中态视觉反馈（独立于焦点） */
.radio-wrapper.is-checked .radio-visual::before {
content: '●';
color: #007aff;
}
/* 移除原生 input 的默认焦点样式 */
.radio-wrapper input:focus {
outline: none;
}? 关键实践要点
- focusProps 必须透传给 ：它内部包含 onFocus, onBlur, onKeyDown 等处理逻辑，确保焦点状态同步；
- 禁用 tabIndex 手动干预：useFocusRing 自动管理可聚焦性，显式设置 tabIndex 可能破坏其判断；
- 语义化结构优先：使用
- 无障碍属性补充：对非标准视觉元素（如 .radio-visual）添加 aria-hidden="true"，避免屏幕阅读器重复播报。
✅ 总结
解决“键盘专属父容器焦点样式”问题，不应陷入手动事件模拟的泥潭。useFocusRing 以标准化、可测试、跨浏览器兼容的方式，准确识别键盘焦点意图。它不仅是技术方案，更是对 Web 无障碍规范（如 WCAG 2.4.7 Focus Visible）的直接践行。在 React 生态中，优先集成 React Aria 或类似成熟库（如 Headless UI、Reach UI），远胜于自行实现易出错的焦点逻辑。
