a11y

Author: Rich Harris

src/routes/tutorial/[slug]/ScreenToggle.svelte

@@ -6,9 +6,9 @@
 </script>
 
 <div class="input-output-toggle">
-	<span aria-hidden="true">Tutorial</span>
+	<button aria-hidden="true" on:click={() => (selected = false)}>Tutorial</button>
 	<ToggleButton bind:pressed={selected} label="Show editor" />
-	<span aria-hidden="true">Editor</span>
+	<button aria-hidden="true" on:click={() => (selected = true)}>Editor</button>
 </div>
 
 <style>

src/routes/tutorial/[slug]/ToggleButton.svelte

@@ -30,6 +30,10 @@
 		border: transparent;
 	}
 
+	button:focus-visible {
+		outline: 2px solid var(--sk-theme-3);
+	}
+
 	button::before {
 		content: '';
 		position: absolute;