本文介绍使用 :focus-within 伪类为 opacity:0 的 元素提供清晰、符合无障碍标准的焦点环，确保键盘用户能明确感知当前聚焦状态。
本文介绍使用 `:focus-within` 伪类为 opacity:0 的 `` 元素提供清晰、符合无障碍标准的焦点环，确保键盘用户能明确感知当前聚焦状态。
在构建可访问的头像上传组件时，常见做法是将 设为完全透明（opacity: 0）并覆盖在视觉容器上——这既保留了语义结构与交互能力，又避免了原生控件样式难以定制的问题。但由此带来一个关键可访问性缺陷：透明输入获得焦点后，浏览器默认的 outline 不再可见，导致键盘导航用户无法判断当前操作目标。
解决该问题最简洁、现代且语义正确的方式是利用 :focus-within 伪类。它会在任意后代元素获得焦点时，触发父容器的样式响应。因此，我们无需操作隐藏的 自身的 outline（它本就不应被直接样式化），而是将焦点样式应用到其可视的包裹容器 .profile-pic 上：
.profile-pic:focus-within {
outline: 2px dotted #4a6fa5;
outline-offset: 4px; /* 留出呼吸空间，避免紧贴边缘 */
box-shadow: 0 0 0 3px rgba(74, 111, 165, 0.3);
}
✅ 优势说明：
- 无障碍友好：满足 WCAG 2.4.7（焦点可见性）要求；
- 无需 JavaScript：纯 CSS 方案，零运行时开销；
- 精准响应：仅当内部文件输入真正获得焦点（Tab 键进入或点击触发）时生效；
- 视觉可控：可自由定制颜色、粗细、虚线样式及阴影，与设计系统保持一致。
⚠️ 注意事项：
- 确保 .profile-pic 元素本身具有 tabindex="0" 仅在必要时添加——通常不需要，因为 默认可聚焦；若父容器需支持键盘聚焦（如通过方向键切换），才显式添加。
- 避免对透明 直接设置 outline: none 或 outline: 0，这会破坏其原生焦点管理逻辑；:focus-within 已绕过此限制。
- 在旧版 Safari（
最终效果是：当用户用 Tab 键导航至该区域，.profile-pic 容器将显示清晰、高对比度的焦点轮廓；点击或回车触发文件选择后，焦点自然回归，样式随之消失——整个流程无需额外 ARIA 标注，天然符合可访问性最佳实践。
