made accessibility changes

jhilker98 · Oct 1, 2023 · 27c9e77 · 27c9e77
1 parent 414d5bb
commit 27c9e77
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 2 deletions.
diff --git a/src/components/Header.astro b/src/components/Header.astro
@@ -54,25 +54,30 @@ const currentPath = pathname.slice(1); // remove the first "/"
         type="button"
         class="h-full p-3 duration-75 hover:backdrop-brightness-75 inline-flex place-items-center dark:hover:backdrop-brightness-125"
         aria-label="Toggle Dark Mode"
-        @click="darkMode = !darkMode">
+        @click="darkMode = !darkMode"
+        aria-hidden="true">
         <Icon
           name="heroicons/sun-solid"
           class="text-branding-white hidden dark:inline-block w-5 h-5"
+          focusable="false"
         />
         <Icon
           name="heroicons/moon-solid"
           class="text-branding-black dark:hidden inline-block w-5 h-5"
+          focusable="false"
         />
       </button>
       <button
         type="button"
         aria-label="Toggle Mobile Sidebar"
         class="h-full p-3 duration-75 hover:backdrop-brightness-75 inline-flex place-items-center dark:hover:backdrop-brightness-125 lg:hidden"
-        @click="sidebarOpen = !sidebarOpen">
+        @click="sidebarOpen = !sidebarOpen"
+        aria-hidden="true">
         <Icon
           name="heroicons/bars-3-20-solid"
           class="w-5 h-5 transition duration-150 text-branding-black dark:text-branding-white"
           :class="{'rotate-90': sidebarOpen === true}"
+          focusable="false"
         />
         <span class="sr-only">Toggle Mobile Sidebar</span>
       </button>

diff --git a/src/components/MobileSidebar.astro b/src/components/MobileSidebar.astro
@@ -40,6 +40,7 @@ import sidebar from "@assets/img/sidebar.svg";
             href={link.href}
             class="text-branding-white hover:text-blue-400 transition-colors duration-75 group"
             aria-hidden="true"
+            aria-label={link.name}
             title={link.name}>
             <Icon
               name={link.icon}