fix: fix aria labels and secondary nav vertical separator

hackerspace-ntnu · Nov 21, 2024 · 5fbe74f · 5fbe74f
1 parent 21d3599
commit 5fbe74f
Show file tree

Hide file tree

Showing 7 changed files with 40 additions and 15 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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>