change article html structure for accessibility
This commit is contained in:
parent
531e80f580
commit
9b6dbd422c
6 changed files with 89 additions and 38 deletions
|
@ -19,16 +19,28 @@
|
|||
</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">
|
||||
<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 "starredEntry" "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 }}">
|
||||
{{ else }}
|
||||
<span class="sr-only">{{ .Feed.Title }}</span>
|
||||
{{ end }}
|
||||
<a href="{{ route "starredEntry" "entryID" .ID }}">{{ .Title }}</a>
|
||||
{{ .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 }}
|
||||
|
|
|
@ -156,7 +156,7 @@
|
|||
</div>
|
||||
{{ end }}
|
||||
{{ end }}
|
||||
<article role="article" class="entry-content gesture-nav-{{ $.user.GestureNav }}" dir="auto">
|
||||
<article class="entry-content gesture-nav-{{ $.user.GestureNav }}" dir="auto">
|
||||
{{ if (and .entry.Enclosures (not .entry.Feed.NoMediaPlayer)) }}
|
||||
{{ range .entry.Enclosures }}
|
||||
{{ if ne .URL "" }}
|
||||
|
|
|
@ -93,7 +93,11 @@
|
|||
</div>
|
||||
<div class="items">
|
||||
{{ range .entries }}
|
||||
<article class="item entry-item {{ if $.user.EntrySwipe }}entry-swipe{{ end }} item-status-{{ .Status }}" data-id="{{ .ID }}">
|
||||
<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
|
||||
|
|
|
@ -15,16 +15,28 @@
|
|||
</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">
|
||||
<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 "searchEntry" "entryID" .ID }}?q={{ $.searchQuery }}">
|
||||
{{ 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 }}
|
||||
<a href="{{ route "searchEntry" "entryID" .ID }}?q={{ $.searchQuery }}">{{ .Title }}</a>
|
||||
{{ .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 }}
|
||||
|
|
|
@ -34,21 +34,29 @@
|
|||
{{ else }}
|
||||
<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">
|
||||
<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 }}">
|
||||
{{ else }}
|
||||
<span class="sr-only">{{ .Feed.Title }}</span>
|
||||
{{ end }}
|
||||
<a href="{{ route "readEntry" "entryID" .ID }}">{{ .Title }}</a>
|
||||
{{ .Title }}
|
||||
</a>
|
||||
{{ if .ShareCode }}
|
||||
<a href="{{ route "sharedEntry" "shareCode" .ShareCode }}"
|
||||
title="{{ t "entry.shared_entry.title" }}"
|
||||
target="_blank">{{ icon "share" }}</a>
|
||||
{{ end }}
|
||||
</span>
|
||||
</h2>
|
||||
<span class="category"><a href="{{ route "categoryEntries" "categoryID" .Feed.Category.ID }}">{{ .Feed.Category.Title }}</a></span>
|
||||
</div>
|
||||
</header>
|
||||
<div class="item-meta">
|
||||
<ul class="item-meta-info">
|
||||
<li class="item-meta-info-site-url">
|
||||
|
|
|
@ -44,16 +44,28 @@
|
|||
</div>
|
||||
<div class="items hide-read-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">
|
||||
<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 "unreadEntry" "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 }}">
|
||||
{{ else }}
|
||||
<span class="sr-only">{{ .Feed.Title }}</span>
|
||||
{{ end }}
|
||||
<a href="{{ route "unreadEntry" "entryID" .ID }}">{{ .Title }}</a>
|
||||
{{ .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 }}
|
||||
|
@ -67,7 +79,10 @@
|
|||
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>
|
||||
data-label-loading="{{ t "confirm.loading" }}"
|
||||
>
|
||||
{{ icon "mark-page-as-read" }}{{ t "menu.mark_page_as_read" }}
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
{{ end }}
|
||||
|
|
Loading…
Reference in a new issue