From 5fbe74fe3073e6e20756bc8a951eb32a7071d5af Mon Sep 17 00:00:00 2001
From: Sander Eikemo Andreassen <seandreassen04@gmail.com>
Date: Thu, 21 Nov 2024 23:34:29 +0100
Subject: [PATCH] fix: fix aria labels and secondary nav vertical separator

---
 src/components/layout/header/DarkModeMenu.tsx   | 11 ++++++++---
 src/components/layout/header/DesktopNavMenu.tsx |  2 +-
 src/components/layout/header/LocaleMenu.tsx     |  9 +++++++--
 src/components/layout/header/MatrixButton.tsx   |  7 +++++--
 src/components/layout/header/MobileSheet.tsx    |  5 +++--
 src/components/layout/header/Nav.tsx            | 12 +++++++++---
 src/components/layout/header/ProfileMenu.tsx    |  9 +++++++--
 7 files changed, 40 insertions(+), 15 deletions(-)

diff --git a/src/components/layout/header/DarkModeMenu.tsx b/src/components/layout/header/DarkModeMenu.tsx
index 93630ec..57b781b 100644
--- a/src/components/layout/header/DarkModeMenu.tsx
+++ b/src/components/layout/header/DarkModeMenu.tsx
@@ -25,14 +25,19 @@ function DarkModeMenu({ t }: DarkModeMenuProps) {
   return (
     <DropdownMenu>
       <DropdownMenuTrigger asChild>
-        <Button variant='ghost' size='icon' title={t.toggleTheme}>
+        <Button
+          variant='ghost'
+          size='icon'
+          title={t.toggleTheme}
+          aria-label={t.toggleTheme}
+        >
           <SunIcon
             className='dark:-rotate-90 h-[1.2rem] w-[1.2rem] rotate-0 scale-100 transition-all dark:scale-0'
-            aria-hidden
+            aria-hidden='true'
           />
           <MoonIcon
             className='absolute h-[1.2rem] w-[1.2rem] rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100'
-            aria-hidden
+            aria-hidden='true'
           />
         </Button>
       </DropdownMenuTrigger>
diff --git a/src/components/layout/header/DesktopNavMenu.tsx b/src/components/layout/header/DesktopNavMenu.tsx
index efcd664..d412944 100644
--- a/src/components/layout/header/DesktopNavMenu.tsx
+++ b/src/components/layout/header/DesktopNavMenu.tsx
@@ -40,7 +40,7 @@ function DesktopNavMenu({ t }: DesktopNavMenuProps) {
           size='none'
           aria-label={open ? t.close : t.open}
         >
-          <EllipsisIcon aria-hidden />
+          <EllipsisIcon aria-hidden='true' />
         </Button>
       </DropdownMenuTrigger>
       <SecondaryNav
diff --git a/src/components/layout/header/LocaleMenu.tsx b/src/components/layout/header/LocaleMenu.tsx
index d160d5a..fdeafec 100644
--- a/src/components/layout/header/LocaleMenu.tsx
+++ b/src/components/layout/header/LocaleMenu.tsx
@@ -19,8 +19,13 @@ function LocaleMenu({ t }: { t: { changeLocale: string } }) {
   return (
     <DropdownMenu>
       <DropdownMenuTrigger asChild>
-        <Button variant='ghost' size='icon' title={t.changeLocale}>
-          <Globe2Icon className='h-[1.2rem] w-[1.2rem]' aria-hidden />
+        <Button
+          variant='ghost'
+          size='icon'
+          title={t.changeLocale}
+          aria-label={t.changeLocale}
+        >
+          <Globe2Icon className='h-[1.2rem] w-[1.2rem]' aria-hidden='true' />
         </Button>
       </DropdownMenuTrigger>
       <DropdownMenuContent className='min-w-[6rem]' align='end'>
diff --git a/src/components/layout/header/MatrixButton.tsx b/src/components/layout/header/MatrixButton.tsx
index cf53907..f5a0127 100644
--- a/src/components/layout/header/MatrixButton.tsx
+++ b/src/components/layout/header/MatrixButton.tsx
@@ -8,8 +8,11 @@ function MatrixButton() {
 
   return (
     <Button variant='ghost' size='icon' asChild>
-      <Link href='/' title={t('matrix')}>
-        <MessageSquareMoreIcon className='h-[1.2rem] w-[1.2rem]' aria-hidden />
+      <Link href='/' title={t('matrix')} aria-label={t('matrix')}>
+        <MessageSquareMoreIcon
+          className='h-[1.2rem] w-[1.2rem]'
+          aria-hidden='true'
+        />
       </Link>
     </Button>
   );
diff --git a/src/components/layout/header/MobileSheet.tsx b/src/components/layout/header/MobileSheet.tsx
index 20b93dd..b857698 100644
--- a/src/components/layout/header/MobileSheet.tsx
+++ b/src/components/layout/header/MobileSheet.tsx
@@ -48,8 +48,9 @@ function MobileSheet({ className, t }: MobileSheetProps) {
           variant='ghost'
           size='icon'
           title={t.navigationMenu}
+          aria-label={t.navigationMenu}
         >
-          <MenuIcon className='h-5 w-5' aria-hidden />
+          <MenuIcon className='h-5 w-5' aria-hidden='true' />
         </Button>
       </SheetTrigger>
       <SheetContent className='w-72' side='left' close={t.close}>
@@ -74,7 +75,7 @@ function MobileSheet({ className, t }: MobileSheetProps) {
         />
         <Separator />
         <div className='mt-6 ml-2 flex flex-row gap-2'>
-          <Separator orientation='vertical' />
+          <Separator orientation='vertical' className='h-auto' />
           <SecondaryNav
             onClick={() => setOpen(false)}
             t={{
diff --git a/src/components/layout/header/Nav.tsx b/src/components/layout/header/Nav.tsx
index 05377f1..921c38d 100644
--- a/src/components/layout/header/Nav.tsx
+++ b/src/components/layout/header/Nav.tsx
@@ -14,9 +14,15 @@ function Nav({ className, onClick, t }: NavProps) {
   return (
     <nav className='flex items-center'>
       <ul className={className}>
-        <NavItem onClick={onClick} href='/news' t={t.news} />
-        <NavItem onClick={onClick} href='/events' t={t.events} />
-        <NavItem onClick={onClick} href='/about' t={t.about} />
+        <li>
+          <NavItem onClick={onClick} href='/news' t={t.news} />
+        </li>
+        <li>
+          <NavItem onClick={onClick} href='/events' t={t.events} />
+        </li>
+        <li>
+          <NavItem onClick={onClick} href='/about' t={t.about} />
+        </li>
       </ul>
     </nav>
   );
diff --git a/src/components/layout/header/ProfileMenu.tsx b/src/components/layout/header/ProfileMenu.tsx
index 65f9e1c..8fa4263 100644
--- a/src/components/layout/header/ProfileMenu.tsx
+++ b/src/components/layout/header/ProfileMenu.tsx
@@ -14,10 +14,15 @@ function ProfileMenu({ t }: { t: { profile: string; signIn: string } }) {
   return (
     <DropdownMenu>
       <DropdownMenuTrigger asChild>
-        <Button variant='ghost' size='icon' title={t.profile}>
+        <Button
+          variant='ghost'
+          size='icon'
+          title={t.profile}
+          aria-label={t.profile}
+        >
           <UserIcon
             className='h-[1.2rem] w-[1.2rem] text-primary'
-            aria-hidden
+            aria-hidden='true'
           />
         </Button>
       </DropdownMenuTrigger>