焦点问题与优化支持
构建无障碍 React 组件不仅仅是添加 ARIA 标签那么简单。你必须处理用户如何通过键盘在界面中移动。
我正在记录从零开始构建一个完全无障碍导航组件的过程。在本次更新中，我主要关注两个领域：修复键盘陷阱（keyboard traps）以及为更平滑的子列表管理做准备。
修复键盘陷阱
一个常见的问题发生在用户使用 Shift+Tab 进入组件时。如果焦点落在已关闭子列表中的链接上，焦点轮廓（focus outline）就会消失。这对键盘用户来说是一个严重的错误。
为了解决这个问题，我实现了一个逻辑变更：
• 如果焦点触及已关闭子列表的最后一个元素，系统会将焦点转移到顶层行的父按钮上。
• 我使用 onFocus 事件监听器来检测这种特定的移动。
• 该逻辑会检查当前聚焦的元素是否为组件中的最后一个元素。
• 如果是，代码会识别顶层祖先元素并将焦点移至该处。
这确保了用户永远不会在界面中“迷失”位置。
设置子列表关闭逻辑
当你关闭一个父级菜单时，其中所有已打开的子菜单也应该随之关闭。这也是标准操作系统的运作方式。
为了在 React 中处理这一点而不引起性能问题，我避免了在 state 中存储函数。在 state 中存储函数会触发不必要的重新渲染（re-renders）。
相反，我采用了另一种方法：
• 我在 useRef 中创建了一个 Map。
• 这个 Map 存储了与父元素关联的关闭函数。
• 当请求导航数组时，系统会将这些函数注入到对象中。
• 使用 Ref 允许我在不触发重新渲染的情况下更新这些连接。
这为简洁、可预测的菜单行为奠定了基础。
下一步，我将实现关闭这些子列表的具体逻辑。
Source: https://dev.to/shaynaproductions/focus-issues-and-refinement-support-417l