feat: utlize ARIA, Semantic tags and remove unnecessary elements over…

…all quality code + reuse the classes
thekiranmahajan · Jun 23, 2024 · 132e5d3 · 132e5d3
1 parent 39bd201
commit 132e5d3
Show file tree

Hide file tree

Showing 4 changed files with 53 additions and 19 deletions.
diff --git a/src/components/Header.jsx b/src/components/Header.jsx
@@ -3,6 +3,7 @@ import { IoGridOutline, IoMoonOutline, IoSunnyOutline } from "react-icons/io5";
 import NavLinks from "./NavLinks";
 import { HiMiniXMark } from "react-icons/hi2";
 import { setTheme } from "../utils/helper";
+
 const Header = () => {
   const [isMenuOpen, setIsMenuOpen] = useState(false);
   const [selectedTheme, setSelectedTheme] = useState(
@@ -23,39 +24,65 @@ const Header = () => {
 
   return (
     <header className="fixed bottom-0 flex h-12 w-full items-center justify-between bg-light-blue px-5 text-white md:top-0 md:justify-between dark:bg-yellow dark:text-dark-blue">
-      <h2 className="cursor-pointer font-rajdhani text-lg font-bold">
-        Kiran Mahajan<span className="text-yellow dark:text-violet">.</span>
-      </h2>
+      <h1 className="text-effect group cursor-pointer font-rajdhani text-lg font-bold">
+        <a href="/">
+          Kiran Mahajan
+          <span className="text-yellow group-hover:text-dark-blue dark:text-violet">
+            .
+          </span>
+        </a>
+      </h1>
 
-      <nav className="ml-auto hidden h-full w-3/4 px-5 md:flex">
+      <nav className="ml-auto hidden w-3/4 px-5 md:flex">
         <NavLinks />
       </nav>
       <div className="flex h-full w-16 items-center justify-between px-1 md:relative md:w-10 md:justify-center">
-        <IoSunnyOutline
+        <button
+          aria-label="Switch to light theme"
           onClick={() => addThemeToLocalStorage("light")}
-          className={`cursor-pointer text-xl transition-transform duration-300 hover:text-dark-blue md:absolute dark:text-dark-blue dark:hover:text-violet ${selectedTheme === "dark" ? "block scale-100 opacity-100" : "pointer-events-none hidden scale-0 opacity-0"}`}
-        />
-        <IoMoonOutline
+          className={`text-effect text-xl transition-transform md:absolute ${
+            selectedTheme === "dark"
+              ? "block scale-100 opacity-100"
+              : "pointer-events-none hidden scale-0 opacity-0"
+          }`}
+        >
+          <IoSunnyOutline />
+        </button>
+
+        <button
+          aria-label="Switch to dark theme"
           onClick={() => addThemeToLocalStorage("dark")}
-          className={`cursor-pointer text-xl transition-transform duration-300 hover:text-dark-blue md:absolute dark:text-dark-blue dark:hover:text-violet ${selectedTheme === "light" ? "block rotate-0 scale-100 opacity-100" : "pointer-events-none rotate-90 scale-0 opacity-0"}`}
-        />
-        <IoGridOutline
+          className={`text-effect text-xl transition-transform md:absolute ${
+            selectedTheme === "light"
+              ? "block rotate-0 scale-100 opacity-100"
+              : "pointer-events-none rotate-90 scale-0 opacity-0"
+          }`}
+        >
+          <IoMoonOutline />
+        </button>
+        <button
           onClick={() => setIsMenuOpen(true)}
-          className={`cursor-pointer text-xl md:hidden dark:text-dark-blue dark:hover:text-violet`}
-        />
+          aria-label="Open menu"
+          className="text-effect text-xl md:hidden"
+        >
+          <IoGridOutline />
+        </button>
       </div>
 
       <div
-        className={`absolute bottom-0 left-1/2 right-0 z-10 flex h-56 w-full -translate-x-1/2 transform flex-col rounded-t-3xl bg-light-blue p-1 pt-5 text-white shadow-2xl transition-transform duration-200 md:hidden dark:bg-yellow dark:text-dark-blue ${isMenuOpen ? "flex translate-y-0" : "translate-y-full"} `}
+        className={`absolute bottom-0 left-1/2 right-0 z-10 flex h-56 w-full -translate-x-1/2 transform flex-col rounded-t-3xl bg-light-blue p-1 pt-6 shadow-2xl transition-transform duration-300 md:hidden dark:bg-yellow ${isMenuOpen ? "flex translate-y-0" : "translate-y-full"} `}
       >
         <nav className="flex h-full w-full">
           <NavLinks />
         </nav>
         <div className="flex h-12 w-full items-center justify-end px-3">
-          <HiMiniXMark
+          <button
             onClick={() => setIsMenuOpen(false)}
-            className="cursor-pointer text-2xl hover:text-dark-blue dark:text-violet"
-          />
+            aria-label="Close menu"
+            className="text-effect text-2xl"
+          >
+            <HiMiniXMark />
+          </button>
         </div>
       </div>
     </header>

diff --git a/src/components/NavItem.jsx b/src/components/NavItem.jsx
@@ -2,8 +2,9 @@ const NavItem = ({ icon: Icon, label, href }) => {
   return (
     <li className="flex items-center justify-center">
       <a
+        aria-label={label}
         href={href}
-        className="flex cursor-pointer flex-col items-center justify-center gap-1 truncate text-sm font-medium hover:text-dark-blue md:flex-row md:gap-0 dark:text-dark-blue dark:hover:text-violet"
+        className="text-effect flex cursor-pointer flex-col items-center justify-center gap-1 truncate text-sm font-medium md:flex-row md:gap-0 dark:text-dark-blue"
       >
         <Icon className="text-xl md:hidden" />
         {label}

diff --git a/src/components/NavLinks.jsx b/src/components/NavLinks.jsx
@@ -3,7 +3,7 @@ import NavItem from "./NavItem";
 
 const NavLinks = () => {
   return (
-    <ul className="row-gap-4 grid h-full w-full grid-cols-3 grid-rows-2 gap-x-4 gap-y-8 font-semibold md:flex md:justify-end md:gap-8">
+    <ul className="grid h-full w-full grid-cols-3 grid-rows-2 gap-4 font-semibold md:flex md:justify-end md:gap-8">
       {navItems.map((item) => (
         <NavItem
           key={item.label}

diff --git a/src/index.css b/src/index.css
@@ -1,3 +1,9 @@
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
+
+@layer components {
+  .text-effect {
+    @apply transition-colors duration-300 hover:text-dark-blue dark:hover:text-violet;
+  }
+}