some accesibility aissues and theme toggle fix (#35)

batistaDev1113 · Dec 8, 2023 · 9f638aa · 9f638aa · vercel · Dec 8, 2023
1 parent a19e2c8
commit 9f638aa
Show file tree

Hide file tree

Showing 2 changed files with 6 additions and 16 deletions.
diff --git 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
@@ -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>