a11y improvements to kit.svelte.dev (#7928)

- more accessible JS/TS toggle - label on search input - unique labels for navs - missing h1
sveltejs · Dec 4, 2022 · b9406a0 · b9406a0
1 parent 917ea2d
commit b9406a0
Show file tree

Hide file tree

Showing 6 changed files with 20 additions and 16 deletions.
diff --git a/sites/kit.svelte.dev/src/lib/docs/Contents.svelte b/sites/kit.svelte.dev/src/lib/docs/Contents.svelte
@@ -5,7 +5,7 @@
 	export let contents = [];
 </script>
 
-<nav>
+<nav aria-label="Docs">
 	<ul class="sidebar">
 		{#each contents as section}
 			<li>

diff --git a/sites/kit.svelte.dev/src/lib/docs/TSToggle.svelte b/sites/kit.svelte.dev/src/lib/docs/TSToggle.svelte
@@ -1,5 +1,5 @@
 <script>
-	import Checkbox from './Checkbox.svelte';
+	import ToggleButton from './ToggleButton.svelte';
 
 	let checked = prefers_ts();
 	$: toggle(checked);
@@ -22,10 +22,9 @@
 	}
 </script>
 
-<!-- svelte-ignore a11y-label-has-associated-control -->
-<label class="input-output-toggle">
-	JavaScript <Checkbox bind:checked /> TypeScript
-</label>
+<div class="input-output-toggle">
+	<span aria-hidden="true">JavaScript</span> <ToggleButton bind:pressed={checked} label="TypeScript code examples" /> <span aria-hidden="true">TypeScript</span>
+</div>
 
 <style>
 	.input-output-toggle {

diff --git a/...t.svelte.dev/src/lib/docs/Checkbox.svelte → ...elte.dev/src/lib/docs/ToggleButton.svelte b/...t.svelte.dev/src/lib/docs/Checkbox.svelte → ...elte.dev/src/lib/docs/ToggleButton.svelte
@@ -1,12 +1,15 @@
 <script>
-	export let checked;
+	export let pressed;
+	export let label;
 </script>
 
-<input type="checkbox" bind:checked />
+<button aria-pressed={pressed ? "true" : "false" } on:click={ () => pressed = !pressed}>
+	<span class="visually-hidden">{label}</span>
+</button>
 
 <style>
-	input[type='checkbox'] {
-		--size: 1.2em;
+	button {
+		--size: 1em;
 		--bg: var(--sk-theme-2);
 		--fg: white;
 		--bg-active: var(--bg);
@@ -19,11 +22,11 @@
 		border-radius: 0.5em;
 		-webkit-appearance: none;
 		appearance: none;
-		outline: none;
+		outline-offset: 2px;
 		border: transparent;
 	}
 
-	input[type='checkbox']::before {
+	button::before {
 		content: '';
 		position: absolute;
 		display: block;
@@ -37,11 +40,11 @@
 		box-sizing: border-box;
 	}
 
-	input[type='checkbox']:checked::before {
+	button[aria-pressed="true"]::before {
 		background: var(--bg-active);
 	}
 
-	input[type='checkbox']::after {
+	button::after {
 		content: '';
 		position: absolute;
 		display: block;
@@ -56,7 +59,7 @@
 		transition: background 0.2s ease-out, left 0.2s ease-out;
 	}
 
-	input[type='checkbox']:checked::after {
+	button[aria-pressed="true"]::after {
 		background: var(--fg-active);
 		left: calc(100% - var(--size) + 2px);
 	}

diff --git a/sites/kit.svelte.dev/src/lib/search/SearchBox.svelte b/sites/kit.svelte.dev/src/lib/search/SearchBox.svelte
@@ -148,6 +148,7 @@
 				value={$query}
 				placeholder="Search"
 				aria-describedby="search-description"
+				aria-label="Search"
 				spellcheck="false"
 			/>
 

diff --git a/sites/kit.svelte.dev/src/routes/search/+page.svelte b/sites/kit.svelte.dev/src/routes/search/+page.svelte
@@ -10,6 +10,7 @@
 </svelte:head>
 
 <main>
+	<h1>Search</h1>
 	<form>
 		<input name="q" value={data.query} placeholder="Search" spellcheck="false" />
 	</form>

diff --git a/sites/site-kit/src/lib/components/Nav.svelte b/sites/site-kit/src/lib/components/Nav.svelte
@@ -49,7 +49,7 @@
 	<div class="modal-background hide-if-desktop" on:click={() => (open = false)} />
 {/if}
 
-<nav class:visible={visible || open} class:open bind:this={nav}>
+<nav class:visible={visible || open} class:open bind:this={nav} aria-label="Primary">
 	<a href="/" class="nav-spot home" title={home_title} style="background-image: url({logo})">
 		{home}
 	</a>