元素支持 :focus 伪类样式
" />
默认情况下，`
在标准 HTML 中，只有原生可交互元素（如
✅ 正确做法：为 添加 tabindex="0"
该属性使元素成为显式可聚焦节点，既可通过键盘 Tab 导航进入，也可被 JavaScript 的 .focus() 方法调用，并真正触发 :focus 伪类：
点击或按 Tab 可聚焦此 summary
展开后可见的内容...
配合 CSS 即可实现焦点高亮效果：
details:focus {
outline: none; /* 可选：移除浏览器默认焦点轮廓 */
box-shadow: 0 0 0 2px #3b82f6; /* 自定义焦点样式，如蓝色光环 */
}⚠️ 注意事项：
- 不要使用 tabindex="-1"：它仅允许 JS 主动聚焦（.focus()），但无法通过 Tab 键导航到达，故不满足可访问性要求；
- 若需保留
的默认点击行为，无需额外处理——tabindex="0" 应加在 上（而非），因为
在
聚焦后会自动获得视觉焦点指示（部分浏览器会高亮 summary 文本）； - 为保障无障碍体验（a11y），建议同时添加 role="group" 和 aria-expanded 属性（由浏览器自动管理），或在 JS 控制时同步更新 aria-expanded 值；
- 避免滥用 tabindex="0"：仅对确实需要键盘操作的非交互元素启用，否则会打乱页面 Tab 顺序，影响屏幕阅读器用户。
总结： 默认不可聚焦是符合规范的设计，若需 :focus 样式，唯一标准且兼容的方案就是为其添加 tabindex="0"。这一做法轻量、无侵入性，且完全符合 WAI-ARIA 实践指南。
