1
0
Fork 0
mirror of https://github.com/miniflux/v2.git synced 2025-09-15 18:57:04 +00:00

improve page-header a11y

add nav landmark for links
labeling the purpose of nav in page-header
labeling the meaning of total number in page-header title
This commit is contained in:
krvpb024 2024-01-23 10:42:10 +08:00 committed by Frédéric Guillot
parent 9980634e5d
commit b568b1d41d
30 changed files with 419 additions and 217 deletions

View file

@ -2,7 +2,11 @@
{{ define "content"}}
<section class="page-header">
<h1>{{ t "page.starred.title" }} ({{ .total }})</h1>
<h1 dir="auto">
{{ t "page.starred.title" }}
<span aria-hidden="true"> ({{ .total }})</span>
</h1>
<span class="sr-only">{{ t "page.starred.total" }}: {{ .total }}</span>
</section>
{{ if not .entries }}

View file

@ -2,12 +2,18 @@
{{ define "content"}}
<section class="page-header">
<h1>{{ t "page.categories.title" }} ({{ .total }})</h1>
<ul>
<li>
<a href="{{ route "createCategory" }}">{{ icon "add-category" }}{{ t "menu.create_category" }}</a>
</li>
</ul>
<h1 dir="auto">
{{ t "page.categories.title" }}
<span aria-hidden="true"> ({{ .total }})</span>
</h1>
<span class="sr-only">{{ t "page.categories.total" }}: {{ .total }}</span>
<nav aria-label="{{ t "page.categories.title" }} {{ t "menu.title" }}">
<ul>
<li>
<a href="{{ route "createCategory" }}">{{ icon "add-category" }}{{ t "menu.create_category" }}</a>
</li>
</ul>
</nav>
</section>
{{ if not .categories }}

View file

@ -2,44 +2,56 @@
{{ define "content"}}
<section class="page-header">
<h1 dir="auto">{{ .category.Title }} ({{ .total }})</h1>
<ul>
{{ if .entries }}
<li>
<a href="#"
data-action="markPageAsRead"
data-label-question="{{ t "confirm.question" }}"
data-label-yes="{{ t "confirm.yes" }}"
data-label-no="{{ t "confirm.no" }}"
data-label-loading="{{ t "confirm.loading" }}"
data-show-only-unread="{{ if .showOnlyUnreadEntries }}1{{ end }}">{{ icon "mark-page-as-read" }}{{ t "menu.mark_page_as_read" }}</a>
</li>
<li>
<a href="#"
data-confirm="true"
data-label-question="{{ t "confirm.question" }}"
data-label-yes="{{ t "confirm.yes" }}"
data-label-no="{{ t "confirm.no" }}"
data-label-loading="{{ t "confirm.loading" }}"
data-url="{{ route "markCategoryAsRead" "categoryID" .category.ID }}">{{ icon "mark-all-as-read" }}{{ t "menu.mark_all_as_read" }}</a>
</li>
{{ end }}
{{ if .showOnlyUnreadEntries }}
<li>
<a href="{{ route "categoryEntriesAll" "categoryID" .category.ID }}">{{ icon "show-all-entries" }}{{ t "menu.show_all_entries" }}</a>
</li>
{{ else }}
<li>
<a href="{{ route "categoryEntries" "categoryID" .category.ID }}">{{ icon "show-unread-entries" }}{{ t "menu.show_only_unread_entries" }}</a>
</li>
{{ end }}
<li>
<a href="{{ route "categoryFeeds" "categoryID" .category.ID }}">{{ icon "feeds" }}{{ t "menu.feeds" }}</a>
</li>
<li>
<a href="{{ route "refreshCategoryEntriesPage" "categoryID" .category.ID }}">{{ icon "refresh" }}{{ t "menu.refresh_all_feeds" }}</a>
</li>
</ul>
<h1 dir="auto">
{{ .category.Title }}
<span aria-hidden="true">({{ .total }})</span>
</h1>
<span class="sr-only">
{{ if .showOnlyUnreadEntries }}
{{ t "page.categories.unread_counter" }}: {{ .total }}
{{ else }}
{{ t "page.categories.all_counter" }}: {{ .total }}
{{ end }}
</span>
<nav aria-label="{{ .category.Title }} {{ t "menu.title" }}">
<ul>
{{ if .entries }}
<li>
<a href="#"
data-action="markPageAsRead"
data-label-question="{{ t "confirm.question" }}"
data-label-yes="{{ t "confirm.yes" }}"
data-label-no="{{ t "confirm.no" }}"
data-label-loading="{{ t "confirm.loading" }}"
data-show-only-unread="{{ if .showOnlyUnreadEntries }}1{{ end }}">{{ icon "mark-page-as-read" }}{{ t "menu.mark_page_as_read" }}</a>
</li>
<li>
<a href="#"
data-confirm="true"
data-label-question="{{ t "confirm.question" }}"
data-label-yes="{{ t "confirm.yes" }}"
data-label-no="{{ t "confirm.no" }}"
data-label-loading="{{ t "confirm.loading" }}"
data-url="{{ route "markCategoryAsRead" "categoryID" .category.ID }}">{{ icon "mark-all-as-read" }}{{ t "menu.mark_all_as_read" }}</a>
</li>
{{ end }}
{{ if .showOnlyUnreadEntries }}
<li>
<a href="{{ route "categoryEntriesAll" "categoryID" .category.ID }}">{{ icon "show-all-entries" }}{{ t "menu.show_all_entries" }}</a>
</li>
{{ else }}
<li>
<a href="{{ route "categoryEntries" "categoryID" .category.ID }}">{{ icon "show-unread-entries" }}{{ t "menu.show_only_unread_entries" }}</a>
</li>
{{ end }}
<li>
<a href="{{ route "categoryFeeds" "categoryID" .category.ID }}">{{ icon "feeds" }}{{ t "menu.feeds" }}</a>
</li>
<li>
<a href="{{ route "refreshCategoryEntriesPage" "categoryID" .category.ID }}">{{ icon "refresh" }}{{ t "menu.refresh_all_feeds" }}</a>
</li>
</ul>
</nav>
</section>
{{ if not .entries }}

View file

@ -2,30 +2,38 @@
{{ define "content"}}
<section class="page-header">
<h1 dir="auto">{{ .category.Title }} &gt; {{ t "page.feeds.title" }} ({{ .total }})</h1>
<ul>
<li>
<a href="{{ route "categoryEntries" "categoryID" .category.ID }}">{{ icon "entries" }}{{ t "menu.feed_entries" }}</a>
</li>
<li>
<a href="{{ route "editCategory" "categoryID" .category.ID }}">{{ icon "edit" }}{{ t "menu.edit_category" }}</a>
</li>
{{ if eq .total 0 }}
<li>
<a href="#"
data-confirm="true"
data-label-question="{{ t "confirm.question" }}"
data-label-yes="{{ t "confirm.yes" }}"
data-label-no="{{ t "confirm.no" }}"
data-label-loading="{{ t "confirm.loading" }}"
data-redirect-url="{{ route "categories" }}"
data-url="{{ route "removeCategory" "categoryID" .category.ID }}">{{ icon "delete" }}{{ t "action.remove" }}</a>
</li>
{{ end }}
<li>
<a href="{{ route "refreshCategoryFeedsPage" "categoryID" .category.ID }}">{{ icon "refresh" }}{{ t "menu.refresh_all_feeds" }}</a>
</li>
</ul>
<h1 dir="auto">
{{ .category.Title }} <span aria-hidden="true">&gt;</span> {{ t "page.feeds.title" }}
<span aria-hidden="true"> ({{ .total }})</span>
</h1>
<span class="sr-only">
{{ t "page.categories.feeds.total" }}: {{ .total }}
</span>
<nav aria-label="{{ .category.Title }} {{ t "page.feeds.title" }} {{ t "menu.title" }}">
<ul>
<li>
<a href="{{ route "categoryEntries" "categoryID" .category.ID }}">{{ icon "entries" }}{{ t "menu.feed_entries" }}</a>
</li>
<li>
<a href="{{ route "editCategory" "categoryID" .category.ID }}">{{ icon "edit" }}{{ t "menu.edit_category" }}</a>
</li>
{{ if eq .total 0 }}
<li>
<a href="#"
data-confirm="true"
data-label-question="{{ t "confirm.question" }}"
data-label-yes="{{ t "confirm.yes" }}"
data-label-no="{{ t "confirm.no" }}"
data-label-loading="{{ t "confirm.loading" }}"
data-redirect-url="{{ route "categories" }}"
data-url="{{ route "removeCategory" "categoryID" .category.ID }}">{{ icon "delete" }}{{ t "action.remove" }}</a>
</li>
{{ end }}
<li>
<a href="{{ route "refreshCategoryFeedsPage" "categoryID" .category.ID }}">{{ icon "refresh" }}{{ t "menu.refresh_all_feeds" }}</a>
</li>
</ul>
</nav>
</section>
{{ if not .feeds }}

View file

@ -3,11 +3,13 @@
{{ define "content"}}
<section class="page-header">
<h1>{{ t "page.new_category.title" }}</h1>
<ul>
<li>
<a href="{{ route "categories" }}">{{ icon "categories" }}{{ t "menu.categories" }}</a>
</li>
</ul>
<nav aria-label="{{ t "page.new_category.title" }} {{ t "menu.title" }}">
<ul>
<li>
<a href="{{ route "categories" }}">{{ icon "categories" }}{{ t "menu.categories" }}</a>
</li>
</ul>
</nav>
</section>
<form action="{{ route "saveCategory" }}" method="post" autocomplete="off">

View file

@ -3,17 +3,19 @@
{{ define "content"}}
<section class="page-header">
<h1>{{ t "page.edit_category.title" .category.Title }}</h1>
<ul>
<li>
<a href="{{ route "categories" }}">{{ icon "categories" }}{{ t "menu.categories" }}</a>
</li>
<li>
<a href="{{ route "categoryFeeds" "categoryID" .category.ID }}">{{ icon "feeds" }}{{ t "menu.feeds" }}</a>
</li>
<li>
<a href="{{ route "createCategory" }}">{{ icon "add-category" }}{{ t "menu.create_category" }}</a>
</li>
</ul>
<nav aria-label="{{ t "page.edit_category.title" .category.Title }} {{ t "menu.title" }}">
<ul>
<li>
<a href="{{ route "categories" }}">{{ icon "categories" }}{{ t "menu.categories" }}</a>
</li>
<li>
<a href="{{ route "categoryFeeds" "categoryID" .category.ID }}">{{ icon "feeds" }}{{ t "menu.feeds" }}</a>
</li>
<li>
<a href="{{ route "createCategory" }}">{{ icon "add-category" }}{{ t "menu.create_category" }}</a>
</li>
</ul>
</nav>
</section>
<form action="{{ route "updateCategory" "categoryID" .category.ID }}" method="post" autocomplete="off">

View file

@ -3,24 +3,26 @@
{{ define "content"}}
<section class="page-header">
<h1 dir="auto">{{ .feed.Title }}</h1>
<ul>
<li>
<a href="{{ route "feeds" }}">{{ icon "feeds" }}{{ t "menu.feeds" }}</a>
</li>
<li>
<a href="{{ route "feedEntries" "feedID" .feed.ID }}">{{ icon "entries" }}{{ t "menu.feed_entries" }}</a>
</li>
<li>
<a href="#"
data-confirm="true"
data-label-question="{{ t "confirm.question.refresh" }}"
data-label-yes="{{ t "confirm.yes" }}"
data-label-no="{{ t "confirm.no" }}"
data-label-loading="{{ t "confirm.loading" }}"
data-url="{{ route "refreshFeed" "feedID" .feed.ID }}?forceRefresh=true"
data-no-action-url="{{ route "refreshFeed" "feedID" .feed.ID }}?forceRefresh=false">{{ icon "refresh" }}{{ t "menu.refresh_feed" }}</a>
</li>
</ul>
<nav aria-label="{{ .feed.Title }} {{ t "menu.title" }}">
<ul>
<li>
<a href="{{ route "feeds" }}">{{ icon "feeds" }}{{ t "menu.feeds" }}</a>
</li>
<li>
<a href="{{ route "feedEntries" "feedID" .feed.ID }}">{{ icon "entries" }}{{ t "menu.feed_entries" }}</a>
</li>
<li>
<a href="#"
data-confirm="true"
data-label-question="{{ t "confirm.question.refresh" }}"
data-label-yes="{{ t "confirm.yes" }}"
data-label-no="{{ t "confirm.no" }}"
data-label-loading="{{ t "confirm.loading" }}"
data-url="{{ route "refreshFeed" "feedID" .feed.ID }}?forceRefresh=true"
data-no-action-url="{{ route "refreshFeed" "feedID" .feed.ID }}?forceRefresh=false">{{ icon "refresh" }}{{ t "menu.refresh_feed" }}</a>
</li>
</ul>
</nav>
</section>
{{ if not .categories }}

View file

@ -4,63 +4,72 @@
<section class="page-header">
<h1 dir="auto">
<a href="{{ .feed.SiteURL | safeURL }}" title="{{ .feed.SiteURL }}" target="_blank" rel="noopener noreferrer" referrerpolicy="no-referrer" data-original-link="{{ .user.MarkReadOnView }}">{{ .feed.Title }}</a>
({{ .total }})
<span aria-hidden="true">({{ .total }})</span>
</h1>
<ul>
{{ if .entries }}
<li>
<a href="#"
data-action="markPageAsRead"
data-label-question="{{ t "confirm.question" }}"
data-label-yes="{{ t "confirm.yes" }}"
data-label-no="{{ t "confirm.no" }}"
data-label-loading="{{ t "confirm.loading" }}"
data-show-only-unread="{{ if .showOnlyUnreadEntries }}1{{ end }}">{{ icon "mark-page-as-read" }}{{ t "menu.mark_page_as_read" }}</a>
</li>
<li>
<a href="#"
data-confirm="true"
data-label-question="{{ t "confirm.question" }}"
data-label-yes="{{ t "confirm.yes" }}"
data-label-no="{{ t "confirm.no" }}"
data-label-loading="{{ t "confirm.loading" }}"
data-url="{{ route "markFeedAsRead" "feedID" .feed.ID }}">{{ icon "mark-all-as-read" }}{{ t "menu.mark_all_as_read" }}</a>
</li>
{{ end }}
<span class="sr-only">
{{ if .showOnlyUnreadEntries }}
<li>
<a href="{{ route "feedEntriesAll" "feedID" .feed.ID }}">{{ icon "show-all-entries" }}{{ t "menu.show_all_entries" }}</a>
</li>
{{ t "page.feeds.unread_counter" }}: {{ .total }}
{{ else }}
<li>
<a href="{{ route "feedEntries" "feedID" .feed.ID }}">{{ icon "show-unread-entries" }}{{ t "menu.show_only_unread_entries" }}</a>
</li>
{{ t "page.feeds.read_counter" }}: {{ .total }}
{{ end }}
<li>
<a href="#"
data-confirm="true"
data-label-question="{{ t "confirm.question.refresh" }}"
data-label-yes="{{ t "confirm.yes" }}"
data-label-no="{{ t "confirm.no" }}"
data-label-loading="{{ t "confirm.loading" }}"
data-url="{{ route "refreshFeed" "feedID" .feed.ID }}?forceRefresh=true"
data-no-action-url="{{ route "refreshFeed" "feedID" .feed.ID }}?forceRefresh=false">{{ icon "refresh" }}{{ t "menu.refresh_feed" }}</a>
</li>
<li>
<a href="{{ route "editFeed" "feedID" .feed.ID }}">{{ icon "edit" }}{{ t "menu.edit_feed" }}</a>
</li>
<li>
<a href="#"
data-confirm="true"
data-action="remove-feed"
data-label-question="{{ t "confirm.question" }}"
data-label-yes="{{ t "confirm.yes" }}"
data-label-no="{{ t "confirm.no" }}"
data-label-loading="{{ t "confirm.loading" }}"
data-url="{{ route "removeFeed" "feedID" .feed.ID }}"
data-redirect-url="{{ route "feeds" }}">{{ icon "delete" }}{{ t "action.remove_feed" }}</a>
</li>
</ul>
</span>
<nav aria-label="{{ .feed.Title }} {{ t "menu.title" }}">
<ul>
{{ if .entries }}
<li>
<a href="#"
data-action="markPageAsRead"
data-label-question="{{ t "confirm.question" }}"
data-label-yes="{{ t "confirm.yes" }}"
data-label-no="{{ t "confirm.no" }}"
data-label-loading="{{ t "confirm.loading" }}"
data-show-only-unread="{{ if .showOnlyUnreadEntries }}1{{ end }}">{{ icon "mark-page-as-read" }}{{ t "menu.mark_page_as_read" }}</a>
</li>
<li>
<a href="#"
data-confirm="true"
data-label-question="{{ t "confirm.question" }}"
data-label-yes="{{ t "confirm.yes" }}"
data-label-no="{{ t "confirm.no" }}"
data-label-loading="{{ t "confirm.loading" }}"
data-url="{{ route "markFeedAsRead" "feedID" .feed.ID }}">{{ icon "mark-all-as-read" }}{{ t "menu.mark_all_as_read" }}</a>
</li>
{{ end }}
{{ if .showOnlyUnreadEntries }}
<li>
<a href="{{ route "feedEntriesAll" "feedID" .feed.ID }}">{{ icon "show-all-entries" }}{{ t "menu.show_all_entries" }}</a>
</li>
{{ else }}
<li>
<a href="{{ route "feedEntries" "feedID" .feed.ID }}">{{ icon "show-unread-entries" }}{{ t "menu.show_only_unread_entries" }}</a>
</li>
{{ end }}
<li>
<a href="#"
data-confirm="true"
data-label-question="{{ t "confirm.question.refresh" }}"
data-label-yes="{{ t "confirm.yes" }}"
data-label-no="{{ t "confirm.no" }}"
data-label-loading="{{ t "confirm.loading" }}"
data-url="{{ route "refreshFeed" "feedID" .feed.ID }}?forceRefresh=true"
data-no-action-url="{{ route "refreshFeed" "feedID" .feed.ID }}?forceRefresh=false">{{ icon "refresh" }}{{ t "menu.refresh_feed" }}</a>
</li>
<li>
<a href="{{ route "editFeed" "feedID" .feed.ID }}">{{ icon "edit" }}{{ t "menu.edit_feed" }}</a>
</li>
<li>
<a href="#"
data-confirm="true"
data-action="remove-feed"
data-label-question="{{ t "confirm.question" }}"
data-label-yes="{{ t "confirm.yes" }}"
data-label-no="{{ t "confirm.no" }}"
data-label-loading="{{ t "confirm.loading" }}"
data-url="{{ route "removeFeed" "feedID" .feed.ID }}"
data-redirect-url="{{ route "feeds" }}">{{ icon "delete" }}{{ t "action.remove_feed" }}</a>
</li>
</ul>
</nav>
</section>
{{ if ne .feed.ParsingErrorCount 0 }}

View file

@ -2,23 +2,29 @@
{{ define "content"}}
<section class="page-header">
<h1>{{ t "page.history.title" }} ({{ .total }})</h1>
<ul>
{{ if .entries }}
<li>
<a href="#"
data-confirm="true"
data-url="{{ route "flushHistory" }}"
data-label-question="{{ t "confirm.question" }}"
data-label-yes="{{ t "confirm.yes" }}"
data-label-no="{{ t "confirm.no" }}"
data-label-loading="{{ t "confirm.loading" }}">{{ icon "delete" }}{{ t "menu.flush_history" }}</a>
</li>
{{ end }}
<li>
<a href="{{ route "sharedEntries" }}">{{ icon "share" }}{{ t "menu.shared_entries" }}</a>
</li>
</ul>
<h1>
{{ t "page.history.title" }}
<span aria-hidden="true">({{ .total }})</span>
</h1>
<span 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="#"
data-confirm="true"
data-url="{{ route "flushHistory" }}"
data-label-question="{{ t "confirm.question" }}"
data-label-yes="{{ t "confirm.yes" }}"
data-label-no="{{ t "confirm.no" }}"
data-label-loading="{{ t "confirm.loading" }}">{{ icon "delete" }}{{ t "menu.flush_history" }}</a>
</li>
{{ end }}
<li>
<a href="{{ route "sharedEntries" }}">{{ icon "share" }}{{ t "menu.shared_entries" }}</a>
</li>
</ul>
</nav>
</section>
{{ if not .entries }}

View file

@ -2,22 +2,28 @@
{{ define "content"}}
<section class="page-header">
<h1>{{ t "page.shared_entries.title" }} ({{ .total }})</h1>
<h1>
{{ t "page.shared_entries.title" }}
<span aria-hidden="true">({{ .total }})</span>
</h1>
<span class="sr-only">{{ t "page.shared_entries.total" }}: {{ .total }}</span>
{{ if .entries }}
<ul>
<li>
<a href="#"
data-confirm="true"
data-url="{{ route "flushHistory" }}"
data-label-question="{{ t "confirm.question" }}"
data-label-yes="{{ t "confirm.yes" }}"
data-label-no="{{ t "confirm.no" }}"
data-label-loading="{{ t "confirm.loading" }}">{{ icon "delete" }}{{ t "menu.flush_history" }}</a>
</li>
<li>
<a href="{{ route "sharedEntries" }}">{{ icon "share" }}{{ t "menu.shared_entries" }}</a>
</li>
</ul>
<nav aria-label="{{ t "page.shared_entries.title" }} {{ t "menu.title" }}">
<ul>
<li>
<a href="#"
data-confirm="true"
data-url="{{ route "flushHistory" }}"
data-label-question="{{ t "confirm.question" }}"
data-label-yes="{{ t "confirm.yes" }}"
data-label-no="{{ t "confirm.no" }}"
data-label-loading="{{ t "confirm.loading" }}">{{ icon "delete" }}{{ t "menu.flush_history" }}</a>
</li>
<li>
<a href="{{ route "sharedEntries" }}">{{ icon "share" }}{{ t "menu.shared_entries" }}</a>
</li>
</ul>
</nav>
{{ end }}
</section>

View file

@ -2,29 +2,35 @@
{{ define "content"}}
<section class="page-header">
<h1>{{ t "page.unread.title" }} (<span class="unread-counter">{{ .countUnread }}</span>)</h1>
<h1>
{{ 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>
{{ if .entries }}
<ul>
<li>
<a href="#"
data-action="markPageAsRead"
data-show-only-unread="1"
data-label-question="{{ t "confirm.question" }}"
data-label-yes="{{ t "confirm.yes" }}"
data-label-no="{{ t "confirm.no" }}"
data-label-loading="{{ t "confirm.loading" }}">{{ icon "mark-page-as-read" }}{{ t "menu.mark_page_as_read" }}</a>
</li>
<li>
<a href="#"
data-confirm="true"
data-url="{{ route "markAllAsRead" }}"
data-redirect-url="{{ route "unread" }}"
data-label-question="{{ t "confirm.question" }}"
data-label-yes="{{ t "confirm.yes" }}"
data-label-no="{{ t "confirm.no" }}"
data-label-loading="{{ t "confirm.loading" }}">{{ icon "mark-all-as-read" }}{{ t "menu.mark_all_as_read" }}</a>
</li>
</ul>
<nav aria-label="{{ t "page.unread.title" }} {{ t "menu.title" }}">
<ul>
<li>
<a href="#"
data-action="markPageAsRead"
data-show-only-unread="1"
data-label-question="{{ t "confirm.question" }}"
data-label-yes="{{ t "confirm.yes" }}"
data-label-no="{{ t "confirm.no" }}"
data-label-loading="{{ t "confirm.loading" }}">{{ icon "mark-page-as-read" }}{{ t "menu.mark_page_as_read" }}</a>
</li>
<li>
<a href="#"
data-confirm="true"
data-url="{{ route "markAllAsRead" }}"
data-redirect-url="{{ route "unread" }}"
data-label-question="{{ t "confirm.question" }}"
data-label-yes="{{ t "confirm.yes" }}"
data-label-no="{{ t "confirm.no" }}"
data-label-loading="{{ t "confirm.loading" }}">{{ icon "mark-all-as-read" }}{{ t "menu.mark_all_as_read" }}</a>
</li>
</ul>
</nav>
{{ end }}
</section>