Merge pull request #11 from merkle-open/fix/accessibility

fix: improve accessibility for toc block anchor links
merkle-open · Mar 28, 2024 · e326ad6 · e326ad6
2 parents 624975a + 19ff85b
commit e326ad6
Show file tree

Hide file tree

Showing 2 changed files with 7 additions and 9 deletions.
diff --git a/blocks/toc/toc.css b/blocks/toc/toc.css
@@ -5,7 +5,7 @@
 .toc > div {
     display: flex;
     flex-direction: column;
-    font-size: var(--body-font-size-xs);
+    font-size: var(--body-font-size-s);
     color: var(--toc-color);
 }
 
@@ -20,7 +20,7 @@
 }
 
 .toc .toc-title h2 {
-    font-size: var(--body-font-size-s);
+    font-size: var(--body-font-size-m);
     margin-bottom: 30px;
 }
 
@@ -30,15 +30,12 @@
     padding-bottom: 1em;
 }
 
-.toc .toc-item p strong a.hash-link {
-    background-color:transparent;
-    color: var(--highlight-color);
-}
-
-.toc .toc-item p strong a.hash-link:hover {
+.toc .toc-item p a.hash-link {
     background-color:transparent;
-    color: var(--highlight-color);
+    color: var(--link-color);
     text-decoration: underline;
+    text-decoration-color: var(--highlight-color);
+    text-decoration-thickness: 2px;
 }
 
 .toc .toc-item::before {

diff --git a/blocks/toc/toc.js b/blocks/toc/toc.js
@@ -6,6 +6,7 @@ export default function decorate(block) {
     col.querySelectorAll('a').forEach((a) => {
       if (a.getAttribute('href').charAt(0) === '#') {
         a.classList.add('hash-link');
+        a.classList.remove('button');
       }
     });
   });