1
0
Fork 0
mirror of https://git.sr.ht/~seirdy/seirdy.one synced 2024-12-27 10:52:09 +00:00
seirdy.one/layouts/partials/processed-content.html
Rohan Kumar 9d4f18ffde
a11y: Make backlink label start with name
The WCAG "label in name" SC requires visible labels to contain
accessible names, preferably by having accessible names start with
visible labels. This commit makes footnote backlinks display as a
hyperlink reading "Back" to meet this SC.
2022-07-11 15:18:15 -07:00

66 lines
3.5 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

{{- $footnote_heading := printf "Footnotes" -}}
{{- if .Params.footnote_heading -}}
{{- $footnote_heading = .Params.footnote_heading -}}
{{- end -}}
<!--
Add heading to footnotes, remove unused class.
Requires Goldmark v1.4.12 or higher, since that version switched
endnotes from a <section> to a <div>.
-->
{{- $referencesWithoutHeading := `(<div class="footnotes" role="doc-endnotes">
<hr />)` -}}
{{- $referencesWithHeading := printf `<hr />
<section role="doc-endnotes" aria-labelledby="note-hd">
<h2 id="note-hd">%s</h2>` ($footnote_heading) -}}
{{- $endnotesClosingDiv := `</a></p>
</li>
</ol>
</div>` -}}
{{- $endnotesClosingSection := printf `</a></p>
</li>
</ol>
</section>` -}}
<!--
Sometimes I want multiple described terms for a set of descriptions
in a description list
-->
{{- $combinedTerm := `<dt>(.*) OR (.*)</dt>` -}}
{{- $splitTerm := `<dt>$1</dt><dt>$2</dt>` -}}
<!--
Descriptive footnote link names, remove unused class, put
backlink id in <a> since <a> is focusable, remove unused class.
-->
{{- $badNoteRef := `<sup id="fnref([0-9\:]*)"><a( [^>]*)class="footnote-ref" role="doc-noteref">([0-9]*)</a>` -}}
{{- $goodNoteRef := `<sup><a${2}id="fnref${1}" role="doc-noteref">note&#160;${3}</a>` -}}
<!--Move the Table of Contents heading *inside* the <nav> element-->
{{- $tocHeadingOutside := `<h2>Table of Contents</h2><nav(?:.*)>` -}}
{{- $tocHeadingInside := `<nav id="TableOfContents" role="doc-toc" aria-labelledby="toc-hd" tabindex="-1">
<h2 id="toc-hd">Table of Contents</h2>` -}}
<!--Give footnote backlinks accessible names-->
{{- $footnoteBacklinksBad := `<a href="#fnref:([0-9]*)" class="footnote-backref"(.*role="doc-backlink"(?:[^>]*)?)>([^<]*)` -}}
{{- $footnoteBacklinksGood := `<br /><a href="#fnref:${1}" aria-labelledby="bl1-${1} bl2-${1}"${2}><span id="bl1-${1}">Back</span><span id="bl2-${1}" hidden=""> to reference ${1}</span>` -}}
<!--
If two backlinks exist, give them different names.
I currently don't have any triple backlinks; if I ever do, I'll implement this properly with a loop.
-->
{{- $repeatedFootnoteBacklinksBad := `<a href="#fnref([0-9]):([0-9]*)"(.*role="doc-backlink"(?:[^>]*)?)>([^<]*)` -}}
{{- $repeatedFootnoteBacklinksGood := `<br /><a href="#fnref${1}:${2}" aria-labelledby="bl1-${2}-2 bl2-${2}-2"${3}><span id="bl1-${2}-2">Back</span><span id="bl2-${2}-2" hidden=""> to reference ${2}, instance 2</span>` -}}
<!--Make endnotes focusable by ATs. Necessary for VoiceOver compatibility.-->
{{- $endNotesNotFocusable := `<li id="fn:([0-9]*)">` -}}
{{- $endNotesFocusable := `<li id="fn:${1}" tabindex="-1">` -}}
<!--Since language-figure doesn't seem to work for some reason just use regex to replace it-->
{{- $extraLanguageFigure := `<pre><(code|samp) class="language-figure">` -}}
{{- $replacedLanguageFigure := `<pre tabindex="0"><${1} translate="no" itemprop="text">` -}}
{{- .Content | replaceRE $referencesWithoutHeading $referencesWithHeading | replaceRE $badNoteRef $goodNoteRef | replaceRE $endnotesClosingDiv $endnotesClosingSection | replaceRE $combinedTerm $splitTerm | replaceRE $tocHeadingOutside $tocHeadingInside | replaceRE $footnoteBacklinksBad $footnoteBacklinksGood | replaceRE $repeatedFootnoteBacklinksBad $repeatedFootnoteBacklinksGood | replaceRE $endNotesNotFocusable $endNotesFocusable | replaceRE $extraLanguageFigure $replacedLanguageFigure | replaceRE `\&rsquo;` `` | replaceRE `\&nbsp;` `&#160;` | replaceRE `\&ldquo;` `“` | replaceRE `\&rdquo;` `”` | replaceRE `\&hellip;` `…` | replaceRE `\&mdash;` `—` | replaceRE `\&shy;` `&#173;` | replaceRE `&lsquo;` ``| safeHTML -}}