feat: Output index in a data attribute

Author: smockle

src/html.c

@@ -68,7 +68,9 @@ 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\" data-footnote-backref aria-label=\"Back to reference ");
+  cmark_strbuf_puts(html, "\" class=\"footnote-backref\" data-footnote-backref data-footnote-backref-idx=\"");
+  cmark_strbuf_puts(html, m);
+  cmark_strbuf_puts(html, "\" aria-label=\"Back to reference ");
   cmark_strbuf_puts(html, m);
   cmark_strbuf_puts(html, "\">↩</a>");
 
@@ -82,7 +84,11 @@ 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\" data-footnote-backref aria-label=\"Back to reference ");
+      cmark_strbuf_puts(html, "\" class=\"footnote-backref\" data-footnote-backref data-footnote-backref-idx=\"");
+      cmark_strbuf_puts(html, m);
+      cmark_strbuf_puts(html, "-");
+      cmark_strbuf_puts(html, n);
+      cmark_strbuf_puts(html, "\" aria-label=\"Back to reference ");
       cmark_strbuf_puts(html, m);
       cmark_strbuf_puts(html, "-");
       cmark_strbuf_puts(html, n);

test/extensions.txt

@@ -737,23 +737,23 @@ Hi!
 <section class="footnotes" data-footnotes>
 <ol>
 <li id="fn-1">
-<p>Some <em>bolded</em> footnote definition. <a href="#fnref-1" class="footnote-backref" data-footnote-backref aria-label="Back to reference 1">↩</a></p>
+<p>Some <em>bolded</em> footnote definition. <a href="#fnref-1" class="footnote-backref" data-footnote-backref data-footnote-backref-idx="1" aria-label="Back to reference 1">↩</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" data-footnote-backref aria-label="Back to reference 2">↩</a></p>
+<p>or, naturally, simple paragraphs. <a href="#fnref-footnote" class="footnote-backref" data-footnote-backref data-footnote-backref-idx="2" aria-label="Back to reference 2">↩</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" data-footnote-backref aria-label="Back to reference 3">↩</a></p>
+<p>no code block here (spaces are stripped away) <a href="#fnref-other-note" class="footnote-backref" data-footnote-backref data-footnote-backref-idx="3" aria-label="Back to reference 3">↩</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" data-footnote-backref aria-label="Back to reference 4">↩</a>
+<a href="#fnref-codeblock-note" class="footnote-backref" data-footnote-backref data-footnote-backref-idx="4" aria-label="Back to reference 4">↩</a>
 </li>
 </ol>
 </section>
@@ -773,7 +773,7 @@ This footnote is referenced[^a-footnote] multiple times, in lots of different pl
 <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" data-footnote-backref aria-label="Back to reference 1">↩</a> <a href="#fnref-a-footnote-2" class="footnote-backref" data-footnote-backref aria-label="Back to reference 1-2">↩<sup class="footnote-ref">2</sup></a> <a href="#fnref-a-footnote-3" class="footnote-backref" data-footnote-backref aria-label="Back to reference 1-3">↩<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 data-footnote-backref-idx="1" aria-label="Back to reference 1">↩</a> <a href="#fnref-a-footnote-2" class="footnote-backref" data-footnote-backref data-footnote-backref-idx="1-2" aria-label="Back to reference 1-2">↩<sup class="footnote-ref">2</sup></a> <a href="#fnref-a-footnote-3" class="footnote-backref" data-footnote-backref data-footnote-backref-idx="1-3" aria-label="Back to reference 1-3">↩<sup class="footnote-ref">3</sup></a></p>
 </li>
 </ol>
 </section>
@@ -790,7 +790,7 @@ Hello[^"><script>alert(1)</script>]
 <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" data-footnote-backref aria-label="Back to reference 1">↩</a></p>
+<p>pwned <a href="#fnref-%22%3E%3Cscript%3Ealert(1)%3C/script%3E" class="footnote-backref" data-footnote-backref data-footnote-backref-idx="1" aria-label="Back to reference 1">↩</a></p>
 </li>
 </ol>
 </section>

test/regression.txt

@@ -194,7 +194,7 @@ A footnote in a paragraph[^1]
 <section class="footnotes" data-footnotes>
 <ol>
 <li id="fn-1">
-<p>a footnote <a href="#fnref-1" class="footnote-backref" data-footnote-backref aria-label="Back to reference 1">↩</a> <a href="#fnref-1-2" class="footnote-backref" data-footnote-backref aria-label="Back to reference 1-2">↩<sup class="footnote-ref">2</sup></a></p>
+<p>a footnote <a href="#fnref-1" class="footnote-backref" data-footnote-backref data-footnote-backref-idx="1" aria-label="Back to reference 1">↩</a> <a href="#fnref-1-2" class="footnote-backref" data-footnote-backref data-footnote-backref-idx="1-2" aria-label="Back to reference 1-2">↩<sup class="footnote-ref">2</sup></a></p>
 </li>
 </ol>
 </section>
@@ -284,10 +284,10 @@ This is some text. It has a citation.[^citation]
 <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" data-footnote-ref>2</a></sup> <a href="#fnref-citation" class="footnote-backref" data-footnote-backref aria-label="Back to reference 1">↩</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 data-footnote-backref-idx="1" aria-label="Back to reference 1">↩</a></p>
 </li>
 <li id="fn-another-citation">
-<p>My second citation. <a href="#fnref-another-citation" class="footnote-backref" data-footnote-backref aria-label="Back to reference 2">↩</a></p>
+<p>My second citation. <a href="#fnref-another-citation" class="footnote-backref" data-footnote-backref data-footnote-backref-idx="2" aria-label="Back to reference 2">↩</a></p>
 </li>
 </ol>
 </section>
@@ -306,10 +306,10 @@ This is some text. It has two footnotes references, side-by-side without any spa
 <section class="footnotes" data-footnotes>
 <ol>
 <li id="fn-footnote1">
-<p>Hello. <a href="#fnref-footnote1" class="footnote-backref" data-footnote-backref aria-label="Back to reference 1">↩</a></p>
+<p>Hello. <a href="#fnref-footnote1" class="footnote-backref" data-footnote-backref data-footnote-backref-idx="1" aria-label="Back to reference 1">↩</a></p>
 </li>
 <li id="fn-footnote2">
-<p>Goodbye. <a href="#fnref-footnote2" class="footnote-backref" data-footnote-backref aria-label="Back to reference 2">↩</a></p>
+<p>Goodbye. <a href="#fnref-footnote2" class="footnote-backref" data-footnote-backref data-footnote-backref-idx="2" aria-label="Back to reference 2">↩</a></p>
 </li>
 </ol>
 </section>
@@ -331,10 +331,10 @@ It has another footnote that contains many different characters (the autolinker
 <section class="footnotes" data-footnotes>
 <ol>
 <li id="fn-widely-cited">
-<p>this renders properly. <a href="#fnref-widely-cited" class="footnote-backref" data-footnote-backref aria-label="Back to reference 1">↩</a></p>
+<p>this renders properly. <a href="#fnref-widely-cited" class="footnote-backref" data-footnote-backref data-footnote-backref-idx="1" aria-label="Back to reference 1">↩</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" data-footnote-backref aria-label="Back to reference 2">↩</a></p>
+<p>so does this. <a href="#fnref-sphinx-of-black-quartz_judge-my-vow-0123456789" class="footnote-backref" data-footnote-backref data-footnote-backref-idx="2" aria-label="Back to reference 2">↩</a></p>
 </li>
 </ol>
 </section>