I have a simple element with a search field at the top and a dom-repeat at the bottom.
When a user clicks on an item, it will run _selected.
The problem I have is that this element must be used with the mouse at the moment. Even if I intercept the ENTER, I am noticing that I can't get to the items using the TAB key.
How do you normally do this?
<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>
As @cnvzmxcvmcx mentions, tabindex will allow a keyboard user to navigate to your object, but that doesn't automatically allow keyboard events on your object so that it can be selected. You'll need an event handler for that. It sounds like you were planning on that by handling the ENTER key.
Also note that if you use tabindex, only use values of 0 and -1. Since you want the focus to move to your object, use 0. Do not use a value greater than 0 because that messes up the tab order.
If you're not using native html, you will also need to put an appropriate role on your object. This will let the screen reader know what kind of object it is and how to interact with it. Is it a button or checkbox or input field? (I'm guessing the latter since you're talking about search.)
You will also need an appropriate label associated your object so that screen reader users know what the field is for. In native html, for input fields, that is done with the <label for="id"> element. For custom components, you might need an aria-label.