fix: Various a11y fixes (#107)

* Various a11y fixes - remove non-li from ul - remove unnecessary `<label>` - use toggle button instead of switch for consistency * Changeset * Fix ToggleButton's alignment --------- Co-authored-by: Puru Vijay <devpuruvj@gmail.com>
sveltejs · Apr 19, 2023 · 909d06b · 909d06b
1 parent dc79aa5
commit 909d06b
Show file tree

Hide file tree

Showing 4 changed files with 43 additions and 39 deletions.
diff --git a/.changeset/seven-flies-worry.md b/.changeset/seven-flies-worry.md
@@ -0,0 +1,5 @@
+---
+'@sveltejs/site-kit': patch
+---
+
+Fix some ThemeToggle/Nav a11y issues
diff --git a/packages/site-kit/src/lib/components/Nav.svelte b/packages/site-kit/src/lib/components/Nav.svelte
@@ -73,20 +73,20 @@ Top navigation bar for the application. It provides a slot for the left side, th
 		<Icon name={open ? 'close' : 'menu'} size="1em" />
 	</button>
 
-	<ul>
+	<ul class="menu-section">
 		<slot name="nav-center" />
 	</ul>
 
-	<ul class="external">
-		<slot name="nav-right" />
-
-		<Separator />
-
+	<div class="external menu-section">
+		<ul>
+			<slot name="nav-right" />
+			<Separator />
+		</ul>
 		<div class="appearance">
 			<span class="caption">Theme</span>
 			<ThemeToggle />
 		</div>
-	</ul>
+	</div>
 </nav>
 
 <style>
@@ -96,7 +96,7 @@ Top navigation bar for the application. It provides a slot for the left side, th
 		height: 100%;
 		top: 0;
 		left: 0;
-		background: var(--back);
+		background: var(--sk-back-1);
 		opacity: 0.8;
 		z-index: 2;
 		backdrop-filter: grayscale(0.5) blur(2px);
@@ -141,9 +141,12 @@ Top navigation bar for the application. It provides a slot for the left side, th
 		}
 	}
 
-	ul {
+	.menu-section {
 		position: relative;
 		width: 100%;
+	}
+
+	ul {
 		padding: 0;
 		margin: 0;
 		list-style: none;
@@ -198,23 +201,23 @@ Top navigation bar for the application. It provides a slot for the left side, th
 	}
 
 	@media (max-width: 799px) {
-		ul {
+		.menu-section {
 			position: relative;
 			display: none;
 			width: 100%;
-			background: var(--back);
+			background: var(--sk-back-1);
 			padding: 1rem var(--sk-page-padding-side);
 		}
 
-		.open ul {
+		.open .menu-section {
 			display: block;
 		}
 
-		ul.external {
+		.external {
 			padding: 1rem var(--sk-page-padding-side) 1rem;
 		}
 
-		ul.external::before {
+		.external::before {
 			content: '';
 			position: absolute;
 			top: 0;
@@ -224,7 +227,7 @@ Top navigation bar for the application. It provides a slot for the left side, th
 			background: radial-gradient(circle at center, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.05));
 		}
 
-		ul.external::after {
+		.external::after {
 			content: '';
 			position: absolute;
 			width: 100%;
@@ -260,7 +263,8 @@ Top navigation bar for the application. It provides a slot for the left side, th
 			/* justify-content: space-between; */
 		}
 
-		ul {
+		ul,
+		.menu-section {
 			display: flex;
 			width: auto;
 			height: 100%;
@@ -277,7 +281,7 @@ Top navigation bar for the application. It provides a slot for the left side, th
 			height: 100%;
 		}
 
-		ul.external {
+		.external {
 			padding: 0 var(--sk-page-padding-side) 0 0;
 			justify-content: end;
 		}

diff --git a/packages/site-kit/src/lib/components/ThemeToggle.svelte b/packages/site-kit/src/lib/components/ThemeToggle.svelte
@@ -65,26 +65,24 @@
 	onDestroy(() => query?.removeEventListener('change', cb));
 </script>
 
-<label title="toggle dark mode">
-	<button
-		on:click={toggle}
-		type="button"
-		role="switch"
-		aria-checked={$theme.current === 'dark' ? 'true' : false}
-	>
-		<span class="check" class:checked={$theme.current === 'dark'}>
-			<span class="icon">
-				{#if BROWSER}
-					{#if $theme.current === 'dark'}
-						{@html `<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24"><path fill="currentColor" d="M12 21q-3.775 0-6.388-2.613T3 12q0-3.45 2.25-5.988T11 3.05q.625-.075.975.45t-.025 1.1q-.425.65-.638 1.375T11.1 7.5q0 2.25 1.575 3.825T16.5 12.9q.775 0 1.538-.225t1.362-.625q.525-.35 1.075-.037t.475.987q-.35 3.45-2.937 5.725T12 21Zm0-2q2.2 0 3.95-1.213t2.55-3.162q-.5.125-1 .2t-1 .075q-3.075 0-5.238-2.163T9.1 7.5q0-.5.075-1t.2-1q-1.95.8-3.163 2.55T5 12q0 2.9 2.05 4.95T12 19Zm-.25-6.75Z"/></svg>`}
-					{:else}
-						{@html `<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24"><g fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"><path d="M0 0h24v24H0z"/><path fill="currentColor" d="M12 19a1 1 0 0 1 .993.883L13 20v1a1 1 0 0 1-1.993.117L11 21v-1a1 1 0 0 1 1-1zm6.313-2.09l.094.083l.7.7a1 1 0 0 1-1.32 1.497l-.094-.083l-.7-.7a1 1 0 0 1 1.218-1.567l.102.07zm-11.306.083a1 1 0 0 1 .083 1.32l-.083.094l-.7.7a1 1 0 0 1-1.497-1.32l.083-.094l.7-.7a1 1 0 0 1 1.414 0zM4 11a1 1 0 0 1 .117 1.993L4 13H3a1 1 0 0 1-.117-1.993L3 11h1zm17 0a1 1 0 0 1 .117 1.993L21 13h-1a1 1 0 0 1-.117-1.993L20 11h1zM6.213 4.81l.094.083l.7.7a1 1 0 0 1-1.32 1.497l-.094-.083l-.7-.7A1 1 0 0 1 6.11 4.74l.102.07zm12.894.083a1 1 0 0 1 .083 1.32l-.083.094l-.7.7a1 1 0 0 1-1.497-1.32l.083-.094l.7-.7a1 1 0 0 1 1.414 0zM12 2a1 1 0 0 1 .993.883L13 3v1a1 1 0 0 1-1.993.117L11 4V3a1 1 0 0 1 1-1zm0 5a5 5 0 1 1-4.995 5.217L7 12l.005-.217A5 5 0 0 1 12 7z"/></g></svg>`}
-					{/if}
+<button
+	on:click={toggle}
+	type="button"
+	aria-pressed={$theme.current === 'dark' ? 'true' : 'false'}
+	aria-label="Dark mode"
+>
+	<span class="check" class:checked={$theme.current === 'dark'}>
+		<span class="icon">
+			{#if BROWSER}
+				{#if $theme.current === 'dark'}
+					{@html `<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24"><path fill="currentColor" d="M12 21q-3.775 0-6.388-2.613T3 12q0-3.45 2.25-5.988T11 3.05q.625-.075.975.45t-.025 1.1q-.425.65-.638 1.375T11.1 7.5q0 2.25 1.575 3.825T16.5 12.9q.775 0 1.538-.225t1.362-.625q.525-.35 1.075-.037t.475.987q-.35 3.45-2.937 5.725T12 21Zm0-2q2.2 0 3.95-1.213t2.55-3.162q-.5.125-1 .2t-1 .075q-3.075 0-5.238-2.163T9.1 7.5q0-.5.075-1t.2-1q-1.95.8-3.163 2.55T5 12q0 2.9 2.05 4.95T12 19Zm-.25-6.75Z"/></svg>`}
+				{:else}
+					{@html `<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24"><g fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"><path d="M0 0h24v24H0z"/><path fill="currentColor" d="M12 19a1 1 0 0 1 .993.883L13 20v1a1 1 0 0 1-1.993.117L11 21v-1a1 1 0 0 1 1-1zm6.313-2.09l.094.083l.7.7a1 1 0 0 1-1.32 1.497l-.094-.083l-.7-.7a1 1 0 0 1 1.218-1.567l.102.07zm-11.306.083a1 1 0 0 1 .083 1.32l-.083.094l-.7.7a1 1 0 0 1-1.497-1.32l.083-.094l.7-.7a1 1 0 0 1 1.414 0zM4 11a1 1 0 0 1 .117 1.993L4 13H3a1 1 0 0 1-.117-1.993L3 11h1zm17 0a1 1 0 0 1 .117 1.993L21 13h-1a1 1 0 0 1-.117-1.993L20 11h1zM6.213 4.81l.094.083l.7.7a1 1 0 0 1-1.32 1.497l-.094-.083l-.7-.7A1 1 0 0 1 6.11 4.74l.102.07zm12.894.083a1 1 0 0 1 .083 1.32l-.083.094l-.7.7a1 1 0 0 1-1.497-1.32l.083-.094l.7-.7a1 1 0 0 1 1.414 0zM12 2a1 1 0 0 1 .993.883L13 3v1a1 1 0 0 1-1.993.117L11 4V3a1 1 0 0 1 1-1zm0 5a5 5 0 1 1-4.995 5.217L7 12l.005-.217A5 5 0 0 1 12 7z"/></g></svg>`}
 				{/if}
-			</span>
+			{/if}
 		</span>
-	</button>
-</label>
+	</span>
+</button>
 
 <style>
 	button {

diff --git a/packages/site-kit/src/lib/components/ToggleButton.svelte b/packages/site-kit/src/lib/components/ToggleButton.svelte
@@ -6,9 +6,7 @@
 	export let label;
 </script>
 
-<button aria-pressed={pressed} on:click={() => (pressed = !pressed)}>
-	<span class="visually-hidden">{label}</span>
-</button>
+<button aria-pressed={pressed} aria-label={label} on:click={() => (pressed = !pressed)} />
 
 <style>
 	button {
@@ -21,7 +19,6 @@
 		height: var(--size);
 		width: calc(100% - 0.6em);
 		max-width: calc(2 * var(--size));
-		top: -2px;
 		border-radius: 0.5em;
 		-webkit-appearance: none;
 		appearance: none;