From 8bac388f736d948391468621ec9ac126c7041f07 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Niels=20Lyngs=C3=B8?= <nsl@umbraco.dk>
Date: Wed, 24 Apr 2019 14:15:02 +0200
Subject: [PATCH 1/2] prettier focus outline for app-header-actions

---
 .../application/umb-app-header.less           | 19 +++++++++++++++++--
 1 file changed, 17 insertions(+), 2 deletions(-)

diff --git a/src/Umbraco.Web.UI.Client/src/less/components/application/umb-app-header.less b/src/Umbraco.Web.UI.Client/src/less/components/application/umb-app-header.less
index 86ead685b8..d4b21e66f0 100644
--- a/src/Umbraco.Web.UI.Client/src/less/components/application/umb-app-header.less
+++ b/src/Umbraco.Web.UI.Client/src/less/components/application/umb-app-header.less
@@ -25,12 +25,27 @@
     height: @appHeaderHeight;
 }
 
-.umb-app-header__action a:hover,
-.umb-app-header__action a:focus {
+.umb-app-header__action a {
     outline: none;
+    &:focus {
+        .tabbing-active & {
+            .umb-app-header__action-icon::after {
+                content: '';
+                position: absolute;
+                z-index:10000;
+                top: -7px;
+                left: -7px;
+                width: 36px;
+                height: 35px;
+                border-radius: 3px;
+                box-shadow: 0 0 2px @pinkLight, inset 0 0 2px 1px @pinkLight;
+            }
+        }
+    }
 }
 
 .umb-app-header__action-icon {
+    position: relative;
     opacity: 0.8;
     color: @white;
     font-size: 22px;

From 30385789c8e98d117ff1df76d4ffc6eff135ac3f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Niels=20Lyngs=C3=B8?= <nsl@umbraco.dk>
Date: Wed, 24 Apr 2019 14:15:24 +0200
Subject: [PATCH 2/2] only show focus-outline on sections if tabbing is active

---
 src/Umbraco.Web.UI.Client/src/less/sections.less | 8 +++-----
 1 file changed, 3 insertions(+), 5 deletions(-)

diff --git a/src/Umbraco.Web.UI.Client/src/less/sections.less b/src/Umbraco.Web.UI.Client/src/less/sections.less
index f7e6e5ec79..5a1de02617 100644
--- a/src/Umbraco.Web.UI.Client/src/less/sections.less
+++ b/src/Umbraco.Web.UI.Client/src/less/sections.less
@@ -65,11 +65,9 @@ ul.sections>li>a:focus .section__name {
 }
 
 ul.sections>li>a:focus .section__name {
-    box-shadow: 0 0 2px @pinkLight, inset 0 0 2px 1px @pinkLight;
-}
-ul.sections>li>a:hover .section__name,
-ul.sections>li.current>a:focus .section__name {
-    box-shadow: none;
+    .tabbing-active & {
+        box-shadow: 0 0 2px @pinkLight, inset 0 0 2px 1px @pinkLight;
+    }
 }