Merge pull request #1391 from primer/nav-focus

Improve focus state for .SideNav and .menu

Author: simurai

.changeset/chilly-yaks-hope.md

@@ -0,0 +1,5 @@
+---
+"@primer/css": patch
+---
+
+Improve focus state for .SideNav and .menu

src/navigation/menu.scss

@@ -33,11 +33,15 @@
     &::before { border-bottom-left-radius: $border-radius; }
   }
 
-  &:focus,
+  &:focus {
+    z-index: 1;
+    outline: none;
+    box-shadow: var(--color-state-focus-shadow);
+  }
+
   &:hover {
     text-decoration: none;
     background-color: var(--color-state-hover-secondary-bg);
-    outline: none;
   }
 
   &:active {

src/navigation/sidenav.scss

@@ -43,8 +43,13 @@
 
 // States
 
-.SideNav-item:hover,
 .SideNav-item:focus {
+  z-index: 1;
+  outline: none;
+  box-shadow: var(--color-state-focus-shadow);
+}
+
+.SideNav-item:hover {
   text-decoration: none;
   background-color: var(--color-state-hover-secondary-bg);
   outline: none;