support links in text-based browsers

This change modifies the list template to add
an additional <a> to the article header.

The existing a tag uses the `entry-link` css class
to make the containing article cliable by forcing
`position: absolute` in combination with an empty
anchor element `<a class='entry-link'></a>`

This has the effect of making the entire article
clickable to navigate in a graphical browser however
it is not rendered in a text-based browser.

To correct this the title text in the article header
is wrapped in a second <a> tag. The `entry-link` css
class is not applied and default css is inherited.

Closes: #1716
This commit is contained in:
Sean Mooney 2025-04-14 23:21:08 +01:00
parent 149f12cea7
commit 3cf08c132c

View file

@ -68,7 +68,8 @@
{{- partial "cover.html" (dict "cxt" . "IsSingle" false "isHidden" $isHidden) }}
<header class="entry-header">
<h2 class="entry-hint-parent">
{{- .Title }}
<!-- This link makes the title text clickable in text mode -->
<a aria-label="post link to {{ .Title | plainify }}" href="{{ .Permalink }}">{{- .Title }}</a>
{{- if .Draft }}
<span class="entry-hint" title="Draft">
<svg xmlns="http://www.w3.org/2000/svg" height="20" viewBox="0 -960 960 960" fill="currentColor">
@ -89,6 +90,7 @@
{{- partial "post_meta.html" . -}}
</footer>
{{- end }}
<!-- This link makes the entire entry clickable in a graphical browser -->
<a class="entry-link" aria-label="post link to {{ .Title | plainify }}" href="{{ .Permalink }}"></a>
</article>
{{- end }}