Mirrors/zola
2
0
Fork 0
mirror of https://github.com/getzola/zola synced 2025-03-02 14:07:16 +00:00
Code Issues Projects Releases Packages Wiki Activity

Improve accessibility by nesting bottom footnotes inside footer element (#2688)

Browse source 
This adds semantic meaning to the footnotes organization and improves
accessibility by aiding disabled users who rely on assistive devices
such as screen readers which utilize semantic tags such as the footer
element in order to navigate properly.

The hr element is semantically defined as representing a paragraph-level
thematic break. Now that the footnotes are descendants of the footer
element, the hr element originally preceding the footnotes list is
no longer necessary (footnotes are no longer paragraph-level content)
and thus replaced. However, the footer element is given the class
"footnotes" to allow for styling, so the following CSS could be used to
provide a stylistically equivalent visible border separating the
footnotes from the content if so desired:

    .footnotes {
      border-top: 2px groove gray;
    }

Test snapshots are also updated to reflect the new footer elements.
This commit is contained in:
William Breathitt Gray 2024-11-06 20:41:57 +09:00 • committed by GitHub
parent 2b5c3d0c25
commit ab0ad3347c
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
7 changed files with 21 additions and 8 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
components/markdown/src/markdown.rs
View file

@ -304,7 +304,8 @@ fn convert_footnotes_to_github_style(old_events: &mut Vec<Event>) {
return;
}
old_events.push(Event::Html("<hr><ol class=\"footnotes-list\">\n".into()));
old_events
.push(Event::Html("<footer class=\"footnotes\">\n<ol class=\"footnotes-list\">\n".into()));
// Step 2: retain only footnotes which was actually referenced
footnotes.retain(|f| match f.first() {
@ -394,7 +395,7 @@ fn convert_footnotes_to_github_style(old_events: &mut Vec<Event>) {
});
old_events.extend(footnotes);
old_events.push(Event::Html("</ol>\n".into()));
old_events.push(Event::Html("</ol>\n</footer>\n".into()));
}
pub fn markdown_to_html(

4
components/markdown/src/snapshots/markdown__markdown__tests__def_before_use.snap
View file

@ -3,8 +3,10 @@ source: components/markdown/src/markdown.rs
expression: html
---
<p>There is footnote definition?<sup class="footnote-reference" id="fr-1-1"><a href="#fn-1">1</a></sup></p>
<hr><ol class="footnotes-list">
<footer class="footnotes">
<ol class="footnotes-list">
<li id="fn-1">
<p>It's before the reference. <a href="#fr-1-1">↩</a></p>
</li>
</ol>
</footer>

4
components/markdown/src/snapshots/markdown__markdown__tests__footnote_inside_footnote.snap
View file

@ -3,7 +3,8 @@ source: components/markdown/src/markdown.rs
expression: html
---
<p>This text has a footnote<sup class="footnote-reference" id="fr-1-1"><a href="#fn-1">1</a></sup></p>
<hr><ol class="footnotes-list">
<footer class="footnotes">
<ol class="footnotes-list">
<li id="fn-1">
<p>But the footnote has another footnote<sup class="footnote-reference" id="fr-2-1"><a href="#fn-2">2</a></sup>. <a href="#fr-1-1">↩</a></p>
</li>
@ -11,3 +12,4 @@ expression: html
<p>That's it. <a href="#fr-2-1">↩</a></p>
</li>
</ol>
</footer>

4
components/markdown/src/snapshots/markdown__markdown__tests__multiple_refs.snap
View file

@ -3,8 +3,10 @@ source: components/markdown/src/markdown.rs
expression: html
---
<p>This text has two<sup class="footnote-reference" id="fr-1-1"><a href="#fn-1">1</a></sup> identical footnotes<sup class="footnote-reference" id="fr-1-2"><a href="#fn-1">1</a></sup></p>
<hr><ol class="footnotes-list">
<footer class="footnotes">
<ol class="footnotes-list">
<li id="fn-1">
<p>So one is present. <a href="#fr-1-1">↩</a> <a href="#fr-1-2">↩2</a></p>
</li>
</ol>
</footer>

4
components/markdown/src/snapshots/markdown__markdown__tests__reordered_footnotes.snap
View file

@ -3,7 +3,8 @@ source: components/markdown/src/markdown.rs
expression: html
---
<p>This text has two<sup class="footnote-reference" id="fr-2-1"><a href="#fn-2">1</a></sup> footnotes<sup class="footnote-reference" id="fr-1-1"><a href="#fn-1">2</a></sup></p>
<hr><ol class="footnotes-list">
<footer class="footnotes">
<ol class="footnotes-list">
<li id="fn-2">
<p>But they are <a href="#fr-2-1">↩</a></p>
</li>
@ -11,3 +12,4 @@ expression: html
<p>not sorted. <a href="#fr-1-1">↩</a></p>
</li>
</ol>
</footer>

4
components/markdown/src/snapshots/markdown__markdown__tests__single_footnote.snap
View file

@ -3,8 +3,10 @@ source: components/markdown/src/markdown.rs
expression: html
---
<p>This text has a footnote<sup class="footnote-reference" id="fr-1-1"><a href="#fn-1">1</a></sup></p>
<hr><ol class="footnotes-list">
<footer class="footnotes">
<ol class="footnotes-list">
<li id="fn-1">
<p>But it is meaningless. <a href="#fr-1-1">↩</a></p>
</li>
</ol>
</footer>

4
components/markdown/tests/snapshots/markdown__github_style_footnotes.snap
View file

@ -8,7 +8,8 @@ expression: body
<p>This text has two<sup class="footnote-reference" id="fr-5-1"><a href="#fn-5">5</a></sup> identical footnotes<sup class="footnote-reference" id="fr-5-2"><a href="#fn-5">5</a></sup></p>
<p>This text has a footnote<sup class="footnote-reference" id="fr-7-1"><a href="#fn-7">6</a></sup></p>
<p>Footnotes can also be referenced with identifiers<sup class="footnote-reference" id="fr-first-1"><a href="#fn-first">8</a></sup>.</p>
<hr><ol class="footnotes-list">
<footer class="footnotes">
<ol class="footnotes-list">
<li id="fn-1">
<p>But it is meaningless. <a href="#fr-1-1">↩</a></p>
</li>
@ -34,3 +35,4 @@ expression: body
<p>Like this: <code>[^first]</code>. <a href="#fr-first-1">↩</a></p>
</li>
</ol>
</footer>