From 9f638aa25abd9f4594a33b5f3008292ac49b3efa Mon Sep 17 00:00:00 2001
From: Yunior Batista <yuniorbatista1113@gmail.com>
Date: Fri, 8 Dec 2023 18:41:42 -0500
Subject: [PATCH] some accesibility aissues and theme toggle fix (#35)

---
 components/ModeToggle.tsx | 14 ++++----------
 components/Navigation.tsx |  8 ++------
 2 files changed, 6 insertions(+), 16 deletions(-)

diff --git a/components/ModeToggle.tsx b/components/ModeToggle.tsx
index 254505e..844f83f 100644
--- a/components/ModeToggle.tsx
+++ b/components/ModeToggle.tsx
@@ -2,21 +2,13 @@
 
 import { useTheme } from "next-themes";
 import { BsSunFill, BsMoonFill } from "react-icons/bs";
-import { useEffect, useState } from "react";
-
 export function ModeToggle() {
-  const { setTheme, theme } = useTheme();
-  const [mounted, setMounted] = useState<Boolean>(false);
-
-  useEffect(() => {
-    setMounted(true);
-  }, []);
-
-  if (!mounted) return null;
+  const { theme, setTheme } = useTheme();
 
   return (
     <div
       role='button'
+      aria-label='Toggle theme mode'
       tabIndex={0}
       onClick={() => setTheme(theme === "light" ? "dark" : "light")}
       onKeyDown={() => setTheme(theme === "light" ? "dark" : "light")}
@@ -30,3 +22,5 @@ export function ModeToggle() {
     </div>
   );
 }
+
+export default ModeToggle;
diff --git a/components/Navigation.tsx b/components/Navigation.tsx
index 87d4dc1..6404eeb 100644
--- a/components/Navigation.tsx
+++ b/components/Navigation.tsx
@@ -24,17 +24,13 @@ const Navigation = () => {
         <Navbar.Link
           href='#projects'
           role='link'
-          aria-label='Link to projects section'
+          aria-label='Some projects I have built'
         >
           <span className='pb-1 hover:text-teal-600 dark:hover:text-teal-300 hover:border-b-2  hover:border-indigo-500 hover:border-spacing-4'>
             Some Projects I&apos;ve Built
           </span>
         </Navbar.Link>
-        <Navbar.Link
-          href='#contact'
-          role='link'
-          aria-label='Link to contact me form'
-        >
+        <Navbar.Link href='#contact' role='link' aria-label='Contact me'>
           <span className='pb-1 hover:text-teal-600 dark:hover:text-teal-300 hover:border-b-2  hover:border-indigo-500 hover:border-spacing-4'>
             Contact Me
           </span>