Add labelTagName option

Ported from `markdown-rs`, `mdast-util-to-hast`.

dev/lib/html.js

@@ -35,6 +35,16 @@
  *
  *   This label is typically hidden visually (assuming a `sr-only` CSS class
  *   is defined that does that), and thus affects screen readers only.
+ * @property {string} [labelTagName='h2']
+ *   HTML tag name to use for the footnote label element.
+ *
+ *   Change it to match your document structure.
+ *
+ *   This label is typically hidden visually (assuming a `sr-only` CSS class
+ *   is defined that does that) and so affects screen readers only.
+ *   If you do have such a class, but want to show this section to everyone,
+ *   pass different attributes with the `gfm_footnote_label_attributes`
+ *   option.
  * @property {string} [backLabel='Back to content']
  *   Textual label to describe the backreference back to footnote calls.
  *
@@ -68,6 +78,7 @@ const emptyOptions = {}
 export function gfmFootnoteHtml(options) {
   const config = options || emptyOptions
   const label = config.label || 'Footnotes'
+  const labelTagName = config.labelTagName || 'h2'
   const backLabel = config.backLabel || 'Back to content'
   const clobberPrefix =
     config.clobberPrefix === undefined || config.clobberPrefix === null
@@ -187,10 +198,12 @@ export function gfmFootnoteHtml(options) {
         if (calls.length > 0) {
           this.lineEndingIfNeeded()
           this.tag(
-            '<section data-footnotes="" class="footnotes"><h2 id="footnote-label" class="sr-only">'
+            '<section data-footnotes="" class="footnotes"><' +
+              labelTagName +
+              ' id="footnote-label" class="sr-only">'
           )
           this.raw(this.encode(label))
-          this.tag('</h2>')
+          this.tag('</' + labelTagName + '>')
           this.lineEndingIfNeeded()
           this.tag('<ol>')
         }

readme.md

@@ -217,6 +217,16 @@ Change it when the markdown is not in English.
 This label is typically hidden visually (assuming a `sr-only` CSS class
 is defined that does that) and thus affects screen readers only.
 
+###### `labelTagName`
+
+HTML tag name to use for the footnote label element (`string`, default:
+`'h2'`).
+
+Change it to match your document structure.
+
+This label is typically hidden visually (assuming a `sr-only` CSS class
+is defined that does that) and so affects screen readers only.
+
 ###### `backLabel`
 
 Textual label to describe the backreference back to footnote calls (`string`,

test/index.js

@@ -52,6 +52,15 @@ test('markdown -> html (micromark)', () => {
     'should support `options.label`, `options.backLabel`'
   )
 
+  assert.deepEqual(
+    micromark('a[^b]\n\n[^b]: c', {
+      extensions: [gfmFootnote()],
+      htmlExtensions: [gfmFootnoteHtml({labelTagName: 'h1'})]
+    }),
+    '<p>a<sup><a href="#user-content-fn-b" id="user-content-fnref-b" data-footnote-ref="" aria-describedby="footnote-label">1</a></sup></p>\n<section data-footnotes="" class="footnotes"><h1 id="footnote-label" class="sr-only">Footnotes</h1>\n<ol>\n<li id="user-content-fn-b">\n<p>c <a href="#user-content-fnref-b" data-footnote-backref="" class="data-footnote-backref" aria-label="Back to content">↩</a></p>\n</li>\n</ol>\n</section>',
+    'should support `options.label`, `options.backLabel`'
+  )
+
   assert.deepEqual(
     micromark('a[^1]\n\n[^1]: b', {
       extensions: [gfmFootnote()],