change links that could perform actions to buttons

4 files changed, 36 insertions, 8 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>