Question

我有一个简单的元素，顶部有一个搜索字段，底部有一个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>

Answer 1

正如@cnvzmxcvmcx所提到的，tabindex将允许键盘用户导航到您的对象，但这并不会自动允许您的对象上的键盘事件，以便可以选择它。你需要一个事件处理程序。听起来你正在通过处理ENTER键来计划。

另请注意，如果使用tabindex，则仅使用0和-1的值。由于您希望焦点移动到对象，因此请使用0.不要使用大于0的值，因为这会影响Tab键顺序。

如果您不使用原生html，则还需要在对象上放置适当的role。这将让屏幕阅读器知道它是什么类型的对象以及如何与它进行交互。它是按钮或复选框还是输入字段？（我猜你是后者，因为你正在谈论搜索。）

您还需要一个与您的对象相关联的适当标签，以便屏幕阅读器用户知道该字段的用途。在本机html中，对于输入字段，使用<label for="id">元素完成。对于自定义组件，您可能需要aria-label。

Answer 2

看起来df = pd.DataFrame(np.repeat(np.arange(33)[:, None], 3, axis=1)) # Use 7 to guarantee a length 7 result. df.iloc[np.linspace(0, len(df) - 1, 7).astype(int)] 0 1 2 0 0 0 0 5 5 5 5 10 10 10 10 16 16 16 16 21 21 21 21 26 26 26 26 32 32 32 32就是您所需要的。

https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex

tabindex全局属性指示其元素是否可以被聚焦，以及它是否/在何处参与顺序键盘导航（通常使用Tab键，因此名称）。它接受一个整数作为一个值，取决于整数值的不同结果：

使用TABS使dom-repeat可达

2 个答案: