From feb54bf5629382b1b671413a2f3924bed84237ad Mon Sep 17 00:00:00 2001
From: Helen Chong <119173961+helenclx@users.noreply.github.com>
Date: Thu, 13 Jun 2024 19:04:03 +0800
Subject: [PATCH] Use descriptive aria label for back to footnote reference

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

diff --git a/eleventy.config.md.js b/eleventy.config.md.js
index 95393b56..283b4b6c 100644
--- a/eleventy.config.md.js
+++ b/eleventy.config.md.js
@@ -85,9 +85,17 @@ module.exports = function (eleventyConfig) {
         '<ol class="footnotes__list">\n'
     );
 
+    markdownLibrary.renderer.rules.footnote_anchor = (tokens, idx, options, env, slf) => {
+        let id = slf.rules.footnote_anchor_name(tokens, idx, options, env, slf);
+
+        if (tokens[idx].meta.subId > 0) id += `:${tokens[idx].meta.subId}`;
+
+        /* ↩ with escape code to prevent display as Apple Emoji on iOS */
+        return ` <a aria-label="Back to reference #${id}" href="#fnref${id}" class="footnote-backref">\u21a9\uFE0E</a>`;
+    };
+
     const renderRules = {
         footnote_caption: ['[', '[<span class="visually-hidden">Footnote #</span>'],
-        footnote_anchor: ['<a', '<a aria-label="Back to content"'],
     };
     Object.keys(renderRules).map(rule => {
         let defaultRender = markdownLibrary.renderer.rules[rule];