From 4e32ddc5b333d56d55e0a7478c1718fe9ad517af Mon Sep 17 00:00:00 2001
From: BatJan <1932158+BatJan@users.noreply.github.com>
Date: Mon, 31 Aug 2020 23:12:11 +0200
Subject: [PATCH] Convert a to button and fix some margin from the search box
 to the pickable items

---
 src/Umbraco.Web.UI.Client/src/less/forms.less             | 4 ++++
 .../common/infiniteeditors/macropicker/macropicker.html   | 8 ++++----
 2 files changed, 8 insertions(+), 4 deletions(-)

diff --git a/src/Umbraco.Web.UI.Client/src/less/forms.less b/src/Umbraco.Web.UI.Client/src/less/forms.less
index ed5a2c0622..76c5af8819 100644
--- a/src/Umbraco.Web.UI.Client/src/less/forms.less
+++ b/src/Umbraco.Web.UI.Client/src/less/forms.less
@@ -118,6 +118,10 @@ label.control-label, .control-label {
     width: 100%;
 }
 
+.macro-select .form-search {
+    margin: 0 0 10px;
+}
+
 // GENERAL STYLES
 // --------------
 
diff --git a/src/Umbraco.Web.UI.Client/src/views/common/infiniteeditors/macropicker/macropicker.html b/src/Umbraco.Web.UI.Client/src/views/common/infiniteeditors/macropicker/macropicker.html
index fc1bec4ec1..c23aaa7cb9 100644
--- a/src/Umbraco.Web.UI.Client/src/views/common/infiniteeditors/macropicker/macropicker.html
+++ b/src/Umbraco.Web.UI.Client/src/views/common/infiniteeditors/macropicker/macropicker.html
@@ -15,7 +15,7 @@
                 <umb-box-content class="block-form">
                     <div ng-switch="wizardStep">
 
-                        <div ng-switch-when="macroSelect">
+                        <div ng-switch-when="macroSelect" class="macro-select">
 
                             <div class="form-search">
                                 <i class="icon-search"></i>
@@ -32,12 +32,12 @@
                             <ul class="umb-card-grid -three-in-row">
                                 <li ng-repeat="availableItem in macros | orderBy:'name' | filter:searchTerm"
                                     ng-click="selectMacro(availableItem)">
-                                    <a class="umb-card-grid-item" href="" title="{{availableItem.name}}">
+                                    <button class="btn-reset umb-card-grid-item" title="{{availableItem.name}}">
                                         <span>
-                                            <i class="icon-settings-alt"></i>
+                                            <i class="icon-settings-alt" aria-hidden="true"></i>
                                             {{availableItem.name}}
                                         </span>
-                                    </a>
+                                    </button>
                                 </li>
                             </ul>