From 3355fcc1df1c272cc16ce71efcaace5a0fb899aa Mon Sep 17 00:00:00 2001
From: Alija Sabic <sabic.alija@gmail.com>
Date: Tue, 14 Mar 2023 01:53:22 +0100
Subject: [PATCH] Provide accessible markdown-it-anchor configuration using
 ZeroWidthSpace (HTML Entity) and custom renderAttrs

---
 src/node/markdown/markdown.ts | 17 ++++++++++++++++-
 1 file changed, 16 insertions(+), 1 deletion(-)

diff --git a/src/node/markdown/markdown.ts b/src/node/markdown/markdown.ts
index 54b8edc1..37584140 100644
--- a/src/node/markdown/markdown.ts
+++ b/src/node/markdown/markdown.ts
@@ -99,7 +99,22 @@ export const createMarkdownRenderer = async (
   // mdit-vue plugins
   md.use(anchorPlugin, {
     slugify,
-    permalink: anchorPlugin.permalink.ariaHidden({}),
+    permalink: anchorPlugin.permalink.linkInsideHeader({
+      symbol: '&ZeroWidthSpace;',
+      renderAttrs: (slug, state) => {
+        // Find `heading_open` with the id identical to slug
+        const idx = state.tokens.findIndex((token) => {
+          const attrs = token.attrs
+          const id = attrs?.find((attr) => attr[0] === 'id')
+          return id && slug === id[1]
+        })
+        // Get the actual heading content
+        const title = state.tokens[idx + 1].content
+        return {
+          'aria-label': `Permalink to "${title}"`
+        }
+      }
+    }),
     ...options.anchor
   } as anchorPlugin.AnchorOptions).use(frontmatterPlugin, {
     ...options.frontmatter