Improve accessibility by nesting bottom footnotes inside footer eleme…

…nt (#2688)

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.

components/markdown/src/markdown.rs

@@ -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(

components/markdown/src/snapshots/markdown__markdown__tests__def_before_use.snap

@@ -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>

components/markdown/src/snapshots/markdown__markdown__tests__footnote_inside_footnote.snap

@@ -3,11 +3,13 @@ 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>
 <li id="fn-2">
 <p>That's it. <a href="#fr-2-1">↩</a></p>
 </li>
 </ol>
+</footer>

components/markdown/src/snapshots/markdown__markdown__tests__multiple_refs.snap

@@ -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>

components/markdown/src/snapshots/markdown__markdown__tests__reordered_footnotes.snap

@@ -3,11 +3,13 @@ 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>
 <li id="fn-1">
 <p>not sorted. <a href="#fr-1-1">↩</a></p>
 </li>
 </ol>
+</footer>

components/markdown/src/snapshots/markdown__markdown__tests__single_footnote.snap

@@ -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>

components/markdown/tests/snapshots/markdown__github_style_footnotes.snap

@@ -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>