svrjs/svrjs-nextjs-website
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Improve accessibility in the navigation bar; direct child of rendered <ul> element are now only <li> elements.

Browse source
This commit is contained in:
Dorian Niemiec 2024-07-29 21:02:58 +02:00
parent a97d64ded5
commit a354ae5de0
1 changed files with 23 additions and 19 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

42
components/shared/Navbar.tsx
View file

@ -28,27 +28,31 @@ const Navbar = () => {
</NavigationMenuItem> </NavigationMenuItem>
{/* Mobile view */} {/* Mobile view */}
<MobileNav /> <NavigationMenuItem className="flex md:hidden">
<MobileNav />
</NavigationMenuItem>
{/* Desktop Menu */} {/* Desktop Menu */}
<nav className="hidden md:flex gap-4"> <NavigationMenuItem className="hidden md:flex">
{NAVBAR.centerLinks?.map(({ href, label, target }) => ( <nav className="hidden md:flex gap-4">
<Link {NAVBAR.centerLinks?.map(({ href, label, target }) => (
key={label} <Link
href={href} key={label}
target={target} href={href}
className={`text-[17px] tracking-tight ${ target={target}
pathname == href ? "bg-muted-foreground/20" : "" className={`text-[17px] tracking-tight ${
} ${buttonVariants({ pathname == href ? "bg-muted-foreground/20" : ""
variant: "ghost", } ${buttonVariants({
})}`} variant: "ghost",
> })}`}
{label} >
</Link> {label}
))} </Link>
</nav> ))}
</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 }) => ( {NAVBAR.rightLinks?.map(({ href = "", label, target }) => (
<Link <Link
key={label} key={label}
@ -75,7 +79,7 @@ const Navbar = () => {
</Link> </Link>
))} ))}
<ThemeToggle /> <ThemeToggle />
</div> </NavigationMenuItem>
</NavigationMenuList> </NavigationMenuList>
</NavigationMenu> </NavigationMenu>
</header> </header>