如何让dom-repeat生成的元素可通过TAB键访问？

这问题我之前在项目里碰过好几次，核心就是dom-repeat生成的普通元素默认不支持聚焦，得给它们加上可访问性相关的配置，同时补全键盘事件的处理。下面给你一步步解决：

1. 给列表项添加可聚焦属性 #

默认像<div>这类元素是不能被TAB键选中的，你需要在dom-repeat的模板里给每个列表项加上tabindex="0"，让它们纳入正常的TAB聚焦顺序：

<template is="dom-repeat" items="{{items}}">
  <div class="list-item" tabindex="0" on-click="_selected" on-keydown="_handleListItemKeydown">
    <!-- 你的列表项内容 -->
  </div>
</template>

这里tabindex="0"表示元素按照页面的自然顺序参与TAB导航，是最稳妥的选择；如果需要调整聚焦优先级，可以用正负值，但一般不推荐。

2. 绑定键盘事件模拟点击操作 #

用户聚焦到列表项后，通常习惯用ENTER键或空格键触发选中，你需要给列表项绑定keydown事件来处理这两个按键：

_handleListItemKeydown(e) {
  // 匹配ENTER(13)和SPACE(32)键
  if ([13, 32].includes(e.keyCode)) {
    e.preventDefault(); // 阻止默认行为（比如空格键会滚动页面）
    this._selected(e); // 调用你已有的选中方法
  }
}

这样不管是点击还是按回车/空格，都会触发同一个_selected方法，保证交互一致性。

3. 优化聚焦的视觉反馈（可选但推荐） #

给聚焦的列表项添加样式，让用户能清晰看到当前选中的元素，提升可访问性：

.list-item:focus {
  outline: 2px solid #2196f3; /* 蓝色聚焦边框，可按需调整 */
  background-color: #f5f5f5; /* 浅灰色背景高亮 */
}

如果不想用默认的outline，也可以自定义样式，但一定要保证聚焦状态可见。

4. 处理搜索框到列表的聚焦跳转（可选） #

如果想让用户在搜索框输入完按ENTER后，直接聚焦到第一个列表项，可以给paper-input绑定键盘事件：

<paper-input name="search" value="{{search}}" on-keydown="_onSearchKeydown"></paper-input>

然后添加对应的处理方法：

_onSearchKeydown(e) {
  if (e.keyCode === 13 && this.items.length > 0) {
    // 找到第一个列表项并聚焦
    const firstItem = this.shadowRoot.querySelector('.list-item');
    if (firstItem) firstItem.focus();
  }
}

5. 检查嵌套组件的焦点拦截问题 #

你代码里用到了<hot-network>和<hot-ajax-paging>这类自定义组件，要注意这些组件内部是否有阻止焦点穿透的设置（比如容器加了tabindex="-1"）。如果列表项是被封装在这些组件内部的，需要确保组件允许内部元素接收焦点，或者在组件内部给列表项添加tabindex。

整体来说，核心就是让列表项成为可聚焦元素，补全键盘交互逻辑，同时保证视觉反馈清晰，这样就能实现完整的鼠标+键盘双端交互了。

内容的提问来源于stack exchange，提问作者Merc