From 8c954ef4339e7588de3273ff76ba4cc76f983a1a Mon Sep 17 00:00:00 2001
From: Mike <mike.masey@yoyodesign.com>
Date: Sat, 20 Apr 2019 20:15:33 +0100
Subject: [PATCH] feat: add clear tabbed focus state to form inputs

---
 src/Umbraco.Web.UI.Client/src/less/forms.less     | 5 ++++-
 src/Umbraco.Web.UI.Client/src/less/variables.less | 1 +
 2 files changed, 5 insertions(+), 1 deletion(-)

diff --git a/src/Umbraco.Web.UI.Client/src/less/forms.less b/src/Umbraco.Web.UI.Client/src/less/forms.less
index dc63baf335..966fc1fb11 100644
--- a/src/Umbraco.Web.UI.Client/src/less/forms.less
+++ b/src/Umbraco.Web.UI.Client/src/less/forms.less
@@ -250,7 +250,10 @@ input[type="color"],
   &:focus {
     border-color: @inputBorderFocus;
     outline: 0;
-    outline: none \9; /* IE6-9 */
+
+    .tabbing-active & {
+        outline: 2px solid @inputBorderTabFocus;
+    }
   }
 }
 
diff --git a/src/Umbraco.Web.UI.Client/src/less/variables.less b/src/Umbraco.Web.UI.Client/src/less/variables.less
index 55be161cf8..0cee66e814 100644
--- a/src/Umbraco.Web.UI.Client/src/less/variables.less
+++ b/src/Umbraco.Web.UI.Client/src/less/variables.less
@@ -376,6 +376,7 @@
 @inputBackground:               @white;
 @inputBorder:                   @gray-8;
 @inputBorderFocus:              @gray-7;
+@inputBorderTabFocus:           @blue;
 @inputBorderRadius:             0;
 @inputDisabledBackground:       @gray-10;
 @formActionsBackground:         @gray-9;