diff options
Diffstat (limited to 'internal/template')
| -rw-r--r-- | internal/template/templates/common/feed_list.html | 45 | ||||
| -rw-r--r-- | internal/template/templates/views/categories.html | 20 | ||||
| -rw-r--r-- | internal/template/templates/views/category_entries.html | 40 | ||||
| -rw-r--r-- | internal/template/templates/views/feed_entries.html | 37 |
4 files changed, 99 insertions, 43 deletions
diff --git a/internal/template/templates/common/feed_list.html b/internal/template/templates/common/feed_list.html index 2caaabf6..4f47ce99 100644 --- a/internal/template/templates/common/feed_list.html +++ b/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 }}"> - <div class="item-header" dir="auto"> - <span class="item-title"> - {{ if and (.Icon) (gt .Icon.IconID 0) }} - <img src="{{ route "icon" "iconID" .Icon.IconID }}" width="16" height="16" loading="lazy" alt="{{ .Title }}"> - {{ end }} - {{ if .Disabled }} 🚫 {{ end }} - <a href="{{ route "feedEntries" "feedID" .ID }}">{{ .Title }}</a> - </span> + <article + class="item feed-item {{ if ne .ParsingErrorCount 0 }}feed-parsing-error{{ else if ne .UnreadCount 0 }}feed-has-unread{{ end }}" + aria-labelledby="feed-title-{{ .ID }}" + > + <header class="item-header" dir="auto"> + <h2 id="feed-title-{{ .ID }}" class="item-title"> + + <a href="{{ route "feedEntries" "feedID" .ID }}"> + {{ 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"> diff --git a/internal/template/templates/views/categories.html b/internal/template/templates/views/categories.html index 7c98f92c..a0c273af 100644 --- a/internal/template/templates/views/categories.html +++ b/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}}"> - <div class="item-header" dir="auto"> - <span class="item-title"> + <article + class="item category-item {{if gt (deRef .TotalUnread) 0 }} category-has-unread{{end}}" + 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 title="{{ t "page.categories.unread_counter" }}">{{ .TotalUnread }}</span>) - </div> + <span aria-hidden="true">(</span> + <span class="sr-only"> + {{ 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"> diff --git a/internal/template/templates/views/category_entries.html b/internal/template/templates/views/category_entries.html index eafacee4..8b61a86e 100644 --- a/internal/template/templates/views/category_entries.html +++ b/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 }}"> - <div class="item-header" dir="auto"> - <span class="item-title"> - {{ if ne .Feed.Icon.IconID 0 }} - <img src="{{ route "icon" "iconID" .Feed.Icon.IconID }}" width="16" height="16" loading="lazy" alt="{{ .Feed.Title }}"> - {{ end }} - {{ if $.showOnlyUnreadEntries }} - <a href="{{ route "unreadCategoryEntry" "categoryID" .Feed.Category.ID "entryID" .ID }}">{{ .Title }}</a> - {{ else }} - <a href="{{ route "categoryEntry" "categoryID" .Feed.Category.ID "entryID" .ID }}">{{ .Title }}</a> - {{ end }} + <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 + {{ if $.showOnlyUnreadEntries }} + href="{{ route "unreadCategoryEntry" "categoryID" .Feed.Category.ID "entryID" .ID }}" + {{ 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> - </div> + </header> {{ template "item_meta" dict "user" $.user "entry" . "hasSaveEntry" $.hasSaveEntry }} </article> {{ end }} diff --git a/internal/template/templates/views/feed_entries.html b/internal/template/templates/views/feed_entries.html index 05181ebe..e101a3ce 100644 --- a/internal/template/templates/views/feed_entries.html +++ b/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 }}"> - <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 }}"> + <header class="item-header" dir="auto"> + <h2 id="entry-title-{{ .ID }}" class="item-title"> + <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 }} - {{ if $.showOnlyUnreadEntries }} - <a href="{{ route "unreadFeedEntry" "feedID" .Feed.ID "entryID" .ID }}">{{ .Title }}</a> - {{ else }} - <a href="{{ route "feedEntry" "feedID" .Feed.ID "entryID" .ID }}">{{ .Title }}</a> - {{ end }} + {{ 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> - </div> + </header> {{ template "item_meta" dict "user" $.user "entry" . "hasSaveEntry" $.hasSaveEntry }} </article> {{ end }} |