Navbar barrierearm

components/Navbar/Navbar.module.css

@@ -7,6 +7,7 @@
   --nav-font-weight: 600;
   --nav-font-color: #141316;
   --nav-hamburger-icon: var(--nav-font-color);
+  --nav-outline-color: #0060df;
 }
 .noTransition {
   transition: none !important;
@@ -26,11 +27,22 @@
   background-color: var(--nav-bg);
   color: var(--nav-font-color);
 }
+
+.nav a:focus-visible,
+.nav button:focus-visible {
+  outline: 2px solid var(--nav-outline-color);
+  outline-offset: -8px;
+}
 .nav-logo {
   width: auto;
   display: flex;
 }
 
+.nav-logo a:focus-visible {
+  outline: 2px solid var(--nav-outline-color);
+  outline-offset: 2px;
+}
+
 .nav-logo-image {
   width: auto;
   height: 30px;
@@ -179,7 +191,7 @@
   }
 
   .nav-links > li a {
-    padding: 20px 16px;
+    padding: 16px 12px;
   }
 
   .nav-links > li:first-child {

components/Navbar/NavbarSubMenu.module.css

@@ -19,6 +19,11 @@
   background-color: var(--nav-bg);
 }
 
+.nav-submenu > li a:focus-visible {
+  outline: 2px solid var(--nav-outline-color);
+  outline-offset: 2px;
+}
+
 .nav-submenu.open {
   max-height: var(--submenu-h);
   opacity: 1;
@@ -109,6 +114,6 @@
   }
   .nav-sub-toggle {
     position: relative;
-    padding: 16px 8px;
+    padding: 16px 12px;
   }
 }