From 0d22763e0ab6bdf2f839a24a08e47c539813c0df Mon Sep 17 00:00:00 2001
From: Thibaud Colas <thibaudcolas@gmail.com>
Date: Thu, 23 May 2019 17:51:29 +0100
Subject: [PATCH] In main nav & explorer menu, show focus outline within
 elements

---
 client/scss/components/_main-nav.scss        | 5 ++++-
 client/scss/overrides/_utilities.focus.scss  | 2 +-
 client/scss/settings/_variables.scss         | 2 ++
 client/scss/tools/_mixins.general.scss       | 6 ++++++
 client/src/components/Explorer/Explorer.scss | 4 ++++
 5 files changed, 17 insertions(+), 2 deletions(-)

diff --git a/client/scss/components/_main-nav.scss b/client/scss/components/_main-nav.scss
index 008609ea1..6dd394a65 100644
--- a/client/scss/components/_main-nav.scss
+++ b/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;
         }
 
diff --git a/client/scss/overrides/_utilities.focus.scss b/client/scss/overrides/_utilities.focus.scss
index 7125682b6..e53f1aaf6 100644
--- a/client/scss/overrides/_utilities.focus.scss
+++ b/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 {
diff --git a/client/scss/settings/_variables.scss b/client/scss/settings/_variables.scss
index 87c3c4ed3..7c55f7029 100644
--- a/client/scss/settings/_variables.scss
+++ b/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;
 
diff --git a/client/scss/tools/_mixins.general.scss b/client/scss/tools/_mixins.general.scss
index 0262fded9..1b826f489 100644
--- a/client/scss/tools/_mixins.general.scss
+++ b/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;
+}
diff --git a/client/src/components/Explorer/Explorer.scss b/client/src/components/Explorer/Explorer.scss
index a97ad482b..a589ba191 100644
--- a/client/src/components/Explorer/Explorer.scss
+++ b/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 {