From 720a1b2dd416aa037af5753cc0f875d65f841bb1 Mon Sep 17 00:00:00 2001
From: BatJan <jaskov@gmail.com>
Date: Wed, 30 Oct 2019 20:13:52 +0100
Subject: [PATCH] Change div to button and fix styling

---
 src/Umbraco.Web.UI.Client/src/less/panel.less  |  1 +
 .../components/editor/umb-editor-header.html   | 18 +++++++++++-------
 2 files changed, 12 insertions(+), 7 deletions(-)

diff --git a/src/Umbraco.Web.UI.Client/src/less/panel.less b/src/Umbraco.Web.UI.Client/src/less/panel.less
index bad0ab9715..40c70f5331 100644
--- a/src/Umbraco.Web.UI.Client/src/less/panel.less
+++ b/src/Umbraco.Web.UI.Client/src/less/panel.less
@@ -341,6 +341,7 @@
 .umb-panel-header-icon {
   cursor: pointer;
   margin-right: 5px;
+  margin-top: -6px;
   height: 50px;
   display: flex;
   justify-content: center;
diff --git a/src/Umbraco.Web.UI.Client/src/views/components/editor/umb-editor-header.html b/src/Umbraco.Web.UI.Client/src/views/components/editor/umb-editor-header.html
index c46efb7b74..e1bc01a7a1 100644
--- a/src/Umbraco.Web.UI.Client/src/views/components/editor/umb-editor-header.html
+++ b/src/Umbraco.Web.UI.Client/src/views/components/editor/umb-editor-header.html
@@ -12,13 +12,17 @@
         <div class="flex items-center" style="flex: 1;">
 
             <ng-form data-element="editor-icon" name="iconForm">
-                <div class="umb-panel-header-icon" ng-if="!hideIcon" ng-click="openIconPicker()" ng-class="{'-placeholder': $parent.icon==='' || $parent.icon===null}"
-                     title="{{$parent.icon}}">
-                    <i class="icon {{$parent.icon}}" ng-if="$parent.icon!=='' && $parent.icon!==null"></i>
-                    <div class="umb-panel-header-icon-text" ng-if="$parent.icon==='' || $parent.icon===null">
-                        <localize key="settings_addIcon"></localize>
-                    </div>
-                </div>
+                <button 
+                    type="button" class="umb-panel-header-icon" 
+                    ng-if="!hideIcon" 
+                    ng-click="openIconPicker()" 
+                    ng-class="{'-placeholder': $parent.icon==='' || $parent.icon===null}"
+                    title="{{$parent.icon}}">
+                        <i class="icon {{$parent.icon}}" ng-if="$parent.icon!=='' && $parent.icon!==null" aria-hidden="true"></i>
+                        <div class="umb-panel-header-icon-text" ng-if="$parent.icon==='' || $parent.icon===null">
+                            <localize key="settings_addIcon">Add icon</localize>
+                        </div>
+                </button>
             </ng-form>
 
             <div id="nameField" class="umb-editor-header__name-and-description" style="flex: 1 1 auto;">