Use button elements in grid editor (#8887)

Author: bjarnef

src/Umbraco.Web.UI.Client/src/less/buttons.less

@@ -342,7 +342,7 @@ input[type="submit"].btn {
     cursor: pointer;
     color: @ui-icon;
     margin: 0;
-    padding: 5px 10px;
+    padding: 3px 5px;
     width: auto;
     overflow: visible;
     background: transparent;

src/Umbraco.Web.UI.Client/src/less/components/umb-group-builder.less

@@ -355,7 +355,7 @@ input.umb-group-builder__group-title-input:disabled:hover {
     position: relative;
     margin: 5px 0;
 
-    > button {
+    button.btn-icon {
         border: none;
         font-size: 18px;
         position: relative;

src/Umbraco.Web.UI.Client/src/views/propertyeditors/grid/grid.html

@@ -91,7 +91,12 @@
                                <div class="umb-tools row-tools" ng-show="(row === active || row === currentRowWithActiveChild) && !sortMode">
 
                                    <div class="cell-tools-edit row-tool" ng-if="hasSettings">
-                                       <i class="icon icon-settings" title="@grid_settings" localize="title" ng-click="editGridItemSettings(row, 'row')"></i>
+                                       <button type="button" class="btn-icon" ng-click="editGridItemSettings(row, 'row')" localize="title" title="@grid_settings">
+                                           <umb-icon icon="icon-settings" class="icon-settings"></umb-icon>
+                                           <span class="sr-only">
+                                               <localize key="grid_settings">Settings</localize>
+                                           </span>
+                                       </button>
                                    </div>
 
                                     <div class="cell-tools-remove row-tool">
@@ -155,10 +160,10 @@
                                                       </div>
 
                                                       <div class="cell-tools" ng-if="(area === active || area === currentCellWithActiveChild) && !sortMode">
-                                                         <button type="button" aria-haspopup="true" class="btn-icon cell-tool" ng-click="editGridItemSettings(area, 'cell')">
-                                                            <i class="icon-settings" aria-hidden="true"></i>
-                                                            <span class="sr-only">Open column settings</span>
-                                                         </button>
+                                                          <button type="button" aria-haspopup="true" class="btn-icon cell-tool" ng-click="editGridItemSettings(area, 'cell')">
+                                                              <umb-icon icon="icon-settings" class="icon-settings"></umb-icon>
+                                                              <span class="sr-only">Open column settings</span>
+                                                          </button>
                                                       </div>
 
                                                       <div class="umb-cell-inner" ui-sortable="sortableOptionsCell" umb-grid-hack-scope ng-model="area.controls">
@@ -201,7 +206,8 @@
                                                                       <div class="umb-tools" ng-if="control === active">
 
                                                                           <div class="umb-control-tool" ng-if="control.editor.config.settings">
-                                                                              <button type="button" class="umb-control-tool-icon icon-settings btn-icon" ng-click="editGridItemSettings(control, 'control')">
+                                                                              <button type="button" class="umb-control-tool-icon btn-icon" ng-click="editGridItemSettings(control, 'control')">
+                                                                                  <umb-icon icon="icon-settings" class="icon-settings"></umb-icon>
                                                                                   <span class="sr-only">
                                                                                       <localize key="general_edit">Edit</localize>
                                                                                   </span>