From e54a91d5c716376a5fe7c73ee0340ed9585a5630 Mon Sep 17 00:00:00 2001
From: Helen Chong <119173961+helenclx@users.noreply.github.com>
Date: Thu, 13 Jun 2024 19:19:40 +0800
Subject: [PATCH] Use footer element for footnotes

---
 eleventy.config.md.js | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/eleventy.config.md.js b/eleventy.config.md.js
index 95f35995..d362b01a 100644
--- a/eleventy.config.md.js
+++ b/eleventy.config.md.js
@@ -77,7 +77,7 @@ module.exports = function (eleventyConfig) {
 
     // Configure markdown-it-footnote
     markdownLibrary.renderer.rules.footnote_block_open = () => (
-        '<section class="footnotes">\n' +
+        '<footer class="footnotes">\n' +
         `<div class="heading-wrapper h2">
             <h2 id="footnotes" class="footnotes__title">Footnotes</h2>
             <a class="heading-anchor" href="#footnotes" aria-labelledby="footnotes"><span hidden="">#</span></a>
@@ -96,6 +96,7 @@ module.exports = function (eleventyConfig) {
 
     const renderRules = {
         footnote_caption: ['[', '[<span class="visually-hidden">Footnote #</span>'],
+        footnote_block_close: ['section', 'footer'],
     };
     Object.keys(renderRules).map(rule => {
         let defaultRender = markdownLibrary.renderer.rules[rule];