improve feed, entry, category a11y

internal/locale/translations/de_DE.json

@@ -109,6 +109,7 @@
     "page.edit_category.title": "Kategorie bearbeiten: %s",
     "page.edit_user.title": "Benutzer bearbeiten: %s",
     "page.feeds.title": "Abonnements",
+    "page.feeds.category": "Category",
     "page.feeds.last_check": "Letzte Aktualisierung:",
     "page.feeds.next_check": "Nächste Aktualisierung:",
     "page.feeds.unread_counter": "Anzahl der ungelesenen Artikel",

internal/locale/translations/el_EL.json

@@ -109,6 +109,7 @@
     "page.edit_category.title": "Επεξεργασία κατηγορίας: % s",
     "page.edit_user.title": "Επεξεργασία χρήστη: % s",
     "page.feeds.title": "Ροές",
+    "page.feeds.category": "Category",
     "page.feeds.last_check": "Τελευταίος έλεγχος:",
     "page.feeds.next_check": "Next check:",
     "page.feeds.unread_counter": "Αριθμός μη αναγνωσμένων καταχωρήσεων",

internal/locale/translations/en_US.json

@@ -109,6 +109,7 @@
     "page.edit_category.title": "Edit Category: %s",
     "page.edit_user.title": "Edit User: %s",
     "page.feeds.title": "Feeds",
+    "page.feeds.category": "Category",
     "page.feeds.last_check": "Last check:",
     "page.feeds.next_check": "Next check:",
     "page.feeds.unread_counter": "Number of unread entries",

internal/locale/translations/es_ES.json

@@ -109,6 +109,7 @@
     "page.edit_category.title": "Editar categoría: %s",
     "page.edit_user.title": "Editar usuario: %s",
     "page.feeds.title": "Fuentes",
+    "page.feeds.category": "Category",
     "page.feeds.last_check": "Última verificación:",
     "page.feeds.next_check": "Next check:",
     "page.feeds.unread_counter": "Número de artículos no leídos",

internal/locale/translations/fi_FI.json

@@ -109,6 +109,7 @@
     "page.edit_category.title": "Muokkaa kategoria: %s",
     "page.edit_user.title": "Muokkaa käyttäjä: %s",
     "page.feeds.title": "Syötteet",
+    "page.feeds.category": "Category",
     "page.feeds.last_check": "Viimeisin tarkistus:",
     "page.feeds.next_check": "Next check:",
     "page.feeds.unread_counter": "Lukemattomien artikkeleiden määrä",

internal/locale/translations/fr_FR.json

@@ -109,6 +109,7 @@
     "page.edit_category.title": "Modification de la catégorie : %s",
     "page.edit_user.title": "Modification de l'utilisateur : %s",
     "page.feeds.title": "Abonnements",
+    "page.feeds.category": "Category",
     "page.feeds.last_check": "Dernière vérification :",
     "page.feeds.next_check": "Prochaine vérification :",
     "page.feeds.unread_counter": "Nombre d'entrées non lues",

internal/locale/translations/hi_IN.json

@@ -109,6 +109,7 @@
     "page.edit_category.title": "%s श्रेणी संपाद करे",
     "page.edit_user.title": "%s उपभोक्ता संपाद करे",
     "page.feeds.title": "फ़ीड",
+    "page.feeds.category": "Category",
     "page.feeds.last_check": "आखरी जाँच",
     "page.feeds.next_check": "Next check:",
     "page.feeds.unread_counter": "अपठित विषयवस्तुया",

internal/locale/translations/id_ID.json

@@ -107,6 +107,7 @@
     "page.edit_category.title": "Sunting Kategori: %s",
     "page.edit_user.title": "Sunting Pengguna: %s",
     "page.feeds.title": "Umpan",
+    "page.feeds.category": "Category",
     "page.feeds.last_check": "Terakhir diperiksa:",
     "page.feeds.next_check": "Next check:",
     "page.feeds.unread_counter": "Jumlah entri yang belum dibaca",

internal/locale/translations/it_IT.json

@@ -109,6 +109,7 @@
     "page.edit_category.title": "Modifica categoria: %s",
     "page.edit_user.title": "Modifica utente: %s",
     "page.feeds.title": "Feed",
+    "page.feeds.category": "Category",
     "page.feeds.last_check": "Ultimo controllo:",
     "page.feeds.next_check": "Next check:",
     "page.feeds.unread_counter": "Numero di voci non lette",

internal/locale/translations/ja_JP.json

@@ -109,6 +109,7 @@
     "page.edit_category.title": "カテゴリを編集: %s",
     "page.edit_user.title": "ユーザーを編集: %s",
     "page.feeds.title": "フィード一覧",
+    "page.feeds.category": "Category",
     "page.feeds.last_check": "最終チェック:",
     "page.feeds.next_check": "Next check:",
     "page.feeds.unread_counter": "未読記事の数",

internal/locale/translations/nl_NL.json

@@ -109,6 +109,7 @@
     "page.edit_category.title": "Bewerken van categorie: %s",
     "page.edit_user.title": "Bewerk gebruiker: %s",
     "page.feeds.title": "Feeds",
+    "page.feeds.category": "Category",
     "page.feeds.last_check": "Laatste update:",
     "page.feeds.next_check": "Next check:",
     "page.feeds.unread_counter": "Aantal ongelezen vermeldingen",

internal/locale/translations/pl_PL.json

@@ -110,6 +110,7 @@
     "page.edit_category.title": "Edycja Kategorii: %s",
     "page.edit_user.title": "Edytuj użytkownika: %s",
     "page.feeds.title": "Kanały",
+    "page.feeds.category": "Category",
     "page.feeds.last_check": "Ostatnia aktualizacja:",
     "page.feeds.next_check": "Next check:",
     "page.feeds.unread_counter": "Liczba nieprzeczytanych wpisów",

internal/locale/translations/pt_BR.json

@@ -109,6 +109,7 @@
     "page.edit_category.title": "Editar categoria: %s",
     "page.edit_user.title": "Editar usuário: %s",
     "page.feeds.title": "Fontes",
+    "page.feeds.category": "Category",
     "page.feeds.last_check": "Última verificação:",
     "page.feeds.next_check": "Next check:",
     "page.feeds.unread_counter": "Numero de itens não lidos",

internal/locale/translations/ru_RU.json

@@ -110,6 +110,7 @@
     "page.edit_category.title": "Изменить категорию: %s",
     "page.edit_user.title": "Изменить пользователя: %s",
     "page.feeds.title": "Подписки",
+    "page.feeds.category": "Category",
     "page.feeds.last_check": "Последняя проверка:",
     "page.feeds.next_check": "Next check:",
     "page.feeds.unread_counter": "Количество непрочитанных статей",

internal/locale/translations/tr_TR.json

@@ -109,6 +109,7 @@
     "page.edit_category.title": "Kategoriyi Düzenle: %s",
     "page.edit_user.title": "Kullanıcıyı Düzenle: %s",
     "page.feeds.title": "Beslemeler",
+    "page.feeds.category": "Category",
     "page.feeds.last_check": "Son kontrol:",
     "page.feeds.next_check": "Next check:",
     "page.feeds.unread_counter": "Okunmamış iletilerin sayısı",

internal/locale/translations/uk_UA.json

@@ -111,6 +111,7 @@
     "page.edit_category.title": "Редагування категорії: %s",
     "page.edit_user.title": "Редагування користувача: %s",
     "page.feeds.title": "Стрічки",
+    "page.feeds.category": "Category",
     "page.feeds.last_check": "Остання перевірка:",
     "page.feeds.next_check": "Next check:",
     "page.feeds.unread_counter": "Кількість непрочитаних записів",

internal/locale/translations/zh_CN.json

@@ -108,6 +108,7 @@
     "page.edit_category.title": "编辑分类 : %s",
     "page.edit_user.title": "编辑用户 : %s",
     "page.feeds.title": "源",
+    "page.feeds.category": "Category",
     "page.feeds.last_check": "最后检查时间：",
     "page.feeds.next_check": "下次检查时间：",
     "page.feeds.unread_counter": "未读文章数",

internal/locale/translations/zh_TW.json

@@ -109,6 +109,7 @@
     "page.edit_category.title": "編輯分類 : %s",
     "page.edit_user.title": "編輯使用者 : %s",
     "page.feeds.title": "Feeds",
+    "page.feeds.category": "分類",
     "page.feeds.last_check": "最後檢查時間：",
     "page.feeds.next_check": "下次檢查時間:",
     "page.feeds.unread_counter": "未讀文章數",

internal/template/templates/common/feed_list.html

@@ -1,22 +1,43 @@
 {{ define "feed_list" }}
     <div class="items">
         {{ range .feeds }}
-        <article role="article" class="item feed-item {{ if ne .ParsingErrorCount 0 }}feed-parsing-error{{ else if ne .UnreadCount 0 }}feed-has-unread{{ end }}">
+        <article
-            <div class="item-header" dir="auto">
+            class="item feed-item {{ if ne .ParsingErrorCount 0 }}feed-parsing-error{{ else if ne .UnreadCount 0 }}feed-has-unread{{ end }}"
-                <span class="item-title">
+            aria-labelledby="feed-title-{{ .ID }}"
-                    {{ if and (.Icon) (gt .Icon.IconID 0) }}
+        >
-                        <img src="{{ route "icon" "iconID" .Icon.IconID }}" width="16" height="16" loading="lazy" alt="{{ .Title }}">
+            <header class="item-header" dir="auto">
-                    {{ end }}
+                <h2 id="feed-title-{{ .ID }}" class="item-title">
-                    {{ if .Disabled }} 🚫 {{ end }}
+
-                    <a href="{{ route "feedEntries" "feedID" .ID }}">{{ .Title }}</a>
+                    <a href="{{ route "feedEntries" "feedID" .ID }}">
-                </span>
+                        {{ if and (.Icon) (gt .Icon.IconID 0) }}
+                            <img src="{{ route "icon" "iconID" .Icon.IconID }}" width="16" height="16" loading="lazy" alt="">
+                        {{ end }}
+                        {{ if .Disabled }} 🚫 {{ end }}
+                        {{ .Title }}
+                    </a>
+                </h2>
                 <span class="feed-entries-counter">
-                    (<span title="{{ t "page.feeds.unread_counter" }}">{{ .UnreadCount }}</span>/<span>{{ .NumberOfVisibleEntries }}</span>)
+                    <span aria-hidden="true">(</span>
+                    <span class="sr-only">
+                        {{ t "page.feeds.unread_counter" }}:
+                    </span>
+                    <span>{{ .UnreadCount }}</span>
+                    <span aria-hidden="true">/</span>
+                    <span class="sr-only">
+                        {{ t "page.categories.all_counter" }}:
+                    </span>
+                    <span>{{ .NumberOfVisibleEntries }}</span>
+                    <span aria-hidden="true">)</span>
                 </span>
                 <span class="category">
-                    <a href="{{ route "categoryEntries" "categoryID" .Category.ID }}">{{ .Category.Title }}</a>
+                    <a id="feed-category-{{ .ID }}"
+                       href="{{ route "categoryEntries" "categoryID" .Category.ID }}"
+                       aria-label="{{ t "page.feeds.category" }}: {{ .Category.Title }}"
+                    >
+                        {{ .Category.Title }}
+                    </a>
                 </span>
-            </div>
+            </header>
             <div class="item-meta">
                 <ul class="item-meta-info">
                     <li class="item-meta-info-site-url" dir="auto">

internal/template/templates/views/categories.html

@@ -23,13 +23,21 @@
 {{ else }}
     <div class="items">
         {{ range .categories }}
-        <article role="article" class="item category-item {{if gt (deRef .TotalUnread) 0 }} category-has-unread{{end}}">
+        <article
-            <div class="item-header" dir="auto">
+            class="item category-item {{if gt (deRef .TotalUnread) 0 }} category-has-unread{{end}}"
-                <span class="item-title">
+            aria-labelledby="category-title-{{ .ID }}"
+        >
+            <header id="category-title-{{ .ID }}"  class="item-header" dir="auto">
+                <h2 class="item-title">
                     <a href="{{ route "categoryEntries" "categoryID" .ID }}">{{ .Title }}</a>
-                </span>
+                    <span aria-hidden="true">(</span>
-                (<span title="{{ t "page.categories.unread_counter" }}">{{ .TotalUnread }}</span>)
+                    <span class="sr-only">
-            </div>
+                        {{ t "page.categories.unread_counter" }}:
+                    </span>
+                    <span>{{ .TotalUnread }}</span>
+                    <span aria-hidden="true">)</span>
+                </h2>
+            </header>
             <div class="item-meta">
                 <ul class="item-meta-info">
                     <li class="item-meta-info-feed-count">

internal/template/templates/views/category_entries.html

@@ -64,20 +64,34 @@
     </div>
     <div class="items">
         {{ range .entries }}
-        <article role="article" class="item entry-item {{ if $.user.EntrySwipe }}entry-swipe{{ end }} item-status-{{ .Status }}" data-id="{{ .ID }}">
+        <article
-            <div class="item-header" dir="auto">
+            class="item entry-item {{ if $.user.EntrySwipe }}entry-swipe{{ end }} item-status-{{ .Status }}"
-                <span class="item-title">
+            data-id="{{ .ID }}"
-                    {{ if ne .Feed.Icon.IconID 0 }}
+            aria-labelledby="entry-title-{{ .ID }}"
-                        <img src="{{ route "icon" "iconID" .Feed.Icon.IconID }}" width="16" height="16" loading="lazy" alt="{{ .Feed.Title }}">
+        >
-                    {{ end }}
+            <header class="item-header" dir="auto">
-                    {{ if $.showOnlyUnreadEntries }}
+                <h2 id="entry-title-{{ .ID }}" class="item-title">
-                      <a href="{{ route "unreadCategoryEntry" "categoryID" .Feed.Category.ID "entryID" .ID }}">{{ .Title }}</a>
+                    <a
-                    {{ else }}
+                        {{ if $.showOnlyUnreadEntries }}
-                      <a href="{{ route "categoryEntry" "categoryID" .Feed.Category.ID "entryID" .ID }}">{{ .Title }}</a>
+                        href="{{ route "unreadCategoryEntry" "categoryID" .Feed.Category.ID "entryID" .ID }}"
-                    {{ end }}
+                        {{ else }}
+                        href="{{ route "categoryEntry" "categoryID" .Feed.Category.ID "entryID" .ID }}"
+                        {{ end }}
+                    >
+                        {{ if ne .Feed.Icon.IconID 0 }}
+                            <img src="{{ route "icon" "iconID" .Feed.Icon.IconID }}" width="16" height="16" loading="lazy" alt="{{ .Feed.Title }}">
+                        {{ else }}
+                            <span class="sr-only">{{ .Feed.Title }}</span>
+                        {{ end }}
+                        {{ .Title }}
+                    </a>
+                </h2>
+                <span class="category">
+                    <a href="{{ route "categoryEntries" "categoryID" .Feed.Category.ID }}" aria-label="{{ t "page.feeds.category" }}: {{ .Feed.Category.Title }}">
+                        {{ .Feed.Category.Title }}
+                    </a>
                 </span>
-                <span class="category"><a href="{{ route "categoryEntries" "categoryID" .Feed.Category.ID }}">{{ .Feed.Category.Title }}</a></span>
+            </header>
-            </div>
             {{ template "item_meta" dict "user" $.user "entry" . "hasSaveEntry" $.hasSaveEntry  }}
         </article>
         {{ end }}

internal/template/templates/views/feed_entries.html

@@ -93,20 +93,33 @@
     </div>
     <div class="items">
         {{ range .entries }}
-        <article role="article" class="item entry-item {{ if $.user.EntrySwipe }}entry-swipe{{ end }} item-status-{{ .Status }}" data-id="{{ .ID }}">
+        <article class="item entry-item {{ if $.user.EntrySwipe }}entry-swipe{{ end }} item-status-{{ .Status }}" data-id="{{ .ID }}">
-            <div class="item-header" dir="auto">
+            <header class="item-header" dir="auto">
-                <span class="item-title">
+                <h2 id="entry-title-{{ .ID }}" class="item-title">
-                    {{ if ne .Feed.Icon.IconID 0 }}
+                    <a
+                        {{ if $.showOnlyUnreadEntries }}
+                        href="{{ route "unreadFeedEntry" "feedID" .Feed.ID "entryID" .ID }}"
+                        {{ else }}
+                        href="{{ route "feedEntry" "feedID" .Feed.ID "entryID" .ID }}"
+                        {{ end }}
+                    >
+                        {{ if ne .Feed.Icon.IconID 0 }}
                         <img src="{{ route "icon" "iconID" .Feed.Icon.IconID }}" width="16" height="16" loading="lazy" alt="{{ .Feed.Title }}">
-                    {{ end }}
+                        {{ else }}
-                    {{ if $.showOnlyUnreadEntries }}
+                        <span class="sr-only">{{ .Feed.Title }}</span>
-                      <a href="{{ route "unreadFeedEntry" "feedID" .Feed.ID "entryID" .ID }}">{{ .Title }}</a>
+                        {{ end }}
-                    {{ else }}
+                        {{ .Title }}
-                      <a href="{{ route "feedEntry" "feedID" .Feed.ID "entryID" .ID }}">{{ .Title }}</a>
+                    </a>
-                    {{ end }}
+                </h2>
+                <span class="category">
+                    <a
+                        href="{{ route "categoryEntries" "categoryID" .Feed.Category.ID }}"
+                        aria-label="{{ t "page.feeds.category" }}: {{ .Feed.Category.Title }}"
+                    >
+                        {{ .Feed.Category.Title }}
+                    </a>
                 </span>
-                <span class="category"><a href="{{ route "categoryEntries" "categoryID" .Feed.Category.ID }}">{{ .Feed.Category.Title }}</a></span>
+            </header>
-            </div>
             {{ template "item_meta" dict "user" $.user "entry" . "hasSaveEntry" $.hasSaveEntry }}
         </article>
         {{ end }}

internal/ui/static/css/common.css

@@ -815,9 +815,31 @@ template {
     box-shadow: var(--current-item-box-shadow);
 }
 
+
+.item-header {
+    font-size: 1rem;
+}
+
+.item-header span {
+    font-weight: normal;
+}
+
+.item-title {
+    font-size: 1rem;
+    margin: 0;
+    display: inline;
+}
+
 .item-title a {
     text-decoration: none;
     font-weight: var(--item-title-link-font-weight);
+    font-size: inherit;
+}
+
+.feed-entries-counter {
+    display: inline-flex;
+    gap: 2px;
+    align-items: center;
 }
 
 .item-status-read .item-title a {