Fix to always add id to footnote heading

Previusly, since 1dc8ab3, it was possible to customize the properties
generated on the `h2` element in the footnote section.
That commit made it possible to remove the `id` attribute.
However, other steps in the process require that that `id` attribute,
with the expected value, exists.

Due to that, broken, inaccessible HTML could be generated.
This is now fixed.

Related-to: GH-64.

Author: wooorm

lib/footer.js

@@ -110,7 +110,10 @@ export function footer(h) {
       {
         type: 'element',
         tagName: h.footnoteLabelTagName,
-        properties: JSON.parse(JSON.stringify(h.footnoteLabelProperties)),
+        properties: {
+          ...JSON.parse(JSON.stringify(h.footnoteLabelProperties)),
+          id: 'footnote-label'
+        },
         children: [u('text', h.footnoteLabel)]
       },
       {type: 'text', value: '\n'},

lib/index.js

@@ -78,7 +78,7 @@
  * @property {string} [footnoteLabelTagName='h2']
  *   HTML tag to use for the footnote label.
  *   Can be changed to match your document structure and play well with your choice of css.
- * @property {Properties} [footnoteLabelProperties={id: 'footnote-label', className: ['sr-only']}]
+ * @property {Properties} [footnoteLabelProperties={className: ['sr-only']}]
  *   Properties to use on the footnote label.
  *   A 'sr-only' class is added by default to hide this from sighted users.
  *   Change it to make the label visible, or add classes for other purposes.
@@ -130,7 +130,6 @@ function factory(tree, options) {
   h.footnoteLabel = settings.footnoteLabel || 'Footnotes'
   h.footnoteLabelTagName = settings.footnoteLabelTagName || 'h2'
   h.footnoteLabelProperties = settings.footnoteLabelProperties || {
-    id: 'footnote-label',
     className: ['sr-only']
   }
   h.footnoteBackLabel = settings.footnoteBackLabel || 'Back to content'

readme.md

@@ -175,8 +175,7 @@ Change it when the markdown is not in English.
 ###### `options.footnoteLabelTagName`
 
 HTML tag to use for the footnote label (`string`, default: `h2`).
-Can be changed to match your document structure and play well with your
-choice of css.
+Can be changed to match your document structure and play well with your CSS.
 
 > 👉 **Note**: this option affects footnotes.
 > Footnotes are not specified by CommonMark.
@@ -185,12 +184,12 @@ choice of css.
 
 ###### `options.footnoteLabelProperties`
 
-Properties to use on the footnote label (`object`, default: `{id:
-'footnote-label', className: ['sr-only']}`).
+Properties to use on the footnote label (`object`, default:
+`{className: ['sr-only']}`).
+Importantly, `id: 'footnote-label'` is always added, because footnote calls use
+it with `aria-describedby` to provide an accessible label.
 A `sr-only` class is added by default to hide this from sighted users.
 Change it to make the label visible, or add classes for other purposes.
-Provide an object with no `className` or no `id` to have a footnote label with
-either no class or no id, or an empty object to have none.
 
 > 👉 **Note**: this option affects footnotes.
 > Footnotes are not specified by CommonMark.
@@ -368,7 +367,7 @@ console.log(html)
 
 ```html
 <p>Bonjour<sup><a href="#user-content-fn-1" id="user-content-fnref-1" data-footnote-ref aria-describedby="footnote-label">1</a></sup></p>
-<section data-footnotes class="footnotes"><h2 id="footnote-label" class="sr-only">Footnotes</h2>
+<section data-footnotes class="footnotes"><h2 class="sr-only" id="footnote-label">Footnotes</h2>
 <ol>
 <li id="user-content-fn-1">
 <p>Monde! <a href="#user-content-fnref-1" data-footnote-backref class="data-footnote-backref" aria-label="Back to content">↩</a></p>
@@ -402,8 +401,8 @@ footnotes so that screen reader users can properly pronounce the page:
 ```diff
 @@ -1,8 +1,8 @@
  <p>Bonjour<sup><a href="#user-content-fn-1" id="user-content-fnref-1" data-footnote-ref aria-describedby="footnote-label">1</a></sup></p>
--<section data-footnotes class="footnotes"><h2 id="footnote-label" class="sr-only">Footnotes</h2>
-+<section data-footnotes class="footnotes"><h2 id="footnote-label" class="sr-only">Notes de bas de page</h2>
+-<section data-footnotes class="footnotes"><h2 class="sr-only" id="footnote-label">Footnotes</h2>
++<section data-footnotes class="footnotes"><h2 class="sr-only" id="footnote-label">Notes de bas de page</h2>
  <ol>
  <li id="user-content-fn-1">
 -<p>Monde! <a href="#user-content-fnref-1" data-footnote-backref class="data-footnote-backref" aria-label="Back to content">↩</a></p>

test/footnote.js

@@ -362,7 +362,7 @@ test('Footnote', (t) => {
 </tr>
 </tbody>
 </table>
-<section data-footnotes class="footnotes"><h2 id="footnote-label" class="sr-only">Footnotes</h2>
+<section data-footnotes class="footnotes"><h2 class="sr-only" id="footnote-label">Footnotes</h2>
 <ol>
 <li id="user-content-fn-1">
 <p>a <a href="#user-content-fnref-1" data-footnote-backref class="data-footnote-backref" aria-label="Back to content">↩</a></p>
@@ -400,7 +400,7 @@ test('Footnote', (t) => {
 </tr>
 </thead>
 </table>
-<section data-footnotes class="footnotes"><h2 id="footnote-label" class="sr-only">Footnotes</h2>
+<section data-footnotes class="footnotes"><h2 class="sr-only" id="footnote-label">Footnotes</h2>
 <ol>
 <li id="user-content-fn-1">
 <p>a <a href="#user-content-fnref-1" data-footnote-backref class="data-footnote-backref" aria-label="Back to content">↩</a></p>
@@ -424,7 +424,7 @@ test('Footnote', (t) => {
       )
     ),
     `<p>Call<sup><a href="#user-content-fn-1" id="user-content-fnref-1" data-footnote-ref aria-describedby="footnote-label">1</a></sup><sup><a href="#user-content-fn-1" id="user-content-fnref-1-2" data-footnote-ref aria-describedby="footnote-label">1</a></sup></p>
-<section data-footnotes class="footnotes"><h2 id="footnote-label" class="sr-only">Footnotes</h2>
+<section data-footnotes class="footnotes"><h2 class="sr-only" id="footnote-label">Footnotes</h2>
 <ol>
 <li id="user-content-fn-1">
 <p>Recursion<sup><a href="#user-content-fn-1" id="user-content-fnref-1-3" data-footnote-ref aria-describedby="footnote-label">1</a></sup><sup><a href="#user-content-fn-1" id="user-content-fnref-1-4" data-footnote-ref aria-describedby="footnote-label">1</a></sup> <a href="#user-content-fnref-1" data-footnote-backref class="data-footnote-backref" aria-label="Back to content">↩</a> <a href="#user-content-fnref-1-2" data-footnote-backref class="data-footnote-backref" aria-label="Back to content">↩<sup>2</sup></a> <a href="#user-content-fnref-1-3" data-footnote-backref class="data-footnote-backref" aria-label="Back to content">↩<sup>3</sup></a> <a href="#user-content-fnref-1-4" data-footnote-backref class="data-footnote-backref" aria-label="Back to content">↩<sup>4</sup></a></p>
@@ -445,7 +445,7 @@ test('Footnote', (t) => {
         {footnoteLabel: 'Voetnoten', footnoteBackLabel: 'Terug naar de inhoud'}
       )
     ),
-    '<p><sup><a href="#user-content-fn-1" id="user-content-fnref-1" data-footnote-ref aria-describedby="footnote-label">1</a></sup></p>\n<section data-footnotes class="footnotes"><h2 id="footnote-label" class="sr-only">Voetnoten</h2>\n<ol>\n<li id="user-content-fn-1">\n<p>a <a href="#user-content-fnref-1" data-footnote-backref class="data-footnote-backref" aria-label="Terug naar de inhoud">↩</a></p>\n</li>\n</ol>\n</section>',
+    '<p><sup><a href="#user-content-fn-1" id="user-content-fnref-1" data-footnote-ref aria-describedby="footnote-label">1</a></sup></p>\n<section data-footnotes class="footnotes"><h2 class="sr-only" id="footnote-label">Voetnoten</h2>\n<ol>\n<li id="user-content-fn-1">\n<p>a <a href="#user-content-fnref-1" data-footnote-backref class="data-footnote-backref" aria-label="Terug naar de inhoud">↩</a></p>\n</li>\n</ol>\n</section>',
     'should support `footnoteLabel`, `footnoteBackLabel`'
   )
 
@@ -460,7 +460,7 @@ test('Footnote', (t) => {
         {clobberPrefix: ''}
       )
     ),
-    '<p><sup><a href="#fn-1" id="fnref-1" data-footnote-ref aria-describedby="footnote-label">1</a></sup></p>\n<section data-footnotes class="footnotes"><h2 id="footnote-label" class="sr-only">Footnotes</h2>\n<ol>\n<li id="fn-1">\n<p>a <a href="#fnref-1" data-footnote-backref class="data-footnote-backref" aria-label="Back to content">↩</a></p>\n</li>\n</ol>\n</section>',
+    '<p><sup><a href="#fn-1" id="fnref-1" data-footnote-ref aria-describedby="footnote-label">1</a></sup></p>\n<section data-footnotes class="footnotes"><h2 class="sr-only" id="footnote-label">Footnotes</h2>\n<ol>\n<li id="fn-1">\n<p>a <a href="#fnref-1" data-footnote-backref class="data-footnote-backref" aria-label="Back to content">↩</a></p>\n</li>\n</ol>\n</section>',
     'should support an empty `clobberPrefix`'
   )
 
@@ -475,7 +475,7 @@ test('Footnote', (t) => {
         {footnoteLabelTagName: 'h1'}
       )
     ),
-    /<h1 id="footnote-label" class="sr-only">Footnotes<\/h1>/,
+    /<h1 class="sr-only" id="footnote-label">Footnotes<\/h1>/,
     'should support a `footnoteLabelTagName`'
   )
 
@@ -490,7 +490,7 @@ test('Footnote', (t) => {
         {footnoteLabelProperties: {}}
       )
     ),
-    /<h2>Footnotes<\/h2>/,
+    /<h2 id="footnote-label">Footnotes<\/h2>/,
     'should support a `footnoteLabelProperties`'
   )