keyboard input of listview in HTML5 + JS app

Question

We know the Metro style app should fully support to respond to keyboard interactions. Now there is a trouble in the ListView in GridLayout(you can use the default Grid Template in VS 2012), I can use Arrow keys to focus every item in the ListView, but I can not focus on the Group header, even if I press the Tab Key. I create a same C# sample, and found it works, we can switch between item and group header by the Tab key.

I tried to use the TabIndex attribute, and add key events to the group header (in HeaderTemplate), it seems I can focus the header(not satisfied with the tab order), but it does not work, press the Enter key always let it navigate to the first item.

anyone knows why ListView behaves like this, how can I solve this problem?

Answer 1

Change your template so that the item you want to be able to tab to has a tab index that is not -1.  In this example I set it to 1.  You can get to the header by hitting Tab now and 'Enter' will execute the button and navigate to that group.

    <div class="headertemplate" data-win-control="WinJS.Binding.Template">
        <button class="group-header win-type-x-large win-type-interactive" data-win-bind="groupKey: key"
            onclick="Application.navigator.pageControl.navigateToGroup(event.srcElement.groupKey)" role="link" tabindex="1" type="button">

-Jeff

---

Jeff Sanders (MSFT)

Answer 2

Change your template so that the item you want to be able to tab to has a tab index that is not -1.  In this example I set it to 1.  You can get to the header by hitting Tab now and 'Enter' will execute the button and navigate to that group.

    <div class="headertemplate" data-win-control="WinJS.Binding.Template">
        <button class="group-header win-type-x-large win-type-interactive" data-win-bind="groupKey: key"
            onclick="Application.navigator.pageControl.navigateToGroup(event.srcElement.groupKey)" role="link" tabindex="1" type="button">

-Jeff

---

Jeff Sanders (MSFT)

I change the code as you said, press the Tab key so I can focus the header, again, it will focus on the next group header. but when I press Enter, it still navigate to the dedail page, is there anything else I need to do?

Answer 3

Hi Horzel,

Yes you need to do more work:

     listView.addEventListener("keydown", function (e) {
                    
                if (appView.value !== appViewState.snapped && e.ctrlKey && e.keyCode === WinJS.Utilities.Key.g && e.altKey) {
                    var data = listView.itemDataSource.list.getAt(listView.currentItem.index);
                    this.navigateToGroup(data.group.key);
                    e.preventDefault();
                    e.stopImmediatePropagation();
                }
            }.bind(this), true);

The above code is the existing keyboard handler for that page. Note that currently ctrl+alt+g will navigate to the group that has the list view in focus. You would have to test for the src to ensure it is the header, then call navigateToGroup for the appropriate group and call e.preventDefault() and e.stopImedieatePropogation() as this handler does already for the ctrl+alt+g combo (do not remove the test for this combo or you will make users of your app angry).

-Jeff

-Jeff

---

Jeff Sanders (MSFT)