In main nav & explorer menu, show focus outline within elements

client/scss/components/_main-nav.scss

@@ -119,6 +119,10 @@
     .account {
         display: none;
     }
+
+    *:focus {
+        @include show-focus-outline-inside;
+    }
 }
 
 .submenu-trigger:after {
@@ -311,7 +315,6 @@ body.explorer-open {
 
         .footer-submenu {
             @include transition(max-height 0.2s ease);
-            overflow: hidden;
             max-height: 0;
         }
 

client/scss/overrides/_utilities.focus.scss

@@ -3,7 +3,7 @@
 // without individual components having to explicitly define focus styles.
 // Using !important because we want to enforce only one style is used across the UI.
 .focus-outline-on *:focus {
-    outline: 3px solid $color-focus-outline !important;
+    outline: $focus-outline-width solid $color-focus-outline !important;
 }
 
 .focus-outline-off *:focus {

client/scss/settings/_variables.scss

@@ -97,6 +97,8 @@ $menu-width: 200px;
 $menu-width-max: 320px;
 $mobile-nav-indent: 50px;
 
+$focus-outline-width: 3px;
+
 $nav-wrapper-inner-z-index: 26;
 $draftail-editor-z-index: $nav-wrapper-inner-z-index + 1;
 

client/scss/tools/_mixins.general.scss

@@ -114,3 +114,9 @@
         @content;
     }
 }
+
+// Where included, show the focus outline within focusable items instead of around them.
+// This is useful when focusable items are tightly packed and there is no space in-between.
+@mixin show-focus-outline-inside {
+    outline-offset: -1 * $focus-outline-width;
+}

client/src/components/Explorer/Explorer.scss

@@ -29,6 +29,10 @@ $menu-footer-height: 50px;
         z-index: 500;
         left: $menu-width;
     }
+
+    *:focus {
+        @include show-focus-outline-inside;
+    }
 }
 
 .c-explorer {