From 838190b8e5f3621d2ae06541774a8dcb0e573455 Mon Sep 17 00:00:00 2001
From: Firq <firelp42@gmail.com>
Date: Wed, 3 Jan 2024 20:39:58 +0100
Subject: [PATCH] Fixed Navbar audit

---
 src/components/navbar.astro      | 20 +++++++++++---------
 src/components/navbarEntry.astro |  8 ++++++--
 src/layouts/Layout.astro         | 28 +++++++++++++++++++++++++++-
 3 files changed, 44 insertions(+), 12 deletions(-)

diff --git a/src/components/navbar.astro b/src/components/navbar.astro
index 6da6b7c..e300e59 100644
--- a/src/components/navbar.astro
+++ b/src/components/navbar.astro
@@ -6,23 +6,25 @@ const hamburger_src_url = `url("${hamburger.src}")`
 ---
 
 <header>
-  <a href="/" rel="noopener noreferrer" aria-label="Home">
+  <a href="/" rel="noopener noreferrer" aria-label="Home" role="navigation">
     <Image src={logo} alt="Website Logo" />
+    <span class="visually-hidden">Website Logo</span>
   </a>
   <ul class="desktop">
-    <slot />
+    <slot name="desktop" />
   </ul>
   <button
     class="mobile"
     aria-label="Navigation Button"
     tabindex="0"
     onclick="this.focus()"
+    role="navigation"
   >
     <ul>
-      <slot />
+      <slot name="mobile" />
     </ul>
     <div class="placeholder"></div>
-    <div class="hamburger-menu"></div>
+    <div class="hamburger-menu" role="navigation"></div>
   </button>
 </header>
 
@@ -39,7 +41,7 @@ const hamburger_src_url = `url("${hamburger.src}")`
     line-height: 1.5em;
   }
   header > a {
-    padding-left: 16px;
+    margin-left: 16px;
     padding-top: 8px;
     display: block;
     height: 48px;
@@ -113,12 +115,12 @@ const hamburger_src_url = `url("${hamburger.src}")`
   .hamburger-menu {
     mask: var(--hamburger_src_url) no-repeat center;
     background-color: white;
-    width: 2em;
-    height: 2em;
+    width: 2rem;
+    height: 2rem;
     position: static;
     align-self: flex-start;
-    padding-right: 1em;
-    padding-top: 2.5em;
+    margin-right: 1rem;
+    margin-top: 1rem;
   }
 
   @media (min-width: 1140px) {
diff --git a/src/components/navbarEntry.astro b/src/components/navbarEntry.astro
index ae15082..aaea6e1 100644
--- a/src/components/navbarEntry.astro
+++ b/src/components/navbarEntry.astro
@@ -1,12 +1,13 @@
 ---
 export interface Props {
   currentPage?: string
+  navtype: 'mobile' | 'desktop'
   link: string
   text: string
   icon: ImageMetadata
 }
 
-const { icon, text, link, currentPage } = Astro.props
+const { icon, text, link, navtype, currentPage } = Astro.props
 
 let currPage = ''
 const slug = link.replace(new RegExp('/', 'g'), '')
@@ -19,6 +20,8 @@ if (currentPage === slug) {
 
 const icon_src_url = `url("${icon.src}")`
 const fulllink = `/${slug}`
+
+let extraattributes = navtype === 'mobile' ? { tabindex: '0' } : {}
 ---
 
 <li>
@@ -27,7 +30,8 @@ const fulllink = `/${slug}`
     rel="noopener noreferrer"
     aria-label={text}
     class={currPage}
-    tabindex="0"
+    role="navigation"
+    {...extraattributes}
   >
     <div class="icon"></div>
     {text}
diff --git a/src/layouts/Layout.astro b/src/layouts/Layout.astro
index 996d772..c889407 100644
--- a/src/layouts/Layout.astro
+++ b/src/layouts/Layout.astro
@@ -63,7 +63,22 @@ const mapped_navdata = navdata.map((item) => ({
     <Navbar>
       {
         mapped_navdata.map((item) => (
-          <NavbarEntry currentPage={currentpage} {...item} />
+          <NavbarEntry
+            currentPage={currentpage}
+            navtype="desktop"
+            {...item}
+            slot="desktop"
+          />
+        ))
+      }
+      {
+        mapped_navdata.map((item) => (
+          <NavbarEntry
+            currentPage={currentpage}
+            navtype="mobile"
+            {...item}
+            slot="mobile"
+          />
         ))
       }
     </Navbar>
@@ -88,4 +103,15 @@ const mapped_navdata = navdata.map((item) => ({
     background: var(--c-lightgray);
     margin: 0px;
   }
+
+  .visually-hidden {
+    border: 0;
+    clip: rect(0 0 0 0);
+    height: 1px;
+    margin: -1px;
+    overflow: hidden;
+    padding: 0;
+    position: absolute;
+    width: 1px;
+  }
 </style>