Qihan/MyBlog-Next
1
0
Fork 0
mirror of https://github.com/ChenQihan666/MyBlog-Next.git synced 2026-08-14 07:33:07 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat: make heading links keyboard focusable (#275)

Browse Source
This commit is contained in:
87xie
2024-07-14 17:10:56 +08:00
committed by GitHub
parent 227fcf21e7
commit 7b045a0be8
1 changed files with 8 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/layouts/PostDetails.astro
+8 -4
View File
@@ -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);
}
}