site a11y: make permalinks accessible

site/src/routes/blog/_posts.js

@@ -1,6 +1,6 @@
 import fs from 'fs';
 import path from 'path';
-import { extract_frontmatter, link_renderer } from '@sveltejs/site-kit/utils/markdown.js';
+import { extract_frontmatter, link_renderer, permalink } from '@sveltejs/site-kit/utils/markdown.js';
 import marked from 'marked';
 import { makeSlugProcessor } from '../../utils/slug';
 import { highlight } from '../../utils/highlight';
@@ -39,8 +39,8 @@ export default function get_posts() {
 				return `
 					<h${level}>
 						<span id="${fragment}" class="offset-anchor"></span>
-						<a href="blog/${slug}#${fragment}" class="anchor" aria-hidden="true"></a>
 						${text}
+						${permalink(`blog/${slug}#${fragment}`)}
 					</h${level}>`;
 			};
 

site/src/routes/docs/_sections.js

@@ -1,7 +1,7 @@
 import fs from 'fs';
 import path from 'path';
 import { SLUG_PRESERVE_UNICODE, SLUG_SEPARATOR } from '../../../config';
-import { extract_frontmatter, extract_metadata, link_renderer } from '@sveltejs/site-kit/utils/markdown.js';
+import { extract_frontmatter, extract_metadata, link_renderer, permalink } from '@sveltejs/site-kit/utils/markdown.js';
 import { make_session_slug_processor } from '@sveltejs/site-kit/utils/slug';
 import { highlight } from '../../utils/highlight';
 import marked from 'marked';
@@ -108,8 +108,8 @@ export default function() {
 				return `
 					<h${level}>
 						<span id="${slug}" class="offset-anchor" ${level > 4 ? 'data-scrollignore' : ''}></span>
-						<a href="docs#${slug}" class="anchor" aria-hidden="true"></a>
 						${text}
+						${permalink(`docs#${slug}`)}
 					</h${level}>`;
 			};
 

site/src/routes/faq/_faqs.js

@@ -1,6 +1,6 @@
 import fs from 'fs';
 import path from 'path';
-import { extract_frontmatter, link_renderer } from '@sveltejs/site-kit/utils/markdown.js';
+import { extract_frontmatter, link_renderer, permalink } from '@sveltejs/site-kit/utils/markdown.js';
 import marked from 'marked';
 import { makeSlugProcessor } from '../../utils/slug';
 import { highlight } from '../../utils/highlight';
@@ -35,8 +35,8 @@ export default function get_faqs() {
 				return `
 					<h${level}>
 						<span id="${fragment}" class="offset-anchor"></span>
-						<a href="faq#${fragment}" class="anchor" aria-hidden="true"></a>
 						${text}
+						${permalink(`faq#${fragment}`)}
 					</h${level}>`;
 			};
 

site/src/routes/faq/index.svelte

@@ -6,6 +6,8 @@
 </script>
 
 <script>
+	import { Permalink } from '@sveltejs/site-kit';
+
 	const description = "Frequently Asked Questions about Svelte"
 
 	export let faqs;
@@ -25,9 +27,9 @@
 
 		<article class='faq'>
 			<h2>
-			<span id={faq.fragment} class="offset-anchor"></span>
-			<a class="anchor" rel='prefetch' href='faq#{faq.fragment}' title='{faq.question}'>&nbsp;</a>
-			{faq.metadata.question}
+				<span id={faq.fragment} class="offset-anchor"></span>
+				{faq.metadata.question}
+				<Permalink href='faq#{faq.fragment}' />
 			</h2>
 			<p>{@html faq.answer}</p>
 		</article>

site/static/global.css

@@ -22,6 +22,7 @@
 	border: none !important; /* TODO get rid of linkify */
 }
 
+.anchor:focus,
 h2:hover .anchor,
 h3:hover .anchor,
 h4:hover .anchor,
@@ -29,16 +30,3 @@ h5:hover .anchor,
 h6:hover .anchor {
 	opacity: 1;
 }
-
-/* visually hidden, but accessible to assistive tech */
-.visually-hidden {
-  border: 0;
-  clip: rect(0 0 0 0);
-  height: auto;
-  margin: 0;
-  overflow: hidden;
-  padding: 0;
-  position: absolute;
-  width: 1px;
-  white-space: nowrap;
-}