change focus target on items when using keyboard navigation

This commit is contained in:
krvpb024 2024-02-08 17:10:59 +08:00 committed by Frédéric Guillot
parent 0991c27f9d
commit 27749a2877
9 changed files with 12 additions and 4 deletions

View File

@ -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>

View File

@ -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">

View File

@ -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">

View File

@ -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">

View File

@ -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">

View File

@ -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">

View File

@ -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">

View File

@ -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">

View File

@ -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;
}