change links that could perform actions to buttons

internal/template/templates/views/bookmark_entries.html

@@ -1,12 +1,12 @@
 {{ define "title"}}{{ t "page.starred.title" }} ({{ .total }}){{ end }}
 
 {{ define "page_header"}}
-<section class="page-header" aria-labelledby="page-header-title">
+<section class="page-header" aria-labelledby="page-header-title page-header-title-count">
     <h1 id="page-header-title" dir="auto">
         {{ t "page.starred.title" }}
         <span aria-hidden="true"> ({{ .total }})</span>
     </h1>
-    <span class="sr-only">{{ t "page.starred.total" }}: {{ .total }}</span>
+    <span id="page-header-title-count" class="sr-only">{{ t "page.starred.total" }}: {{ .total }}</span>
 </section>
 {{ end }}
 

internal/template/templates/views/categories.html

@@ -1,12 +1,12 @@
 {{ define "title"}}{{ t "page.categories.title" }} ({{ .total }}){{ end }}
 
 {{ define "page_header"}}
-<section class="page-header" aria-labelledby="page-header-title">
+<section class="page-header" aria-labelledby="page-header-title page-header-title-count">
     <h1 id="page-header-title" dir="auto">
         {{ t "page.categories.title" }}
         <span aria-hidden="true"> ({{ .total }})</span>
     </h1>
-    <span class="sr-only">{{ t "page.categories.total" }}: {{ .total }}</span>
+    <span id="page-header-title-count" class="sr-only">{{ t "page.categories.total" }}: {{ .total }}</span>
     <nav aria-label="{{ t "page.categories.title" }} {{ t "menu.title" }}">
         <ul>
             <li>
@@ -29,13 +29,13 @@
         >
             <header id="category-title-{{ .ID }}"  class="item-header" dir="auto">
                 <h2 class="item-title">
-                    <a href="{{ route "categoryEntries" "categoryID" .ID }}">{{ .Title }}</a>
-                    <span aria-hidden="true">(</span>
-                    <span class="sr-only">
-                        {{ t "page.categories.unread_counter" }}:
-                    </span>
-                    <span>{{ .TotalUnread }}</span>
-                    <span aria-hidden="true">)</span>
+                    <a href="{{ route "categoryEntries" "categoryID" .ID }}" aria-label="{{ .Title }}, {{ t "page.categories.unread_counter" }}: {{ .TotalUnread }}">
+                        {{ .Title }}
+                        <span class="category-item-total" aria-hidden="true">
+                            (<span class="sr-only">{{ t "page.categories.unread_counter" }}: </span>{{ .TotalUnread }})
+                        </span>
+                    </a>
+
                 </h2>
             </header>
             <div class="item-meta">
@@ -57,6 +57,8 @@
                     {{ if eq (deRef .FeedCount) 0 }}
                     <li class="item-meta-icons-delete">
                         <a href="#"
+                            role="button"
+                            aria-describedby="category-title-{{ .ID }}"
                             data-confirm="true"
                             data-label-question="{{ t "confirm.question" }}"
                             data-label-yes="{{ t "confirm.yes" }}"
@@ -68,6 +70,8 @@
                     {{ if gt (deRef .TotalUnread) 0 }}
                       <li class="item-meta-icons-mark-as-read">
                         <a href="#"
+                            role="button"
+                            aria-describedby="category-title-{{ .ID }}"
                             data-confirm="true"
                             data-label-question="{{ t "confirm.question" }}"
                             data-label-yes="{{ t "confirm.yes" }}"

internal/template/templates/views/history_entries.html

@@ -1,17 +1,18 @@
 {{ define "title"}}{{ t "page.history.title" }} ({{ .total }}){{ end }}
 
 {{ define "page_header"}}
-<section class="page-header" aria-labelledby="page-header-title">
+<section class="page-header" aria-labelledby="page-header-title page-header-title-count">
     <h1 id="page-header-title">
         {{ t "page.history.title" }}
         <span aria-hidden="true">({{ .total }})</span>
     </h1>
-    <span class="sr-only">{{ t "page.history.total" }}: {{ .total }}</span>
+    <span id="page-header-title-count" class="sr-only">{{ t "page.history.total" }}: {{ .total }}</span>
     <nav aria-label="{{ t "page.history.title" }} {{ t "menu.title" }}">
         <ul>
             {{ if .entries }}
             <li>
                 <a href="#"
+                    role="button"
                     data-confirm="true"
                     data-url="{{ route "flushHistory" }}"
                     data-label-question="{{ t "confirm.question" }}"
@@ -37,16 +38,28 @@
     </div>
     <div class="items">
         {{ range .entries }}
-        <article class="item entry-item {{ if $.user.EntrySwipe }}entry-swipe{{ end }} item-status-{{ .Status }}" data-id="{{ .ID }}">
-            <div class="item-header" dir="auto">
-                <span class="item-title">
-                    {{ if ne .Feed.Icon.IconID 0 }}
+        <article
+            class="item entry-item {{ if $.user.EntrySwipe }}entry-swipe{{ end }} item-status-{{ .Status }}"
+            data-id="{{ .ID }}"
+            aria-labelledby="entry-title-{{ .ID }}"
+        >
+            <header class="item-header" dir="auto">
+                <h2 id="entry-title-{{ .ID }}" class="item-title">
+                    <a href="{{ route "readEntry" "entryID" .ID }}">
+                        {{ if ne .Feed.Icon.IconID 0 }}
                         <img src="{{ route "icon" "iconID" .Feed.Icon.IconID }}" width="16" height="16" loading="lazy" alt="{{ .Feed.Title }}">
-                    {{ end }}
-                    <a href="{{ route "readEntry" "entryID" .ID }}">{{ .Title }}</a>
+                        {{ else }}
+                        <span class="sr-only">{{ .Feed.Title }}</span>
+                        {{ end }}
+                        {{ .Title }}
+                    </a>
+                </h2>
+                <span class="category">
+                    <a href="{{ route "categoryEntries" "categoryID" .Feed.Category.ID }}">
+                        {{ .Feed.Category.Title }}
+                    </a>
                 </span>
-                <span class="category"><a href="{{ route "categoryEntries" "categoryID" .Feed.Category.ID }}">{{ .Feed.Category.Title }}</a></span>
-            </div>
+            </header>
             {{ template "item_meta" dict "user" $.user "entry" . "hasSaveEntry" $.hasSaveEntry  }}
         </article>
         {{ end }}

internal/template/templates/views/shared_entries.html

@@ -1,17 +1,18 @@
 {{ define "title"}}{{ t "page.shared_entries.title" }} ({{ .total }}){{ end }}
 
 {{ define "page_header"}}
-<section class="page-header" aria-labelledby="page-header-title">
+<section class="page-header" aria-labelledby="page-header-title page-header-title-count">
     <h1 id="page-header-title">
         {{ t "page.shared_entries.title" }}
         <span aria-hidden="true">({{ .total }})</span>
     </h1>
-    <span class="sr-only">{{ t "page.shared_entries.total" }}: {{ .total }}</span>
+    <span id="page-header-title-count" class="sr-only">{{ t "page.shared_entries.total" }}: {{ .total }}</span>
     {{ if .entries }}
     <nav aria-label="{{ t "page.shared_entries.title" }} {{ t "menu.title" }}">
         <ul>
             <li>
                 <a href="#"
+                    role="button"
                     data-confirm="true"
                     data-url="{{ route "flushHistory" }}"
                     data-label-question="{{ t "confirm.question" }}"

internal/template/templates/views/unread_entries.html

@@ -1,17 +1,18 @@
 {{ define "title"}}{{ t "page.unread.title" }} {{ if gt .countUnread 0 }}({{ .countUnread }}){{ end }} {{ end }}
 
 {{ define "page_header"}}
-<section class="page-header" aria-labelledby="page-header-title">
+<section class="page-header" aria-labelledby="page-header-title page-header-title-count">
     <h1 id="page-header-title">
         {{ t "page.unread.title" }}
         <span aria-hidden="true">(<span class="unread-counter">{{ .countUnread }}</span>)</span>
     </h1>
-    <span class="sr-only">{{ t "page.unread.total" }}: {{ .countUnread }}</span>
+    <span id="page-header-title-count" class="sr-only">{{ t "page.unread.total" }}: {{ .countUnread }}</span>
     {{ if .entries }}
     <nav aria-label="{{ t "page.unread.title" }} {{ t "menu.title" }}">
         <ul>
             <li>
                 <a href="#"
+                    role="button"
                     data-action="markPageAsRead"
                     data-show-only-unread="1"
                     data-label-question="{{ t "confirm.question" }}"
@@ -21,6 +22,7 @@
             </li>
             <li>
                 <a href="#"
+                    role="button"
                     data-confirm="true"
                     data-url="{{ route "markAllAsRead" }}"
                     data-redirect-url="{{ route "unread" }}"
@@ -75,6 +77,7 @@
         <ul>
             <li>
                 <a href="#"
+                    role="button"
                     data-action="markPageAsRead"
                     data-label-question="{{ t "confirm.question" }}"
                     data-label-yes="{{ t "confirm.yes" }}"