Merge pull request commonmark#234 from github/add-attributes-to-footnotes

Add data attributes for footnotes

Author: phillmv

src/html.c

@@ -66,7 +66,7 @@ static bool S_put_footnote_backref(cmark_html_renderer *renderer, cmark_strbuf *
 
   cmark_strbuf_puts(html, "<a href=\"#fnref-");
   houdini_escape_href(html, node->as.literal.data, node->as.literal.len);
-  cmark_strbuf_puts(html, "\" class=\"footnote-backref\">↩</a>");
+  cmark_strbuf_puts(html, "\" class=\"footnote-backref\" data-footnote-backref aria-label=\"Back to content\">↩</a>");
 
   if (node->footnote.def_count > 1)
   {
@@ -78,7 +78,7 @@ static bool S_put_footnote_backref(cmark_html_renderer *renderer, cmark_strbuf *
       houdini_escape_href(html, node->as.literal.data, node->as.literal.len);
       cmark_strbuf_puts(html, "-");
       cmark_strbuf_puts(html, n);
-      cmark_strbuf_puts(html, "\" class=\"footnote-backref\">↩<sup class=\"footnote-ref\">");
+      cmark_strbuf_puts(html, "\" class=\"footnote-backref\" data-footnote-backref aria-label=\"Back to content\">↩<sup class=\"footnote-ref\">");
       cmark_strbuf_puts(html, n);
       cmark_strbuf_puts(html, "</sup></a>");
     }
@@ -406,7 +406,7 @@ static int S_render_node(cmark_html_renderer *renderer, cmark_node *node,
   case CMARK_NODE_FOOTNOTE_DEFINITION:
     if (entering) {
       if (renderer->footnote_ix == 0) {
-        cmark_strbuf_puts(html, "<section class=\"footnotes\">\n<ol>\n");
+        cmark_strbuf_puts(html, "<section class=\"footnotes\" data-footnotes>\n<ol>\n");
       }
       ++renderer->footnote_ix;
 
@@ -435,7 +435,7 @@ static int S_render_node(cmark_html_renderer *renderer, cmark_node *node,
         cmark_strbuf_puts(html, n);
       }
 
-      cmark_strbuf_puts(html, "\">");
+      cmark_strbuf_puts(html, "\" data-footnote-ref>");
       houdini_escape_href(html, node->as.literal.data, node->as.literal.len);
       cmark_strbuf_puts(html, "</a></sup>");
     }

test/extensions.txt

@@ -672,31 +672,31 @@ Hi!
 
 [^unused]: This is unused.
 .
-<p>This is some text!<sup class="footnote-ref"><a href="#fn-1" id="fnref-1">1</a></sup>. Other text.<sup class="footnote-ref"><a href="#fn-footnote" id="fnref-footnote">2</a></sup>.</p>
-<p>Here's a thing<sup class="footnote-ref"><a href="#fn-other-note" id="fnref-other-note">3</a></sup>.</p>
-<p>And another thing<sup class="footnote-ref"><a href="#fn-codeblock-note" id="fnref-codeblock-note">4</a></sup>.</p>
+<p>This is some text!<sup class="footnote-ref"><a href="#fn-1" id="fnref-1" data-footnote-ref>1</a></sup>. Other text.<sup class="footnote-ref"><a href="#fn-footnote" id="fnref-footnote" data-footnote-ref>2</a></sup>.</p>
+<p>Here's a thing<sup class="footnote-ref"><a href="#fn-other-note" id="fnref-other-note" data-footnote-ref>3</a></sup>.</p>
+<p>And another thing<sup class="footnote-ref"><a href="#fn-codeblock-note" id="fnref-codeblock-note" data-footnote-ref>4</a></sup>.</p>
 <p>This doesn't have a referent[^nope].</p>
 <p>Hi!</p>
-<section class="footnotes">
+<section class="footnotes" data-footnotes>
 <ol>
 <li id="fn-1">
-<p>Some <em>bolded</em> footnote definition. <a href="#fnref-1" class="footnote-backref">↩</a></p>
+<p>Some <em>bolded</em> footnote definition. <a href="#fnref-1" class="footnote-backref" data-footnote-backref aria-label="Back to content">↩</a></p>
 </li>
 <li id="fn-footnote">
 <blockquote>
 <p>Blockquotes can be in a footnote.</p>
 </blockquote>
 <pre><code>as well as code blocks
 </code></pre>
-<p>or, naturally, simple paragraphs. <a href="#fnref-footnote" class="footnote-backref">↩</a></p>
+<p>or, naturally, simple paragraphs. <a href="#fnref-footnote" class="footnote-backref" data-footnote-backref aria-label="Back to content">↩</a></p>
 </li>
 <li id="fn-other-note">
-<p>no code block here (spaces are stripped away) <a href="#fnref-other-note" class="footnote-backref">↩</a></p>
+<p>no code block here (spaces are stripped away) <a href="#fnref-other-note" class="footnote-backref" data-footnote-backref aria-label="Back to content">↩</a></p>
 </li>
 <li id="fn-codeblock-note">
 <pre><code>this is now a code block (8 spaces indentation)
 </code></pre>
-<a href="#fnref-codeblock-note" class="footnote-backref">↩</a>
+<a href="#fnref-codeblock-note" class="footnote-backref" data-footnote-backref aria-label="Back to content">↩</a>
 </li>
 </ol>
 </section>
@@ -711,12 +711,12 @@ This footnote is referenced[^a-footnote] multiple times, in lots of different pl
 
 [^a-footnote]: This footnote definition should have three backrefs.
 .
-<p>This is some text. It has a footnote<sup class="footnote-ref"><a href="#fn-a-footnote" id="fnref-a-footnote">1</a></sup>.</p>
-<p>This footnote is referenced<sup class="footnote-ref"><a href="#fn-a-footnote" id="fnref-a-footnote-2">1</a></sup> multiple times, in lots of different places.<sup class="footnote-ref"><a href="#fn-a-footnote" id="fnref-a-footnote-3">1</a></sup></p>
-<section class="footnotes">
+<p>This is some text. It has a footnote<sup class="footnote-ref"><a href="#fn-a-footnote" id="fnref-a-footnote" data-footnote-ref>1</a></sup>.</p>
+<p>This footnote is referenced<sup class="footnote-ref"><a href="#fn-a-footnote" id="fnref-a-footnote-2" data-footnote-ref>1</a></sup> multiple times, in lots of different places.<sup class="footnote-ref"><a href="#fn-a-footnote" id="fnref-a-footnote-3" data-footnote-ref>1</a></sup></p>
+<section class="footnotes" data-footnotes>
 <ol>
 <li id="fn-a-footnote">
-<p>This footnote definition should have three backrefs. <a href="#fnref-a-footnote" class="footnote-backref">↩</a> <a href="#fnref-a-footnote-2" class="footnote-backref">↩<sup class="footnote-ref">2</sup></a> <a href="#fnref-a-footnote-3" class="footnote-backref">↩<sup class="footnote-ref">3</sup></a></p>
+<p>This footnote definition should have three backrefs. <a href="#fnref-a-footnote" class="footnote-backref" data-footnote-backref aria-label="Back to content">↩</a> <a href="#fnref-a-footnote-2" class="footnote-backref" data-footnote-backref aria-label="Back to content">↩<sup class="footnote-ref">2</sup></a> <a href="#fnref-a-footnote-3" class="footnote-backref" data-footnote-backref aria-label="Back to content">↩<sup class="footnote-ref">3</sup></a></p>
 </li>
 </ol>
 </section>
@@ -729,11 +729,11 @@ Hello[^"><script>alert(1)</script>]
 
 [^"><script>alert(1)</script>]: pwned
 .
-<p>Hello<sup class="footnote-ref"><a href="#fn-%22%3E%3Cscript%3Ealert(1)%3C/script%3E" id="fnref-%22%3E%3Cscript%3Ealert(1)%3C/script%3E">1</a></sup></p>
-<section class="footnotes">
+<p>Hello<sup class="footnote-ref"><a href="#fn-%22%3E%3Cscript%3Ealert(1)%3C/script%3E" id="fnref-%22%3E%3Cscript%3Ealert(1)%3C/script%3E" data-footnote-ref>1</a></sup></p>
+<section class="footnotes" data-footnotes>
 <ol>
 <li id="fn-%22%3E%3Cscript%3Ealert(1)%3C/script%3E">
-<p>pwned <a href="#fnref-%22%3E%3Cscript%3Ealert(1)%3C/script%3E" class="footnote-backref">↩</a></p>
+<p>pwned <a href="#fnref-%22%3E%3Cscript%3Ealert(1)%3C/script%3E" class="footnote-backref" data-footnote-backref aria-label="Back to content">↩</a></p>
 </li>
 </ol>
 </section>

test/regression.txt

@@ -4,7 +4,8 @@ Issue #113: EOL character weirdness on Windows
 (Important: first line ends with CR + CR + LF)
 
 ```````````````````````````````` example
-line1
+line1
+
 line2
 .
 <p>line1</p>
@@ -175,7 +176,7 @@ A footnote in a paragraph[^1]
 
 [^1]: a footnote
 .
-<p>A footnote in a paragraph<sup class="footnote-ref"><a href="#fn-1" id="fnref-1">1</a></sup></p>
+<p>A footnote in a paragraph<sup class="footnote-ref"><a href="#fn-1" id="fnref-1" data-footnote-ref>1</a></sup></p>
 <table>
 <thead>
 <tr>
@@ -185,15 +186,15 @@ A footnote in a paragraph[^1]
 </thead>
 <tbody>
 <tr>
-<td>foot <sup class="footnote-ref"><a href="#fn-1" id="fnref-1-2">1</a></sup></td>
+<td>foot <sup class="footnote-ref"><a href="#fn-1" id="fnref-1-2" data-footnote-ref>1</a></sup></td>
 <td>note</td>
 </tr>
 </tbody>
 </table>
-<section class="footnotes">
+<section class="footnotes" data-footnotes>
 <ol>
 <li id="fn-1">
-<p>a footnote <a href="#fnref-1" class="footnote-backref">↩</a> <a href="#fnref-1-2" class="footnote-backref">↩<sup class="footnote-ref">2</sup></a></p>
+<p>a footnote <a href="#fnref-1" class="footnote-backref" data-footnote-backref aria-label="Back to content">↩</a> <a href="#fnref-1-2" class="footnote-backref" data-footnote-backref aria-label="Back to content">↩<sup class="footnote-ref">2</sup></a></p>
 </li>
 </ol>
 </section>
@@ -279,14 +280,14 @@ This is some text. It has a citation.[^citation]
 
 [^citation]: This is a long winded parapgraph that also has another citation.[^another-citation]
 .
-<p>This is some text. It has a citation.<sup class="footnote-ref"><a href="#fn-citation" id="fnref-citation">1</a></sup></p>
-<section class="footnotes">
+<p>This is some text. It has a citation.<sup class="footnote-ref"><a href="#fn-citation" id="fnref-citation" data-footnote-ref>1</a></sup></p>
+<section class="footnotes" data-footnotes>
 <ol>
 <li id="fn-citation">
-<p>This is a long winded parapgraph that also has another citation.<sup class="footnote-ref"><a href="#fn-another-citation" id="fnref-another-citation">2</a></sup> <a href="#fnref-citation" class="footnote-backref">↩</a></p>
+<p>This is a long winded parapgraph that also has another citation.<sup class="footnote-ref"><a href="#fn-another-citation" id="fnref-another-citation" data-footnote-ref>2</a></sup> <a href="#fnref-citation" class="footnote-backref" data-footnote-backref aria-label="Back to content">↩</a></p>
 </li>
 <li id="fn-another-citation">
-<p>My second citation. <a href="#fnref-another-citation" class="footnote-backref">↩</a></p>
+<p>My second citation. <a href="#fnref-another-citation" class="footnote-backref" data-footnote-backref aria-label="Back to content">↩</a></p>
 </li>
 </ol>
 </section>
@@ -301,14 +302,14 @@ This is some text. It has two footnotes references, side-by-side without any spa
 
 [^footnote2]: Goodbye.
 .
-<p>This is some text. It has two footnotes references, side-by-side without any spaces,<sup class="footnote-ref"><a href="#fn-footnote1" id="fnref-footnote1">1</a></sup><sup class="footnote-ref"><a href="#fn-footnote2" id="fnref-footnote2">2</a></sup> which are definitely not link references.</p>
-<section class="footnotes">
+<p>This is some text. It has two footnotes references, side-by-side without any spaces,<sup class="footnote-ref"><a href="#fn-footnote1" id="fnref-footnote1" data-footnote-ref>1</a></sup><sup class="footnote-ref"><a href="#fn-footnote2" id="fnref-footnote2" data-footnote-ref>2</a></sup> which are definitely not link references.</p>
+<section class="footnotes" data-footnotes>
 <ol>
 <li id="fn-footnote1">
-<p>Hello. <a href="#fnref-footnote1" class="footnote-backref">↩</a></p>
+<p>Hello. <a href="#fnref-footnote1" class="footnote-backref" data-footnote-backref aria-label="Back to content">↩</a></p>
 </li>
 <li id="fn-footnote2">
-<p>Goodbye. <a href="#fnref-footnote2" class="footnote-backref">↩</a></p>
+<p>Goodbye. <a href="#fnref-footnote2" class="footnote-backref" data-footnote-backref aria-label="Back to content">↩</a></p>
 </li>
 </ol>
 </section>
@@ -325,15 +326,15 @@ It has another footnote that contains many different characters (the autolinker
 
 [^widely-cited]: this renders properly.
 .
-<p>This is some text. Sometimes the autolinker splits up text into multiple nodes, hoping it will find a hyperlink, so this text has a footnote whose reference label begins with a <code>w</code>.<sup class="footnote-ref"><a href="#fn-widely-cited" id="fnref-widely-cited">1</a></sup></p>
-<p>It has another footnote that contains many different characters (the autolinker was also breaking on <code>_</code>).<sup class="footnote-ref"><a href="#fn-sphinx-of-black-quartz_judge-my-vow-0123456789" id="fnref-sphinx-of-black-quartz_judge-my-vow-0123456789">2</a></sup></p>
-<section class="footnotes">
+<p>This is some text. Sometimes the autolinker splits up text into multiple nodes, hoping it will find a hyperlink, so this text has a footnote whose reference label begins with a <code>w</code>.<sup class="footnote-ref"><a href="#fn-widely-cited" id="fnref-widely-cited" data-footnote-ref>1</a></sup></p>
+<p>It has another footnote that contains many different characters (the autolinker was also breaking on <code>_</code>).<sup class="footnote-ref"><a href="#fn-sphinx-of-black-quartz_judge-my-vow-0123456789" id="fnref-sphinx-of-black-quartz_judge-my-vow-0123456789" data-footnote-ref>2</a></sup></p>
+<section class="footnotes" data-footnotes>
 <ol>
 <li id="fn-widely-cited">
-<p>this renders properly. <a href="#fnref-widely-cited" class="footnote-backref">↩</a></p>
+<p>this renders properly. <a href="#fnref-widely-cited" class="footnote-backref" data-footnote-backref aria-label="Back to content">↩</a></p>
 </li>
 <li id="fn-sphinx-of-black-quartz_judge-my-vow-0123456789">
-<p>so does this. <a href="#fnref-sphinx-of-black-quartz_judge-my-vow-0123456789" class="footnote-backref">↩</a></p>
+<p>so does this. <a href="#fnref-sphinx-of-black-quartz_judge-my-vow-0123456789" class="footnote-backref" data-footnote-backref aria-label="Back to content">↩</a></p>
 </li>
 </ol>
 </section>