From 7b045a0be8895e9440224cc222d47be91ca1172c Mon Sep 17 00:00:00 2001
From: 87xie <oscar87xie@gmail.com>
Date: Sun, 14 Jul 2024 17:10:56 +0800
Subject: [PATCH] feat: make heading links keyboard focusable (#275)

---
 src/layouts/PostDetails.astro | 12 ++++++++----
 1 file changed, 8 insertions(+), 4 deletions(-)

diff --git a/src/layouts/PostDetails.astro b/src/layouts/PostDetails.astro
index aeb5d30..670e80f 100644
--- a/src/layouts/PostDetails.astro
+++ b/src/layouts/PostDetails.astro
@@ -157,11 +157,15 @@ const layoutProps = {
     let headings = Array.from(document.querySelectorAll("h2, h3, h4, h5, h6"));
     for (let heading of headings) {
       heading.classList.add("group");
-      let link = document.createElement("a");
-      link.innerText = "#";
-      link.className = "heading-link hidden group-hover:inline-block ml-2";
+      const link = document.createElement("a");
+      link.className =
+        "heading-link ml-2 opacity-0 group-hover:opacity-100 focus:opacity-100";
       link.href = "#" + heading.id;
-      link.ariaHidden = "true";
+
+      const span = document.createElement("span");
+      span.ariaHidden = "true";
+      span.innerText = "#";
+      link.appendChild(span);
       heading.appendChild(link);
     }
   }