diff options
Diffstat (limited to 'internal/template')
9 files changed, 82 insertions, 33 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" }}" |