网页中 li 元素仅用鼠标点击时如何添加键盘交互支持

识别 li 元素当前的交互缺陷

现有代码中 li 元素设置了鼠标事件监听器，但未处理键盘操作。用户仅能通过鼠标点击触发选择逻辑，无法使用键盘 Tab 键切换焦点或按 Enter 键确认操作，导致依赖键盘操作的屏幕阅读器用户无法使用该功能。

代码仅监听了 mouseup 事件，未添加键盘事件监听器。li 元素本身没有默认的键盘可访问性，必须通过 HTML 属性和 JavaScript 事件监听器共同实现键盘支持。这是实现无障碍交互的基础步骤。

在 li 元素上添加 tabindex='0' 属性，使其能够通过键盘获得焦点。这是让 li 元素参与键盘导航的第一步，确保用户可以通过 Tab 键在列表项之间切换焦点，并使用方向键或 Enter 键进行操作。

添加 tabindex 属性后，li 元素会获得键盘焦点状态。此时需要配合 JavaScript 监听器，在用户按下特定键时触发与鼠标点击相同的逻辑，从而保持交互行为的一致性。这是实现键盘交互的关键属性。

在 JavaScript 的 forEach 循环中为每个 li 元素添加 keyup 事件监听器。监听器检查按键是否为 Enter 键，如果是，则调用现有的 handleSelection 函数，执行与鼠标点击相同的逻辑，更新描述区域的内容。

代码实现示例：item.addEventListener('keyup', (e) => { if (e.key === 'Enter') { handleSelection(e); } });。这一步骤确保用户按下 Enter 键时，能够触发与鼠标点击相同的选择逻辑，实现完整的键盘交互支持。

在浏览器中加载页面，使用 Tab 键在列表项之间切换焦点，确认焦点样式是否正确显示。然后按下 Enter 键，检查描述区域是否更新为当前选中项的内容，验证键盘交互逻辑是否生效，确保与鼠标点击行为一致。

如果焦点无法切换或 Enter 键未触发更新，检查 tabindex 属性是否正确添加，以及 keyup 事件监听器是否正确绑定。确保代码逻辑与鼠标点击逻辑完全一致，以实现无障碍的交互体验。验证结果应显示键盘操作与鼠标操作功能相同。