当使用 opacity: 0 隐藏 时，原生焦点环会消失；通过 :focus-within 作用于父容器并添加自定义轮廓（outline），可在保持视觉隐藏的同时实现符合无障碍标准的键盘焦点反馈。
当使用 `opacity: 0` 隐藏 `` 时，原生焦点环会消失；通过 `:focus-within` 作用于父容器并添加自定义轮廓（outline），可在保持视觉隐藏的同时实现符合无障碍标准的键盘焦点反馈。
在构建可访问的头像上传组件时，常需将 可视化隐藏，同时确保其仍能响应键盘操作（如 Tab 键聚焦）并提供清晰的焦点指示——这是 WCAG 2.1 中「Focus Visible」（SC 2.4.7）的关键要求。直接设置 opacity: 0 虽保留了元素的交互性与 DOM 存在性，但会使浏览器默认的焦点轮廓（focus ring）不可见，从而损害键盘用户的操作感知。
最简洁、语义正确且广泛支持（Chrome 60+、Firefox 61+、Safari 15.4+、Edge 79+）的解决方案是：利用 :focus-within 伪类为父容器添加自定义焦点样式。该伪类会在其任意子元素获得焦点时触发，完美适配隐藏 input 的场景。
以下为推荐实现方式（已整合至原 CSS 结构中）：
.profile-pic {
width: 156px;
height: 156px;
border-radius: 50%;
position: relative;
}
/* ✅ 关键：当内部 input 获得焦点时，为整个头像区域添加可见轮廓 */
.profile-pic:focus-within {
outline: 2px dotted #3b82f6; /* 推荐使用高对比度、非实线样式（如 dotted/dashed）避免遮挡内容 */
outline-offset: 4px; /* 确保轮廓不紧贴边缘，提升可识别性 */
}
.profile-pic input[type='file'] {
opacity: 0;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
padding: 0;
border: none;
border-radius: 50%;
cursor: pointer;
z-index: 10;
/* ? 增强可访问性：确保键盘用户可通过 Enter/Space 触发文件选择 */
&:focus {
outline: none; /* 防止同时出现双焦点环（父级已处理） */
}
}
注意事项与最佳实践：
- ✅ 勿移除 outline 或仅用 outline: none：这会直接违反无障碍规范；应始终提供替代视觉反馈。
- ✅ 避免纯色实线轮廓（如 solid）：易与边框混淆；dotted 或 dashed 更易区分，且符合 W3C 对 focus indicator 的清晰度建议。
- ✅ 设置 outline-offset：防止轮廓被圆角裁切，保障完整显示。
- ✅ 测试键盘导航：按 Tab 聚焦 → 检查轮廓是否准确出现 → 按 Enter 或 Space 是否正常唤起文件选择器。
- ⚠️ 补充：若需兼容旧版 Safari（
此方案无需修改 HTML 结构、不依赖 JavaScript、语义清晰，同时兼顾视觉设计一致性与残障用户可用性，是隐藏式文件输入组件的首选焦点管理策略。
