From 207958e0f7a9788811675a9947534bb495244a17 Mon Sep 17 00:00:00 2001
From: Dorian Niemiec <dorian.niemiec@svrjs.org>
Date: Mon, 29 Jul 2024 21:14:09 +0200
Subject: [PATCH] Improve the accessiblity of mobile menu toggle, and theme
 toggle.

---
 components/shared/MobileNav.tsx | 1 +
 components/ui/theme-toggle.tsx  | 1 +
 2 files changed, 2 insertions(+)

diff --git a/components/shared/MobileNav.tsx b/components/shared/MobileNav.tsx
index a84b835..09b6cc8 100644
--- a/components/shared/MobileNav.tsx
+++ b/components/shared/MobileNav.tsx
@@ -19,6 +19,7 @@ const MobileNav = () => {
 			<ThemeToggle />
 			<Sheet>
 				<SheetTrigger>
+					<span className="sr-only">Menu</span>
 					<Menu className="w-5 h-5" />
 				</SheetTrigger>
 				<SheetContent>
diff --git a/components/ui/theme-toggle.tsx b/components/ui/theme-toggle.tsx
index 1e7ba8c..738b688 100644
--- a/components/ui/theme-toggle.tsx
+++ b/components/ui/theme-toggle.tsx
@@ -30,6 +30,7 @@ const ThemeToggle = () => {
           className="md:border-input border-transparent"
           onClick={handleTheme}
         >
+          <span className="sr-only">Toggle theme</span>
           <Sun className="h-[1.2rem] w-[1.2rem] rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0" />
           <Moon className="absolute h-[1.2rem] w-[1.2rem] rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100" />
         </Button>