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