From 8367413e84b88a96711b607181b5d1ef88c37233 Mon Sep 17 00:00:00 2001
From: krvpb024 <krvpb024@protonmail.com>
Date: Fri, 2 Feb 2024 16:30:45 +0800
Subject: [PATCH] change links that could perform actions to buttons

---
 .../template/templates/common/feed_list.html  | 12 +++++--
 .../template/templates/common/feed_menu.html  |  2 +-
 .../template/templates/common/item_meta.html  | 14 ++++++++
 .../template/templates/common/layout.html     | 16 ++++++---
 .../templates/views/bookmark_entries.html     |  4 +--
 .../template/templates/views/categories.html  | 22 ++++++++-----
 .../templates/views/history_entries.html      | 33 +++++++++++++------
 .../templates/views/shared_entries.html       |  5 +--
 .../templates/views/unread_entries.html       |  7 ++--
 internal/ui/static/css/common.css             | 20 +++++++----
 10 files changed, 95 insertions(+), 40 deletions(-)

diff --git a/internal/template/templates/common/feed_list.html b/internal/template/templates/common/feed_list.html
index 4f47ce99..b4bee86f 100644
--- a/internal/template/templates/common/feed_list.html
+++ b/internal/template/templates/common/feed_list.html
@@ -55,13 +55,19 @@
                 </ul>
                 <ul class="item-meta-icons">
                     <li class="item-meta-icons-refresh">
-                        <a href="{{ route "refreshFeed" "feedID" .ID }}">{{ icon "refresh" }}<span class="icon-label">{{ t "menu.refresh_feed" }}</span></a>
+                        <a href="{{ route "refreshFeed" "feedID" .ID }}"
+                            role="button"
+                            aria-describedby="feed-title-{{ .ID }}">{{ icon "refresh" }}<span class="icon-label">{{ t "menu.refresh_feed" }}</span></a>
                     </li>
                     <li class="item-meta-icons-edit">
-                        <a href="{{ route "editFeed" "feedID" .ID }}">{{ icon "edit" }}<span class="icon-label">{{ t "menu.edit_feed" }}</span></a>
+                        <a href="{{ route "editFeed" "feedID" .ID }}"
+                            role="button"
+                            aria-describedby="feed-title-{{ .ID }}">{{ icon "edit" }}<span class="icon-label">{{ t "menu.edit_feed" }}</span></a>
                     </li>
                     <li class="item-meta-icons-remove">
                         <a href="#"
+                            role="button"
+                            aria-describedby="feed-title-{{ .ID }}"
                             data-confirm="true"
                             data-label-question="{{ t "confirm.question" }}"
                             data-label-yes="{{ t "confirm.yes" }}"
@@ -72,6 +78,8 @@
                     {{ if .UnreadCount }}
                       <li class="item-meta-icons-mark-as-read">
                         <a href="#"
+                            role="button"
+                            aria-describedby="feed-title-{{ .ID }}"
                             data-confirm="true"
                             data-label-question="{{ t "confirm.question" }}"
                             data-label-yes="{{ t "confirm.yes" }}"
diff --git a/internal/template/templates/common/feed_menu.html b/internal/template/templates/common/feed_menu.html
index c0b96a42..546c44d9 100644
--- a/internal/template/templates/common/feed_menu.html
+++ b/internal/template/templates/common/feed_menu.html
@@ -13,7 +13,7 @@
         <a href="{{ route "import" }}">{{ icon "feed-import" }}{{ t "menu.import" }}</a>
     </li>
     <li>
-        <a href="{{ route "refreshAllFeeds" }}">{{ icon "refresh" }}{{ t "menu.refresh_all_feeds" }}</a>
+        <a role="button" href="{{ route "refreshAllFeeds" }}">{{ icon "refresh" }}{{ t "menu.refresh_all_feeds" }}</a>
     </li>
 </ul></nav>
 {{ end }}
diff --git a/internal/template/templates/common/item_meta.html b/internal/template/templates/common/item_meta.html
index 176fa34a..bb4dee3a 100644
--- a/internal/template/templates/common/item_meta.html
+++ b/internal/template/templates/common/item_meta.html
@@ -18,6 +18,8 @@
     <ul class="item-meta-icons">
         <li class="item-meta-icons-read">
             <a href="#"
+                role="button"
+                aria-describedby="entry-title-{{ .entry.ID }}"
                 title="{{ t "entry.status.title" }}"
                 data-toggle-status="true"
                 data-label-loading="{{ t "entry.state.saving" }}"
@@ -28,6 +30,8 @@
         </li>
         <li class="item-meta-icons-star">
             <a href="#"
+                role="button"
+                aria-describedby="entry-title-{{ .entry.ID }}"
                 data-toggle-bookmark="true"
                 data-bookmark-url="{{ route "toggleBookmark" "entryID" .entry.ID }}"
                 data-label-loading="{{ t "entry.state.saving" }}"
@@ -39,11 +43,15 @@
         {{ if .entry.ShareCode }}
             <li class="item-meta-icons-share">
                 <a href="{{ route "sharedEntry" "shareCode" .entry.ShareCode }}"
+                    role="button"
+                    aria-describedby="entry-title-{{ .entry.ID }}"
                     title="{{ t "entry.shared_entry.title" }}"
                     target="_blank">{{ icon "share" }}<span class="icon-label">{{ t "entry.shared_entry.label" }}</span></a>
             </li>
             <li class="item-meta-icons-delete">
                 <a href="#"
+                    role="button"
+                    aria-describedby="entry-title-{{ .entry.ID }}"
                     data-confirm="true"
                     data-url="{{ route "unshareEntry" "entryID" .entry.ID }}"
                     data-label-question="{{ t "confirm.question" }}"
@@ -55,6 +63,8 @@
         {{ if .hasSaveEntry }}
             <li>
                 <a href="#"
+                    role="button"
+                    aria-describedby="entry-title-{{ .entry.ID }}"
                     title="{{ t "entry.save.title" }}"
                     data-save-entry="true"
                     data-save-url="{{ route "saveEntry" "entryID" .entry.ID }}"
@@ -65,6 +75,8 @@
         {{ end }}
         <li class="item-meta-icons-external-url">
             <a href="{{ .entry.URL | safeURL  }}"
+                role="button"
+                aria-describedby="entry-title-{{ .entry.ID }}"
                 target="_blank"
                 rel="noopener noreferrer"
                 referrerpolicy="no-referrer"
@@ -73,6 +85,8 @@
         {{ if .entry.CommentsURL }}
             <li class="item-meta-icons-comments">
                 <a href="{{ .entry.CommentsURL | safeURL  }}"
+                    role="button"
+                    aria-describedby="entry-title-{{ .entry.ID }}"
                     title="{{ t "entry.comments.title" }}"
                     target="_blank"
                     rel="noopener noreferrer"
diff --git a/internal/template/templates/common/layout.html b/internal/template/templates/common/layout.html
index 32ba9506..49cf9311 100644
--- a/internal/template/templates/common/layout.html
+++ b/internal/template/templates/common/layout.html
@@ -78,10 +78,16 @@
             </div>
             <ul id="header-menu">
                 <li {{ if eq .menu "unread" }}class="active"{{ end }} title="{{ t "tooltip.keyboard_shortcuts" "g u" }}">
-                    <a href="{{ route "unread" }}" data-page="unread">{{ t "menu.unread" }}
-                      {{ if gt .countUnread 0 }}
-                          <span class="unread-counter-wrapper">(<span class="unread-counter">{{ .countUnread }}</span>)</span>
-                      {{ end }}
+                    <a href="{{ route "unread" }}"
+                        data-page="unread"
+                        {{ if gt .countUnread 0 }}
+                        aria-label="{{ t "menu.unread" }}, {{ t "page.unread.total" }}: {{ .countUnread }}"
+                        {{ end }}
+                    >
+                        {{ t "menu.unread" }}
+                        {{ if gt .countUnread 0 }}
+                        <span class="unread-counter-wrapper" aria-hidden="true">(<span class="unread-counter">{{ .countUnread }}</span>)</span>
+                        {{ end }}
                     </a>
                 </li>
                 <li {{ if eq .menu "starred" }}class="active"{{ end }} title="{{ t "tooltip.keyboard_shortcuts" "g b" }}">
@@ -96,7 +102,7 @@
                           <span class="error-feeds-counter-wrapper">(<span class="error-feeds-counter">{{ .countErrorFeeds }}</span>)</span>
                       {{ end }}
                     </a>
-                    <a href="{{ route "addSubscription" }}" title="{{ t "tooltip.keyboard_shortcuts" "+" }}">
+                    <a href="{{ route "addSubscription" }}" title="{{ t "tooltip.keyboard_shortcuts" "+" }}" aria-label="{{ t "menu.add_feed" }}">
                         (+)
                     </a>
                 </li>
diff --git a/internal/template/templates/views/bookmark_entries.html b/internal/template/templates/views/bookmark_entries.html
index 5c709937..883653e9 100644
--- a/internal/template/templates/views/bookmark_entries.html
+++ b/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 }}
 
diff --git a/internal/template/templates/views/categories.html b/internal/template/templates/views/categories.html
index d45bf7f7..2f7aac2b 100644
--- a/internal/template/templates/views/categories.html
+++ b/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" }}"
diff --git a/internal/template/templates/views/history_entries.html b/internal/template/templates/views/history_entries.html
index 9fda4295..672bc0fb 100644
--- a/internal/template/templates/views/history_entries.html
+++ b/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 }}
diff --git a/internal/template/templates/views/shared_entries.html b/internal/template/templates/views/shared_entries.html
index ffbee9ee..2e6c7520 100644
--- a/internal/template/templates/views/shared_entries.html
+++ b/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" }}"
diff --git a/internal/template/templates/views/unread_entries.html b/internal/template/templates/views/unread_entries.html
index caad5113..a3151452 100644
--- a/internal/template/templates/views/unread_entries.html
+++ b/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" }}"
diff --git a/internal/ui/static/css/common.css b/internal/ui/static/css/common.css
index 383af62c..0eea70ce 100644
--- a/internal/ui/static/css/common.css
+++ b/internal/ui/static/css/common.css
@@ -133,7 +133,7 @@ a:hover {
     color: #888;
 }
 
-.header a {
+.header :is(a, summary) {
     font-size: 0.9em;
     color: var(--header-link-color);
     text-decoration: none;
@@ -147,10 +147,6 @@ a:hover {
     font-weight: 600;
 }
 
-.header a:hover {
-    color: var(--header-link-hover-color);
-}
-
 .header a:focus {
     color: var(--header-link-focus-color);
 }
@@ -229,7 +225,7 @@ a:hover {
    padding: 5px;
    inline-size: 24px;
    block-size: 24px;
-   translate: 0 -1px;
+   translate: 0 -3px;
 }
 
 .search details[open] svg {
@@ -335,7 +331,7 @@ a:hover {
     }
 
     .header nav {
-        align-items: start;
+        align-items: end;
         flex-direction: row;
     }
 
@@ -355,6 +351,10 @@ a:hover {
         display: revert;
     }
 
+    .header :is(a, summary):hover {
+        color: var(--header-link-hover-color);
+    }
+
     .page-header li,
     .page-footer li {
         display: inline;
@@ -750,6 +750,11 @@ template {
     color: var(--category-link-hover-color);
 }
 
+
+.category-item-total {
+    color: var(--body-color);
+}
+
 /* Pagination */
 .pagination {
     font-size: 1.1em;
@@ -822,6 +827,7 @@ template {
 
 .item-header span {
     font-weight: normal;
+    display: inline-block;
 }
 
 .item-title {