From 5d5bd54aee50a92fef3e096c1c97524c958b1c4f Mon Sep 17 00:00:00 2001
From: skttl <sk@ecreo.dk>
Date: Fri, 12 Jul 2019 21:07:55 +0200
Subject: [PATCH 1/2] 5867 enables tabbing to field-lock-toggler, and adds
 tab-focus styling

---
 .../src/less/components/umb-locked-field.less | 19 ++++++++++++++++---
 .../views/components/umb-locked-field.html    |  8 ++++----
 2 files changed, 20 insertions(+), 7 deletions(-)

diff --git a/src/Umbraco.Web.UI.Client/src/less/components/umb-locked-field.less b/src/Umbraco.Web.UI.Client/src/less/components/umb-locked-field.less
index 8d9ae86ce7..5a14c82210 100644
--- a/src/Umbraco.Web.UI.Client/src/less/components/umb-locked-field.less
+++ b/src/Umbraco.Web.UI.Client/src/less/components/umb-locked-field.less
@@ -6,13 +6,26 @@
 }
 
 .umb-locked-field__wrapper {
-   display: flex;
-   align-items: center;
-   margin-bottom: 5px;
+  display: flex;
+  align-items: center;
+  margin-bottom: 5px;
 }
 
 .umb-locked-field__toggle {
   margin-right: 3px;
+  padding: 0;
+  background: none;
+  border: 0;
+  font-size: inherit;
+  line-height: inherit;
+
+  &:focus {
+    outline: none;
+
+    .tabbing-active & {
+      outline: 2px solid @inputBorderTabFocus;
+    }
+  }
 }
 
 .umb-locked-field__toggle:hover,
diff --git a/src/Umbraco.Web.UI.Client/src/views/components/umb-locked-field.html b/src/Umbraco.Web.UI.Client/src/views/components/umb-locked-field.html
index 624ca8e923..5d5f10218f 100644
--- a/src/Umbraco.Web.UI.Client/src/views/components/umb-locked-field.html
+++ b/src/Umbraco.Web.UI.Client/src/views/components/umb-locked-field.html
@@ -2,13 +2,13 @@
 
     <div class="umb-locked-field__wrapper">
 
-        <a ng-if="locked" href="" ng-click="unlock()" class="umb-locked-field__toggle">
+        <button ng-if="locked" ng-click="unlock()" class="umb-locked-field__toggle">
             <i class="umb-locked-field__lock-icon icon-lock"></i>
-        </a>
+        </button>
 
-        <a ng-if="!locked" href="" ng-click="lock()" class="umb-locked-field__toggle">
+        <button ng-if="!locked" ng-click="lock()" class="umb-locked-field__toggle">
             <i class="umb-locked-field__lock-icon icon-unlocked -unlocked"></i>
-        </a>
+        </button>
 
         <input type="text"
                no-password-manager

From 765d1576e040ace67fc48a0f060556096a717086 Mon Sep 17 00:00:00 2001
From: Sebastiaan Janssen <sebastiaan@umbraco.com>
Date: Mon, 30 Sep 2019 18:35:35 +0200
Subject: [PATCH 2/2] Hide the icon from screen readers

---
 .../src/views/components/umb-locked-field.html                | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/Umbraco.Web.UI.Client/src/views/components/umb-locked-field.html b/src/Umbraco.Web.UI.Client/src/views/components/umb-locked-field.html
index 5d5f10218f..edc96ee1f6 100644
--- a/src/Umbraco.Web.UI.Client/src/views/components/umb-locked-field.html
+++ b/src/Umbraco.Web.UI.Client/src/views/components/umb-locked-field.html
@@ -3,11 +3,11 @@
     <div class="umb-locked-field__wrapper">
 
         <button ng-if="locked" ng-click="unlock()" class="umb-locked-field__toggle">
-            <i class="umb-locked-field__lock-icon icon-lock"></i>
+            <i class="umb-locked-field__lock-icon icon-lock" aria-hidden="true"></i>
         </button>
 
         <button ng-if="!locked" ng-click="lock()" class="umb-locked-field__toggle">
-            <i class="umb-locked-field__lock-icon icon-unlocked -unlocked"></i>
+            <i class="umb-locked-field__lock-icon icon-unlocked -unlocked" aria-hidden="true"></i>
         </button>
 
         <input type="text"