fix: add navigation to improve accessibility (#1436)

Signed-off-by: Aryan Singh <ssaryans597@gmail.com>
open-sauced · Jul 27, 2023 · d1d85f7 · d1d85f7
1 parent 7deb44a
commit d1d85f7
Showing 1 changed file with 29 additions and 20 deletions.
diff --git a/components/organisms/TopNav/top-nav.tsx b/components/organisms/TopNav/top-nav.tsx
@@ -22,26 +22,35 @@ const TopNav: React.FC = () => {
       <div className="flex justify-between items-start sm:items-center mx-auto container px-2 md:px-16">
         <div className="flex gap-3 md:gap-8 items-center flex-wrap">
           <HeaderLogo withBg={false} textIsBlack />
-          <div className="flex flex-wrap gap-3 md:gap-8 mb-3 ml-2 sm:m-0 w-full sm:w-auto">
-            {!!user && onboarded ? (
-              <Link className={`text-sm ${getActiveStyle(router.asPath === "/hub/insights")}`} href={"/hub/insights"}>
-                Insights
-              </Link>
-            ) : (
-              ""
-            )}
-
-            <Link
-              className={`text-sm ${getActiveStyle(router.asPath === `/${userInterest}/dashboard/filter/recent`)}`}
-              href={`/${userInterest}/dashboard/filter/recent`}
-            >
-              Explore
-            </Link>
-
-            <Link className={`text-sm ${getActiveStyle(router.asPath === "/feed")}`} href={"/feed"}>
-              Highlights
-            </Link>
-          </div>
+          <nav>
+            <ul className="flex flex-wrap gap-3 md:gap-8 mb-3 ml-2 sm:m-0 w-full sm:w-auto">
+              <li>
+                {!!user && onboarded ? (
+                  <Link
+                    className={`text-sm ${getActiveStyle(router.asPath === "/hub/insights")}`}
+                    href={"/hub/insights"}
+                  >
+                    Insights
+                  </Link>
+                ) : (
+                  ""
+                )}
+              </li>
+              <li>
+                <Link
+                  className={`text-sm ${getActiveStyle(router.asPath === `/${userInterest}/dashboard/filter/recent`)}`}
+                  href={`/${userInterest}/dashboard/filter/recent`}
+                >
+                  Explore
+                </Link>
+              </li>
+              <li>
+                <Link className={`text-sm ${getActiveStyle(router.asPath === "/feed")}`} href={"/feed"}>
+                  Highlights
+                </Link>
+              </li>
+            </ul>
+          </nav>
         </div>
         <AuthSection />
       </div>