当使用 opacity: 0 隐藏 时，其原生焦点环不可见；可通过 :focus-within 伪类在父容器上添加自定义焦点样式，实现无障碍友好的视觉反馈。
当使用 `opacity: 0` 隐藏 `` 时，其原生焦点环不可见；可通过 `:focus-within` 伪类在父容器上添加自定义焦点样式，实现无障碍友好的视觉反馈。
在构建可访问的头像上传组件时，常将 覆盖于头像区域之上并设为完全透明（opacity: 0），以保留语义结构与交互能力。但此举会导致键盘用户聚焦该输入框时，无法看到任何视觉反馈——这不仅影响用户体验，更违反 WCAG 2.1 中关于焦点可见性（Success Criterion 2.4.7）的要求。
最简洁、标准且兼容性良好的解决方案是利用 CSS 的 :focus-within 伪类：它会在任意子元素获得焦点时，触发父元素的样式响应。由于隐藏的文件输入仍能正常接收键盘焦点（如 Tab 导航），因此只需为外层容器（如 .profile-pic）添加 :focus-within 样式即可：
.profile-pic:focus-within {
outline: 2px dotted #777;
outline-offset: 4px; /* 可选：避免与圆角重叠 */
}✅ 优势说明：
- 无需 JavaScript，纯 CSS 实现；
- 兼容现代浏览器（Chrome 60+、Firefox 52+、Safari 15.4+、Edge 79+）；
- 完全符合语义化与无障碍标准（屏幕阅读器可识别，键盘导航可感知）；
- 不干扰原有布局或事件流（点击区域、hover 效果均不受影响）。
⚠️ 注意事项：
- 确保 .profile-pic 是文件输入的直系或嵌套父容器（:focus-within 对所有后代有效）；
- 若需更高对比度以满足 AA/AAA 可访问性标准，建议使用 #005fcc 或 #2a58a2 等深蓝系，并确保 outline 与背景色对比度 ≥ 3:1；
- 避免仅依赖 box-shadow 替代 outline，因部分辅助技术可能忽略非 outline 的焦点指示；
- 如需支持旧版 Safari（
最终效果是：当用户用 Tab 键导航至该头像区域时，.profile-pic 外围将显示清晰、高对比的虚线焦点环；释放 Tab 后自动消失——既保持界面简洁，又保障了关键的可访问性体验。
