ol列表默认不支持键盘方向键导航，需手动为li添加tabindex、监听keydown、同步aria-selected、调用focus()和scrollIntoView，并处理click聚焦与兼容性问题。
ol列表默认不支持键盘方向键导航
原生 <ol></ol> 只是语义化容器，浏览器不会给它自动添加 tabindex 或监听 ArrowUp/ArrowDown。你看到的“可导航”效果，一定是靠 JS 手动实现的焦点管理和事件响应，不是 HTML 自带能力。
必须手动绑定keydown并管理焦点状态
核心逻辑是：让每个 <li> 可聚焦（用 tabindex="-1"），初始时仅第一个有 tabindex="0"；监听 ol 的 keydown，识别上下键后计算新索引，调用 .focus() 切换焦点，并同步设置 aria-selected 和滚动可视区域。
- 不要在每个
<li>上单独绑keydown—— 容易重复监听、难以统一控制 - 必须用
event.preventDefault()阻止上下键触发页面滚动（尤其在长页中） - 切换焦点后，记得调用
li.scrollIntoView({ block: 'nearest' })，否则高亮项可能被遮挡 - 若
<ol></ol>内含链接或按钮，需额外处理Enter/Space行为，避免和原生交互冲突
aria-selected 和 tabindex 要动态同步
仅靠视觉高亮（比如加 class）不够，屏幕阅读器依赖 aria-selected="true" 感知当前项。这个属性必须和 tabindex="0" 出现在同一个 <li> 上，且每次焦点切换时两者要同时更新。
- 初始渲染时：第一个
<li>同时设tabindex="0"和aria-selected="true" - 切换时：先移除上一项的
tabindex和aria-selected，再给目标项加上 - 不要用
tabindex="0"批量加给所有<li>—— 这会让 Tab 键顺序混乱，破坏自然流
容易忽略的兼容性细节
部分旧版 Safari 对 scrollIntoView({ block: 'nearest' }) 支持不稳定，IE 完全不支持。如果目标环境包含这些，得降级为手动计算 scrollTop；另外，移动端软键盘弹出时，scrollIntoView 可能失效，需加防抖和重试逻辑。
立即学习“前端免费学习笔记（深入）”；
最常被忽略的是：用户用鼠标点击某项后，焦点没落到对应 <li> 上 —— 这意味着你没在 click 事件里补 .focus()，导致后续键盘操作断连。
