From a354ae5de0a7b176a18c17b59bb621c20593dac8 Mon Sep 17 00:00:00 2001
From: Dorian Niemiec <dorian.niemiec@svrjs.org>
Date: Mon, 29 Jul 2024 21:02:58 +0200
Subject: [PATCH] Improve accessibility in the navigation bar; direct child of
 rendered <ul> element are now only <li> elements.

---
 components/shared/Navbar.tsx | 42 ++++++++++++++++++++----------------
 1 file changed, 23 insertions(+), 19 deletions(-)

diff --git a/components/shared/Navbar.tsx b/components/shared/Navbar.tsx
index 9e2f815..d34688d 100644
--- a/components/shared/Navbar.tsx
+++ b/components/shared/Navbar.tsx
@@ -28,27 +28,31 @@ const Navbar = () => {
 					</NavigationMenuItem>
 
 					{/* Mobile view */}
-					<MobileNav />
+					<NavigationMenuItem className="flex md:hidden">
+						<MobileNav />
+					</NavigationMenuItem>
 
 					{/* Desktop Menu */}
-					<nav className="hidden md:flex gap-4">
-						{NAVBAR.centerLinks?.map(({ href, label, target }) => (
-							<Link
-								key={label}
-								href={href}
-								target={target}
-								className={`text-[17px] tracking-tight ${
-									pathname == href ? "bg-muted-foreground/20" : ""
-								} ${buttonVariants({
-									variant: "ghost",
-								})}`}
-							>
-								{label}
-							</Link>
-						))}
-					</nav>
+					<NavigationMenuItem className="hidden md:flex">
+						<nav className="hidden md:flex gap-4">
+							{NAVBAR.centerLinks?.map(({ href, label, target }) => (
+								<Link
+									key={label}
+									href={href}
+									target={target}
+									className={`text-[17px] tracking-tight ${
+										pathname == href ? "bg-muted-foreground/20" : ""
+									} ${buttonVariants({
+										variant: "ghost",
+									})}`}
+								>
+									{label}
+								</Link>
+							))}
+						</nav>
+					</NavigationMenuItem>
 
-					<div className="hidden md:flex gap-2 items-center">
+					<NavigationMenuItem className="hidden md:flex gap-2 items-center">
 						{NAVBAR.rightLinks?.map(({ href = "", label, target }) => (
 							<Link
 								key={label}
@@ -75,7 +79,7 @@ const Navbar = () => {
 							</Link>
 						))}
 						<ThemeToggle />
-					</div>
+					</NavigationMenuItem>
 				</NavigationMenuList>
 			</NavigationMenu>
 		</header>