change focus target on items when using keyboard navigation
This commit is contained in:
parent
0991c27f9d
commit
27749a2877
9 changed files with 12 additions and 4 deletions
|
@ -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>
|
||||
|
|
|
@ -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">
|
||||
|
|
|
@ -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">
|
||||
|
|
|
@ -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">
|
||||
|
|
|
@ -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">
|
||||
|
|
|
@ -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">
|
||||
|
|
|
@ -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">
|
||||
|
|
|
@ -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">
|
||||
|
|
|
@ -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;
|
||||
}
|
||||
|
|
Loading…
Reference in a new issue