change focus target on items when using keyboard navigation

internal/template/templates/common/feed_list.html

@@ -3,7 +3,8 @@
         {{ range .feeds }}
         <article
             class="item feed-item {{ if ne .ParsingErrorCount 0 }}feed-parsing-error{{ else if ne .UnreadCount 0 }}feed-has-unread{{ end }}"
-            aria-labelledby="feed-title-{{ .ID }}"
+            aria-labelledby="feed-title-{{ .ID }} feed-entries-counter"
+            tabindex="-1"
         >
             <header class="item-header" dir="auto">
                 <h2 id="feed-title-{{ .ID }}" class="item-title">
@@ -15,7 +16,7 @@
                         {{ .Title }}
                     </a>
                 </h2>
-                <span class="feed-entries-counter">
+                <span id="feed-entries-counter" class="feed-entries-counter">
                     <span aria-hidden="true">(</span>
                     <span class="sr-only">{{ plural "page.unread_entry_count" .UnreadCount .UnreadCount }}</span>
                     <span aria-hidden="true">{{ .UnreadCount }}</span>

internal/template/templates/views/bookmark_entries.html

@@ -23,6 +23,7 @@
             class="item entry-item {{ if $.user.EntrySwipe }}entry-swipe{{ end }} item-status-{{ .Status }}"
             data-id="{{ .ID }}"
             aria-labelledby="entry-title-{{ .ID }}"
+            tabindex="-1"
         >
             <header class="item-header" dir="auto">
                 <h2 id="entry-title-{{ .ID }}" class="item-title">

internal/template/templates/views/categories.html

@@ -26,6 +26,7 @@
         <article
             class="item category-item {{if gt (deRef .TotalUnread) 0 }} category-has-unread{{end}}"
             aria-labelledby="category-title-{{ .ID }}"
+            tabindex="-1"
         >
             <header id="category-title-{{ .ID }}"  class="item-header" dir="auto">
                 <h2 class="item-title">

internal/template/templates/views/category_entries.html

@@ -70,6 +70,7 @@
             class="item entry-item {{ if $.user.EntrySwipe }}entry-swipe{{ end }} item-status-{{ .Status }}"
             data-id="{{ .ID }}"
             aria-labelledby="entry-title-{{ .ID }}"
+            tabindex="-1"
         >
             <header class="item-header" dir="auto">
                 <h2 id="entry-title-{{ .ID }}" class="item-title">

internal/template/templates/views/feed_entries.html

@@ -97,6 +97,7 @@
             class="item entry-item {{ if $.user.EntrySwipe }}entry-swipe{{ end }} item-status-{{ .Status }}"
             data-id="{{ .ID }}"
             aria-labelledby="entry-title-{{ .ID }}"
+            tabindex="-1"
         >
             <header class="item-header" dir="auto">
                 <h2 id="entry-title-{{ .ID }}" class="item-title">

internal/template/templates/views/history_entries.html

@@ -42,6 +42,7 @@
             class="item entry-item {{ if $.user.EntrySwipe }}entry-swipe{{ end }} item-status-{{ .Status }}"
             data-id="{{ .ID }}"
             aria-labelledby="entry-title-{{ .ID }}"
+            tabindex="-1"
         >
             <header class="item-header" dir="auto">
                 <h2 id="entry-title-{{ .ID }}" class="item-title">

internal/template/templates/views/shared_entries.html

@@ -39,6 +39,7 @@
             class="item entry-item {{ if $.user.EntrySwipe }}entry-swipe{{ end }} item-status-{{ .Status }}"
             data-id="{{ .ID }}"
             aria-labelledby="entry-title-{{ .ID }}"
+            tabindex="-1"
         >
             <header class="item-header" dir="auto">
                 <h2 id="entry-title-{{ .ID }}" class="item-title">

internal/template/templates/views/unread_entries.html

@@ -50,6 +50,7 @@
             class="item entry-item {{ if $.user.EntrySwipe }}entry-swipe{{ end }} item-status-{{ .Status }}"
             data-id="{{ .ID }}"
             aria-labelledby="entry-title-{{ .ID }}"
+            tabindex="-1"
         >
             <header class="item-header" dir="auto">
                 <h2 id="entry-title-{{ .ID }}" class="item-title">

internal/ui/static/js/app.js

@@ -495,7 +495,7 @@ function goToListItem(offset) {
 
     if (document.querySelector(".current-item") === null) {
         items[0].classList.add("current-item");
-        items[0].querySelector('.item-header a').focus();
+        items[0].focus();
         return;
     }
 
@@ -507,7 +507,7 @@ function goToListItem(offset) {
 
             item.classList.add("current-item");
             DomHelper.scrollPageTo(item);
-            item.querySelector('.item-header a').focus();
+            item.focus();
 
             break;
         }