a11y tweaks

Author: Rich-Harris

packages/site-kit/src/lib/docs/DocsContents.svelte

@@ -72,9 +72,11 @@
 	}
 
 	li {
+		position: relative;
 		display: block;
 		margin: 0;
 		margin-bottom: 4rem;
+		padding-right: 0.5rem; /* leave space for focus ring */
 	}
 
 	li:last-child {
@@ -125,14 +127,14 @@
 			overflow-y: auto;
 		}
 
-		:global(.scrollbars-invisible) [aria-current='page']::after {
+		:global(.scrollbars-invisible) li:has(> [aria-current='page'])::after {
 			--size: 1.8rem;
 			content: '';
 			position: absolute;
 			width: var(--size);
 			height: var(--size);
 			top: calc(1.4rem - var(--size) * 0.5);
-			right: calc(-0.5 * var(--size));
+			right: calc(-0.5rem - 0.5 * var(--size));
 			background-color: var(--sk-bg-1);
 			z-index: 2;
 			position: absolute;

packages/site-kit/src/lib/markdown/renderer.ts

@@ -857,9 +857,15 @@ async function syntax_highlight({
 		html = replace_blank_lines(highlighted);
 	}
 
-	// munge shiki output: put whitespace outside `<span>` elements, so that
-	// highlight delimiters fall outside tokens
-	html = html.replace(/(<span[^>]+?>)(\s+)/g, '$2$1').replace(/(\s+)(<\/span>)/g, '$2$1');
+	// munge shiki output
+	html = html
+		// put whitespace outside `<span>` elements, so that
+		// highlight delimiters fall outside tokens
+		.replace(/(<span[^>]+?>)(\s+)/g, '$2$1')
+		.replace(/(\s+)(<\/span>)/g, '$2$1')
+
+		// remove tabindex
+		.replace(' tabindex="0"', '');
 
 	html = html
 		.replace(/ {13}([^ ][^]+?) {13}/g, (_, content) => {