From 36d8c4cc48a20506c50799fb4de11ba92e379be8 Mon Sep 17 00:00:00 2001
From: Jan Skovgaard <jaskov@gmail.com>
Date: Mon, 12 Oct 2020 00:07:29 +0200
Subject: [PATCH] Convert a and i to button and umb-icon

---
 .../ContentBlocks/content-blocks.overlay.html | 33 +++++++++++--------
 1 file changed, 19 insertions(+), 14 deletions(-)

diff --git a/src/Umbraco.Community.Contentment/DataEditors/ContentBlocks/content-blocks.overlay.html b/src/Umbraco.Community.Contentment/DataEditors/ContentBlocks/content-blocks.overlay.html
index a4d2591c..e73d7058 100644
--- a/src/Umbraco.Community.Contentment/DataEditors/ContentBlocks/content-blocks.overlay.html
+++ b/src/Umbraco.Community.Contentment/DataEditors/ContentBlocks/content-blocks.overlay.html
@@ -10,7 +10,7 @@
         <div class="umb-editor-header">
             <div class="flex items-center" style="height: 100%;">
                 <div class="umb-editor-header__icon mr2">
-                    <i class="icon large" ng-class="vm.icon"></i>
+                    <umb-icon icon="{{vm.icon}}" class="icon large {{vm.icon}}"></umb-icon>
                 </div>
                 <div class="umb-editor-header__name-and-description">
                     <div class="umb-panel-header-name" ng-bind="vm.title"></div>
@@ -42,32 +42,32 @@
 
                     <ul class="umb-actions umb-actions-child" ng-show="vm.selectBlueprint === false">
                         <li class="umb-action" ng-repeat="item in vm.items | filter:vm.searchTerm">
-                            <a class="umb-action-link" ng-click="vm.select(item)">
-                                <i class="large icon" ng-class="item.icon"></i>
+                            <button type="button" class="btn-reset umb-action-link" ng-click="vm.select(item)">
+                                <umb-icon icon="{{item.icon}}" class="large icon {{item.icon}}"></umb-icon>
                                 <span class="menu-label">
                                     <span ng-bind="item.name"></span>
                                     <small ng-bind="item.description"></small>
                                 </span>
-                            </a>
+                            </button>
                         </li>
                     </ul>
 
                     <ul class="umb-actions umb-actions-child" ng-show="vm.selectBlueprint === true">
                         <li class="umb-action" ng-repeat="blueprint in vm.selectedElementType.blueprints | orderBy:vm.orderBy | filter:vm.searchTerm">
-                            <a class="umb-action-link" ng-click="vm.create(vm.selectedElementType, blueprint)">
-                                <i class="large icon" ng-class="vm.selectedElementType.icon"></i>
+                            <button type="button" class="btn-reset umb-action-link" ng-click="vm.create(vm.selectedElementType, blueprint)">
+                                <umb-icon icon="{{vm.selectedElementType.icon}}" class="large icon {{vm.selectedElementType.icon}}"></umb-icon>
                                 <span class="menu-label">
                                     <span ng-bind="blueprint.name"></span>
                                 </span>
-                            </a>
+                            </button>
                         </li>
                         <li class="umb-action sep" ng-show="vm.blueprintAllowBlank">
-                            <a class="umb-action-link" ng-click="vm.create(vm.selectedElementType)">
-                                <i class="large icon" ng-class="vm.selectedElementType.icon"></i>
+                            <button type="button" class="btn-reset umb-action-link" ng-click="vm.create(vm.selectedElementType)">
+                                <umb-icon icon="{{vm.selectedElementType.icon}}" class="large icon {{vm.selectedElementType.icon}}"></umb-icon>
                                 <span class="menu-label">
                                     <span><localize key="blueprints_blankBlueprint">Blank</localize></span>
                                 </span>
-                            </a>
+                            </button>
                         </li>
                     </ul>
 
@@ -77,7 +77,12 @@
             <umb-box ng-if="vm.selectBlueprint === false && vm.clipboardItems.length > 0">
                 <umb-box-header title-key="content_createFromClipboard">
                     <div style="position:relative;cursor:pointer;" title="Clear clipboard">
-                        <i class="icon-trash" ng-click="vm.showPrompt()"></i>
+                        <button type="button" class="btn-reset" ng-click="vm.showPrompt()">
+                            <umb-icon icon="icon-trash" class="icon-trash"></umb-icon>
+                            <span class="sr-only">
+                                <localize key="actions_delete">Delete</localize>
+                            </span>
+                        </button>
                         <umb-confirm-action ng-if="vm.prompt"
                                             direction="left"
                                             on-confirm="vm.clearClipboard()"
@@ -88,12 +93,12 @@
                 <umb-box-content>
                     <ul class="umb-actions umb-actions-child">
                         <li class="umb-action" ng-repeat="item in vm.clipboardItems | orderBy:vm.orderBy | filter:vm.searchTerm">
-                            <a class="umb-action-link" ng-click="vm.paste(item)">
-                                <i class="large icon" ng-class="item.icon"></i>
+                            <button class="btn-reset umb-action-link" ng-click="vm.paste(item)">
+                                <umb-icon icon="{{item.icon}}" class="large icon {{item.icon}}"></umb-icon>
                                 <span class="menu-label">
                                     <span ng-bind="item.name"></span>
                                 </span>
-                            </a>
+                            </button>
                         </li>
                     </ul>
                 </umb-box-content>