From 6f9bf59e045396fa1acc4edbb3a74c4830da31ee Mon Sep 17 00:00:00 2001
From: Mike Masey <mike.masey@yoyodesign.com>
Date: Sat, 17 Sep 2022 13:45:33 +0100
Subject: [PATCH] fix: focus state for search and help icons

---
 .../components/application/umb-app-header.less     |  4 ++++
 .../components/application/umb-app-header.html     | 14 ++++++--------
 2 files changed, 10 insertions(+), 8 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 8e9fdf902d..a9b9cf6936 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
@@ -75,6 +75,10 @@
     align-items: center;
     height: @appHeaderHeight;
     outline: none;
+
+    .umb-icon {
+      display: block;
+    }
     
     &:focus {
         .tabbing-active & {
diff --git a/src/Umbraco.Web.UI.Client/src/views/components/application/umb-app-header.html b/src/Umbraco.Web.UI.Client/src/views/components/application/umb-app-header.html
index 763ddd20cf..7936a7848e 100644
--- a/src/Umbraco.Web.UI.Client/src/views/components/application/umb-app-header.html
+++ b/src/Umbraco.Web.UI.Client/src/views/components/application/umb-app-header.html
@@ -54,10 +54,9 @@
                                 >Open backoffice search</localize
                             >...
                         </span>
-                        <umb-icon
-                            icon="icon-search"
-                            class="umb-app-header__action-icon"
-                        ></umb-icon>
+                        <span class="umb-app-header__action-icon">
+                            <umb-icon icon="icon-search"></umb-icon>
+                        </span>
                     </button>
                 </li>
                 <li data-element="global-help" class="umb-app-header__action">
@@ -75,10 +74,9 @@
                                 >Open/Close backoffice help</localize
                             >...
                         </span>
-                        <umb-icon
-                            icon="icon-help-alt"
-                            class="umb-app-header__action-icon"
-                        ></umb-icon>
+                        <span class="umb-app-header__action-icon">
+                            <umb-icon icon="icon-help-alt"></umb-icon>
+                        </span>
                     </button>
                 </li>
                 <li data-element="global-user" class="umb-app-header__action">