我有一个简单的元素，顶部有一个搜索字段，底部有一个dom-repeat。 当用户单击某个项目时，它将运行_selected。
我遇到的问题是此元素目前必须与鼠标一起使用。即使我拦截了 ENTER，我也注意到我无法使用 TAB 键访问项目。
你通常怎么做？
<div class="card">
<paper-input name="search" value="{{search}}"></paper-input>
<hot-network manage-errors>
<hot-ajax-paging from=0 per-page="10" pager-data="{{pagerData}}" current-page="{{currentPage}}">
<iron-ajax id="aj" url="/stores/contacts?search={{search}}&{{queryParamsString}}" handle-as="json" last-response="{{data}}"></iron-ajax>
</hot-ajax-paging>
<template is="dom-repeat" items="{{data}}">
<span on-tap="_selected" class="caption">{{item.firstName}} {{item.lastName}} {{item._joinCompanyName}} {{item.companyName}}</span>
<hr/>
</template>
</hot-network>
<hot-pager pager-data="{{pagerData}}" page="{{currentPage}}"></hot-pager>
</div>
</div>
如@cnvzmxcvmcx所述，tabindex将允许键盘用户导航到您的对象，但这不会自动允许对象上的键盘事件，以便可以选择它。 为此需要一个事件处理程序。 听起来您是通过处理 ENTER 键来计划的。
另请注意，如果使用tabindex，请仅使用值 0 和 -1。 由于您希望焦点移动到对象，因此请使用 0。 不要使用大于 0 的值，因为这会弄乱 Tab 键顺序。
如果不使用本机 html，则还需要在对象上放置适当的角色。 这将使屏幕阅读器知道它是哪种对象以及如何与之交互。 是按钮、复选框还是输入字段？ (我猜是后者，因为你在谈论搜索。
您还需要与对象关联的适当标签，以便屏幕阅读器用户知道该字段的用途。 在本机 html 中，对于输入字段，这是使用<label for="id">元素完成的。 对于自定义组件，您可能需要aria-label。
看起来tabIndex是你需要的。
https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex
tabindex 全局属性指示其元素是否可以聚焦，以及它是否/在哪里参与顺序键盘导航(通常使用 Tab 键，因此得名)。它接受整数作为值，根据整数的值有不同的结果：