Improve permalink a11y (#32)

packages/site-kit/base.css

@@ -566,3 +566,16 @@ input[type='checkbox']::after {
 input[type='checkbox']:checked::after {
 	left: calc(100% - 1em + 2px);
 }
+
+/* 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;
+}

packages/site-kit/components/Docs.svelte

@@ -2,6 +2,7 @@
 	import { onMount } from 'svelte';
 	import GuideContents from './GuideContents.svelte'; // TODO rename
 	import Icon from './Icon.svelte';
+	import Permalink from './Permalink.svelte';
 	import { getFragment } from '../utils/navigation';
 	import '../code.css';
 
@@ -77,11 +78,8 @@
 		<section data-id={section.slug}>
 			<h2>
 				<span class="offset-anchor" id={section.slug}></span>
-
-				<!-- svelte-ignore a11y-missing-content -->
-				<a href="{dir}#{section.slug}" class="anchor" aria-hidden></a>
-
 				{@html section.title}
+				<Permalink href="{dir}#{section.slug}" />
 				<small>
 					<a href="https://github.com/{owner}/{project}/edit/master{path}/{dir}/{section.file}" title="{edit_title}">
 						<Icon name='edit' />
@@ -260,13 +258,14 @@
 		background-size: 1em 1em;
 		width: 1.4em;
 		height: 1em;
+		top: 0;
 		left: -1.3em;
 		opacity: 0;
 		transition: opacity 0.2s;
-		border: none !important; /* TODO get rid of linkify */
 	}
 
 	@media (min-width: 768px) {
+		.content :global(.anchor:focus),
 		.content :global(h2):hover :global(.anchor),
 		.content :global(h3):hover :global(.anchor),
 		.content :global(h4):hover :global(.anchor),
@@ -275,9 +274,8 @@
 			opacity: 1;
 		}
 
-		.content :global(h5) :global(.anchor),
-		.content :global(h6) :global(.anchor) {
-			top: 0.25em;
+		.content :global(h2) :global(.anchor) {
+			top: 0.75em;
 		}
 	}
 
@@ -391,10 +389,6 @@
 		cursor: pointer;
 	}
 
-	/* no linkify on these */
-	small a        { all: unset }
-	small a:before { all: unset }
-
 	section :global(blockquote) {
 		/* color: #ff3e00; */
 		color: rgba(0,0,0,0.7);
@@ -428,4 +422,4 @@
 		/* background: none !important; */
 		background: rgba(255,62,0,0.1) !important;
 	}
-</style>
+</style>

packages/site-kit/components/Permalink.svelte

@@ -0,0 +1,7 @@
+<script>
+	export let href;
+</script>
+
+<a {href} class="anchor">
+	<span class="visually-hidden">permalink</span>
+</a>

packages/site-kit/index.js

@@ -3,7 +3,8 @@ export { default as Docs } from './components/Docs.svelte';
 export { default as Hero } from './components/Hero.svelte';
 export { default as Icon } from './components/Icon.svelte';
 export { default as Icons } from './components/Icons.svelte';
+export { default as Permalink } from './components/Permalink.svelte';
+export { default as PreloadingIndicator } from './components/PreloadingIndicator.svelte';
 export { default as Nav } from './components/Nav.svelte';
 export { default as NavItem } from './components/NavItem.svelte';
 export { default as Section } from './components/Section.svelte';
-export { default as PreloadingIndicator } from './components/PreloadingIndicator.svelte';

sites/kit.svelte.dev/src/routes/faq/index.svelte

@@ -9,6 +9,8 @@
 </script>
 
 <script>
+	import { Permalink } from "@sveltejs/site-kit";
+
 	export let faqs;
 </script>
 
@@ -26,8 +28,8 @@
 		<article class="faq">
 			<h2>
 				<a id={faq.slug} class="offset-anchor" />
-				<a class="anchor" sapper:prefetch href="faq#{faq.slug}" title={faq.title}>&nbsp;</a>
 				{faq.title}
+				<Permalink href="faq#{faq.slug}" />
 			</h2>
 			{@html faq.content}
 		</article>
@@ -77,7 +79,6 @@
 		left: -1.3em;
 		opacity: 0;
 		transition: opacity 0.2s;
-		border: none !important; /* TODO get rid of linkify */
 	}
 
 	.faqs :global(h2 > .anchor),
@@ -86,6 +87,7 @@
 	}
 
 	@media (min-width: 768px) {
+		.content :global(.anchor:focus),
 		.faqs :global(h2):hover :global(.anchor),
 		.faqs :global(h3):hover :global(.anchor),
 		.faqs :global(h4):hover :global(.anchor),