a11y tweaks (#1306)

* tweak some focus states

* a11y tweaks

* more tweaks

Author: Rich-Harris

apps/svelte.dev/src/routes/_home/Video.svelte

@@ -197,6 +197,7 @@
 	label {
 		opacity: 0.2;
 		transition: opacity 0.2s;
+		border-radius: var(--sk-border-radius);
 	}
 
 	.top-controls {
@@ -237,12 +238,14 @@
 		border-radius: 0 var(--sk-border-radius) var(--sk-border-radius) var(--sk-border-radius);
 	} */
 
-	.video-player:hover label {
+	.video-player:hover label,
+	.video-player:focus-within label {
 		opacity: 1;
 	}
 
 	.video-player input:focus-visible ~ img {
 		outline: 2px solid var(--sk-fg-accent);
 		outline-offset: 2px;
+		border-radius: var(--sk-border-radius);
 	}
 </style>

packages/repl/src/lib/Output/CompilerOptions.svelte

@@ -27,7 +27,7 @@
 	<!-- svelte-ignore a11y_label_has_associated_control (TODO this warning should probably be disabled if there's a component)-->
 	<label class="option">
 		<span class="key">dev:</span>
-		<span style="font-size: 1.2rem">
+		<span style="position: relative; font-size: 1.2rem; top: 0.2em">
 			<Checkbox
 				checked={workspace.compiler_options.dev!}
 				onchange={(dev) => {
@@ -70,10 +70,6 @@
 		color: var(--shiki-token-string);
 	}
 
-	label :global(input[type='checkbox']) {
-		top: -1px;
-	}
-
 	input[type='radio'] {
 		position: absolute;
 		top: auto;

packages/site-kit/src/lib/components/Checkbox.svelte

@@ -9,15 +9,15 @@
 
 <style>
 	input[type='checkbox'] {
+		--thumb-size: 1em;
+		--track-padding: 2px;
 		/* display: block; */
 		position: relative;
-		height: 1em;
-		width: 2em;
-		top: -2px;
+		height: calc(var(--thumb-size) + 2 * var(--track-padding));
+		width: calc(2 * var(--thumb-size) + 2 * var(--track-padding));
 		border-radius: 0.5em;
 		-webkit-appearance: none;
 		appearance: none;
-		outline: none;
 		border: transparent;
 		margin: 0 0.6em 0 0;
 	}
@@ -28,12 +28,11 @@
 		display: block;
 		height: 100%;
 		width: 100%;
-		padding: 2px;
-		border-radius: 1em;
 		top: 0;
 		left: 0;
+		border-radius: 9999px;
 		background: var(--sk-bg-4);
-		box-sizing: content-box;
+		box-sizing: border-box;
 	}
 
 	input[type='checkbox']:checked::before {
@@ -44,10 +43,10 @@
 		content: '';
 		position: absolute;
 		display: block;
-		height: 1em;
-		width: 1em;
-		top: 2px;
-		left: 2px;
+		height: var(--thumb-size);
+		aspect-ratio: 1;
+		top: var(--track-padding);
+		left: var(--track-padding);
 		border-radius: 1em;
 		background: var(--sk-bg-1);
 		box-shadow:
@@ -59,6 +58,6 @@
 	}
 
 	input[type='checkbox']:checked::after {
-		left: calc(100% - 1em + 2px);
+		left: calc(100% - var(--thumb-size) - var(--track-padding));
 	}
 </style>

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) => {

packages/site-kit/src/lib/nav/Nav.svelte

@@ -125,14 +125,17 @@ Top navigation bar for the application. It provides a slot for the left side, th
 			<Search />
 
 			<div class="external-links">
-				<a href="/chat" data-icon="discord" aria-label="Discord Chat"></a>
-				<a
-					href="https://bsky.app/profile/sveltesociety.dev"
-					data-icon="bluesky"
-					aria-label="Svelte Society on Bluesky"
-				></a>
-				<a href="https://github.com/sveltejs/svelte" data-icon="github" aria-label="GitHub Repo"
-				></a>
+				<a href="/chat" aria-label="Discord Chat">
+					<span data-icon="discord"></span>
+				</a>
+
+				<a href="https://bsky.app/profile/sveltesociety.dev" aria-label="Svelte Society on Bluesky">
+					<span data-icon="bluesky"></span>
+				</a>
+
+				<a href="https://github.com/sveltejs/svelte" aria-label="GitHub Repo">
+					<span data-icon="github"></span>
+				</a>
 			</div>
 
 			<FontToggle />
@@ -281,6 +284,10 @@ Top navigation bar for the application. It provides a slot for the left side, th
 			display: flex;
 			height: 100%;
 			margin: 0 0.5rem;
+
+			a {
+				outline-offset: -2px;
+			}
 		}
 	}
 
@@ -377,9 +384,11 @@ Top navigation bar for the application. It provides a slot for the left side, th
 			display: contents;
 
 			[data-icon] {
+				display: flex;
 				background: var(--sk-fg-3);
 				padding: 0 0.5rem;
 				height: 100%;
+				aspect-ratio: 1;
 				mask: no-repeat 50% 50%;
 				mask-size: calc(100% - 1rem) auto;
 			}