From 55d175a6ebfd93ffa66416d407db014f62a8dd78 Mon Sep 17 00:00:00 2001
From: Mackenly Jones <53151058+mackenly@users.noreply.github.com>
Date: Tue, 11 Oct 2022 12:50:09 -0400
Subject: [PATCH] Adds some aria labels and improves CSS focus properites

---
 src/components/link.svelte     | 6 +++---
 src/components/sponsors.svelte | 4 ++--
 src/routes/+page.svelte        | 2 ++
 3 files changed, 7 insertions(+), 5 deletions(-)

diff --git a/src/components/link.svelte b/src/components/link.svelte
index e6d7bc8..b536428 100644
--- a/src/components/link.svelte
+++ b/src/components/link.svelte
@@ -44,7 +44,7 @@
 			filter: none;
 			transition: all 0.5s ease-in-out;
 
-			&:hover {
+			&:hover, &:focus {
 				background: $white;
 				color: $black;
 
@@ -53,11 +53,11 @@
 				}
 			}
 
-			&.discord:hover {
+			&.discord:hover, &.discord:focus {
 				background: $discord;
 			}
 
-			&.meetup:hover {
+			&.meetup:hover, &.meetup:focus {
 				background: $meetup;
 			}
 
diff --git a/src/components/sponsors.svelte b/src/components/sponsors.svelte
index 4ebf61f..4957ed7 100644
--- a/src/components/sponsors.svelte
+++ b/src/components/sponsors.svelte
@@ -133,12 +133,12 @@
 
 <div class="carousel-container {$config.screenMode} {cssClass}" on:mouseenter={stopAutoPlay} on:mouseleave={startAutoPlay}>
 	<h2>Sponsors</h2>
-	<button class="left" on:click={rotateLeft}>
+	<button class="left" on:click={rotateLeft} aria-label="Rotate left">
 		<svg class="{$config.screenMode}" xmlns="http://www.w3.org/2000/svg" height="48" width="48" viewBox="-10 0 64 44">	
 			<path d="M20 44 0 24 20 4l2.8 2.85L5.65 24 22.8 41.15Z"/>
 		</svg>
 	</button>
-	<button class="right" on:click={rotateRight}>
+	<button class="right" on:click={rotateRight} aria-label="Rotate right">
 		<svg class="{$config.screenMode}" xmlns="http://www.w3.org/2000/svg" height="48" width="48" viewBox="-20 0 64 44">
 			<path d="m15.2 43.9-2.8-2.85L29.55 23.9 12.4 6.75l2.8-2.85 20 20Z"/>
 		</svg>
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index cbd37ca..44da8e8 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -53,6 +53,8 @@
 					$config.screenMode === "dark-mode"
 						? ($config.screenMode = "light-mode")
 						: ($config.screenMode = "dark-mode")}
+				role="switch"
+				aria-checked={$config.screenMode === "dark-mode"}
 			/>
 		</div>
 	{/if}