Change footnotes to match how GitHub renders them

Author: wooorm

package.json

@@ -40,7 +40,7 @@
     "@types/mdast": "^3.0.0",
     "hast-util-sanitize": "^4.0.0",
     "hast-util-to-html": "^8.0.0",
-    "mdast-util-to-hast": "^11.0.0",
+    "mdast-util-to-hast": "^12.0.0",
     "unified": "^10.0.0"
   },
   "devDependencies": {

test/integrations/footnotes/output.html

@@ -1,25 +1,24 @@
-<p>Here is a footnote reference,<a href="#fn1" class="footnote-ref" id="fnref1" role="doc-noteref"><sup>1</sup></a>
-another,<a href="#fn2" class="footnote-ref" id="fnref2" role="doc-noteref"><sup>2</sup></a>,
+<p>Here is a footnote reference,<sup><a href="#user-content-fn-1" id="user-content-fnref-1" data-footnote-ref aria-describedby="footnote-label">1</a></sup>
+another,<sup><a href="#user-content-fn-longnote" id="user-content-fnref-longnote" data-footnote-ref aria-describedby="footnote-label">2</a></sup>,
 and optionally there are inline
 notes.^[you can type them inline, which may be easier, since you don’t
 have to pick an identifier and move down to type the note.]</p>
 <p>This paragraph won’t be part of the note, because it
 isn’t indented.</p>
-<section class="footnotes" role="doc-endnotes">
-<hr>
+<section data-footnotes class="footnotes"><h2 id="footnote-label" class="sr-only">Footnotes</h2>
 <ol>
-<li id="fn1" role="doc-endnote">
-<p>Here is the footnote.<a href="#fnref1" class="footnote-back" role="doc-backlink">↩</a></p>
+<li id="user-content-fn-1">
+<p>Here is the footnote. <a href="#user-content-fnref-1" data-footnote-backref class="data-footnote-backref" aria-label="Back to content">↩</a></p>
 </li>
-<li id="fn2" role="doc-endnote">
+<li id="user-content-fn-longnote">
 <p>Here’s one with multiple blocks.</p>
 <p>Subsequent paragraphs are indented to show that they
 belong to the previous footnote.</p>
 <pre><code>{ some.code }
 </code></pre>
 <p>The whole paragraph can be indented, or just the first
 line.  In this way, multi-paragraph footnotes work like
-multi-paragraph list items.<a href="#fnref2" class="footnote-back" role="doc-backlink">↩</a></p>
+multi-paragraph list items. <a href="#user-content-fnref-longnote" data-footnote-backref class="data-footnote-backref" aria-label="Back to content">↩</a></p>
 </li>
 </ol>
 </section>