From f9b49fc5f35dfd331388df76b24b91d6c11c9b2b Mon Sep 17 00:00:00 2001
From: Sebastiaan Janssen <sebastiaan@umbraco.com>
Date: Tue, 13 Oct 2020 15:36:39 +0200
Subject: [PATCH] Revert "umb-confirmation directive: move trashcan into
 directive and address accessibility issues (#8198)"

This reverts commit 1cd79d81af821470de2123e1c6febe2980d98111.

# Conflicts:
#	src/Umbraco.Web.UI.Client/src/views/components/umb-confirm-action.html
#	src/Umbraco.Web.UI.Client/src/views/propertyeditors/listview/layouts.prevalues.html
#	src/Umbraco.Web.UI.Client/src/views/propertyeditors/multipletextbox/multipletextbox.html
---
 .../components/umbconfirmaction.directive.js  | 32 ++++++--------
 .../less/components/umb-confirm-action.less   |  5 ---
 .../components/tags/umb-tags-editor.html      |  5 ++-
 .../views/components/umb-confirm-action.html  | 31 +++++---------
 .../views/components/umb-groups-builder.html  | 10 +++--
 .../src/views/propertyeditors/grid/grid.html  |  8 ++--
 .../listview/layouts.prevalues.html           | 42 ++++++++++---------
 .../multipletextbox/multipletextbox.html      |  9 ++--
 8 files changed, 64 insertions(+), 78 deletions(-)

diff --git a/src/Umbraco.Web.UI.Client/src/common/directives/components/umbconfirmaction.directive.js b/src/Umbraco.Web.UI.Client/src/common/directives/components/umbconfirmaction.directive.js
index 2f682205ad..1dcccda481 100644
--- a/src/Umbraco.Web.UI.Client/src/common/directives/components/umbconfirmaction.directive.js
+++ b/src/Umbraco.Web.UI.Client/src/common/directives/components/umbconfirmaction.directive.js
@@ -14,10 +14,10 @@ The prompt can be opened in four direction up, down, left or right.</p>
     <div ng-controller="My.Controller as vm">
 
         <div class="my-action" style="position:relative;">
+            <i class="icon-trash" ng-click="vm.showPrompt()"></i>
             <umb-confirm-action
-                show="vm.promptIsVisible"
+                ng-if="vm.promptIsVisible"
                 direction="left"
-                on-delete="vm.showPrompt()"
                 on-confirm="vm.confirmAction()"
                 on-cancel="vm.hidePrompt()">
             </umb-confirm-action>
@@ -71,23 +71,17 @@ The prompt can be opened in four direction up, down, left or right.</p>
 
     function link(scope, el, attr, ctrl) {
 
-        scope.clickButton = function (event) {
-            if(scope.onDelete) {
-                scope.onDelete({$event: event});
-            }
-        }
+      scope.clickConfirm = function() {
+          if(scope.onConfirm) {
+              scope.onConfirm();
+          }
+      };
 
-        scope.clickConfirm = function() {
-            if(scope.onConfirm) {
-                scope.onConfirm();
-            }
-        };
-
-        scope.clickCancel = function() {
-            if(scope.onCancel) {
-                scope.onCancel();
-            }
-        };
+      scope.clickCancel = function() {
+          if(scope.onCancel) {
+              scope.onCancel();
+          }
+      };
 
     }
 
@@ -97,8 +91,6 @@ The prompt can be opened in four direction up, down, left or right.</p>
       templateUrl: 'views/components/umb-confirm-action.html',
       scope: {
         direction: "@",
-        show: "<",
-        onDelete: "&?",
         onConfirm: "&",
         onCancel: "&"
       },
diff --git a/src/Umbraco.Web.UI.Client/src/less/components/umb-confirm-action.less b/src/Umbraco.Web.UI.Client/src/less/components/umb-confirm-action.less
index a6548123ac..112194f012 100644
--- a/src/Umbraco.Web.UI.Client/src/less/components/umb-confirm-action.less
+++ b/src/Umbraco.Web.UI.Client/src/less/components/umb-confirm-action.less
@@ -1,8 +1,3 @@
-//WRAPPER 
-.umb_confirm-action {
-    display: inline-block;
-}
-
 // OVERLAY
 .umb_confirm-action__overlay {
     position: absolute;
diff --git a/src/Umbraco.Web.UI.Client/src/views/components/tags/umb-tags-editor.html b/src/Umbraco.Web.UI.Client/src/views/components/tags/umb-tags-editor.html
index cce613782e..6251d0eed1 100644
--- a/src/Umbraco.Web.UI.Client/src/views/components/tags/umb-tags-editor.html
+++ b/src/Umbraco.Web.UI.Client/src/views/components/tags/umb-tags-editor.html
@@ -12,9 +12,10 @@
             <span ng-repeat="tag in vm.viewModel track by $index" class="label label-primary tag" ng-keyup="vm.onKeyUpOnTag(tag, $event)" tabindex="0">
                 <span ng-bind-html="tag"></span>
 
-                <umb-confirm-action show="vm.promptIsVisible === $index"
+                <i class="icon-trash" ng-click="vm.showPrompt($index, tag)" localize="title" title="@buttons_deleteTag"></i>
+
+                <umb-confirm-action ng-if="vm.promptIsVisible === $index"
                                     direction="left"
-                                    on-delete="vm.showPrompt($index, tag)"
                                     on-confirm="vm.removeTag(tag)"
                                     on-cancel="vm.hidePrompt()">
                 </umb-confirm-action>
diff --git a/src/Umbraco.Web.UI.Client/src/views/components/umb-confirm-action.html b/src/Umbraco.Web.UI.Client/src/views/components/umb-confirm-action.html
index 39864c26fd..1b88c9f988 100644
--- a/src/Umbraco.Web.UI.Client/src/views/components/umb-confirm-action.html
+++ b/src/Umbraco.Web.UI.Client/src/views/components/umb-confirm-action.html
@@ -1,31 +1,22 @@
-<div class="umb_confirm-action">
-    <button ng-if="onDelete" type="button" class="btn-icon" ng-click="clickButton($event)" localize="title" title="@general_delete">
-        <umb-icon icon="icon-trash" class="icon-trash"></umb-icon>
-        <span class="sr-only">
-            <localize key="general_delete">Delete</localize>
-        </span>
-    </button>
+<div class="umb_confirm-action__overlay"
+     ng-class="{
+     '-top': direction === 'top',
+     '-right': direction === 'right',
+     '-bottom': direction === 'bottom',
+     '-left': direction === 'left'}"
+     on-outside-click="clickCancel()">
 
-     <div class="umb_confirm-action__overlay"
-        ng-class="{
-        '-top': direction === 'top',
-        '-right': direction === 'right',
-        '-bottom': direction === 'bottom',
-        '-left': direction === 'left'}"
-        on-outside-click="clickCancel()" ng-if="show">
-
-        <button type="button" class="btn-reset umb_confirm-action__overlay-action -confirm" ng-click="clickConfirm()" localize="title" title="@buttons_confirmActionConfirm">
-            <umb-icon icon="icon-check" class="icon-check"></umb-icon>
+        <button class="umb_confirm-action__overlay-action -confirm btn-reset" ng-click="clickConfirm()" localize="title" title="@buttons_confirmActionConfirm" type="button">
+            <i class="icon-check" aria-hidden="true"></i>
             <span class="sr-only">
                 <localize key="buttons_confirmActionConfirm">Confirm</localize>
             </span>
         </button>
 
-        <button type="button" class="btn-reset umb_confirm-action__overlay-action -cancel" ng-click="clickCancel()" localize="title" title="@buttons_confirmActionCancel">
-            <umb-icon icon="icon-delete" class="icon-delete"></umb-icon>
+        <button class="umb_confirm-action__overlay-action -cancel btn-reset"  ng-click="clickCancel()" localize="title" title="@buttons_confirmActionCancel" type="button">
+            <i class="icon-delete" aria-hidden="true"></i>
             <span class="sr-only">
                 <localize key="buttons_confirmActionCancel">Cancel</localize>
             </span>
         </button>
-    </div>
 </div>
diff --git a/src/Umbraco.Web.UI.Client/src/views/components/umb-groups-builder.html b/src/Umbraco.Web.UI.Client/src/views/components/umb-groups-builder.html
index d722fba7be..2fdef77928 100644
--- a/src/Umbraco.Web.UI.Client/src/views/components/umb-groups-builder.html
+++ b/src/Umbraco.Web.UI.Client/src/views/components/umb-groups-builder.html
@@ -101,10 +101,10 @@
                     </ng-form>
 
                     <div class="umb-group-builder__group-remove" ng-if="!sortingMode && canRemoveGroup(tab)">
+                        <i class="icon-trash" ng-click="togglePrompt(tab)"></i>
                         <umb-confirm-action
-                            show="tab.deletePrompt"
+                            ng-if="tab.deletePrompt"
                             direction="left"
-                            on-delete="togglePrompt(tab)"
                             on-confirm="removeGroup($index)"
                             on-cancel="hidePrompt(tab)">
                         </umb-confirm-action>
@@ -266,10 +266,12 @@
 
                                     <!-- delete property -->
                                     <div ng-if="!property.locked" class="umb-group-builder__property-action">
+                                        <button aria-label="Delete property" class="btn-icon" ng-click="togglePrompt(property)">
+                                            <umb-icon icon="icon-trash" class="icon-trash"></umb-icon>
+                                        </button>
                                         <umb-confirm-action
-                                            show="property.deletePrompt"
+                                            ng-if="property.deletePrompt"
                                             direction="left"
-                                            on-delete="togglePrompt(property)"
                                             on-confirm="deleteProperty(tab, $index)"
                                             on-cancel="hidePrompt(property)">
                                         </umb-confirm-action>
diff --git a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/grid/grid.html b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/grid/grid.html
index 52e1941cda..5ceb7ded4a 100644
--- a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/grid/grid.html
+++ b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/grid/grid.html
@@ -100,10 +100,10 @@
                                    </div>
 
                                     <div class="cell-tools-remove row-tool">
+                                        <button class="icon-trash btn-reset" ng-click="togglePrompt(row)" type="button"></button>
                                         <umb-confirm-action
-                                            show="row.deletePrompt"
+                                            ng-if="row.deletePrompt"
                                             direction="left"
-                                            on-delete="togglePrompt(row)"
                                             on-confirm="removeRow(section, $index)"
                                             on-cancel="hidePrompt(row)">
                                         </umb-confirm-action>
@@ -215,9 +215,9 @@
                                                                           </div>
 
                                                                           <div class="umb-control-tool">
-                                                                              <umb-confirm-action show="control.deletePrompt"
+                                                                              <button class="umb-control-tool-icon icon-trash btn-reset" ng-click="togglePrompt(control)" type="button"></button>
+                                                                              <umb-confirm-action ng-if="control.deletePrompt"
                                                                                                   direction="left"
-                                                                                                  on-delete="togglePrompt(control)"
                                                                                                   on-confirm="removeControl(area, $index)"
                                                                                                   on-cancel="hidePrompt(control)">
                                                                               </umb-confirm-action>
diff --git a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/listview/layouts.prevalues.html b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/listview/layouts.prevalues.html
index c33c3e840e..4527458d16 100644
--- a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/listview/layouts.prevalues.html
+++ b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/listview/layouts.prevalues.html
@@ -2,9 +2,9 @@
 
    <div class="list-view-layouts-container">
 
-   <div class="list-view-layouts" ui-sortable="vm.layoutsSortableOptions" ng-model="model.value">
+       <div class="list-view-layouts" ui-sortable="vm.layoutsSortableOptions" ng-model="model.value">
 
-      <div class="list-view-layout" ng-repeat="layout in model.value">
+           <div class="list-view-layout" ng-repeat="layout in model.value">
 
                <i class="icon-navigation list-view-layout__sort-handle" aria-hidden="true" aria-label="Sort"></i>
 
@@ -14,43 +14,45 @@
                        <span class="list-view-layout__icon">
                            <i class="{{layout.icon}}" aria-hidden="true"></i>
                        </span>
-            </button>
+                   </button>
 
-            <div ng-if="layout.isSystem === 1" class="list-view-layout__icon">
+                   <div ng-if="layout.isSystem === 1" class="list-view-layout__icon">
                        <i class="{{layout.icon}}" aria-hidden="true"></i>
-            </div>
+                   </div>
 
-         </div>
+               </div>
 
-         <div class="list-view-layout__name">
-            <input ng-if="layout.isSystem !== 1" type="text" ng-model="layout.name" placeholder="Name..." class="-full-width-input" focus-when="{{ vm.focusLayoutName }}" />
-                   <span ng-if="layout.isSystem === 1" class="list-view-layout__name-text">{{ layout.name }}</span>
-            <span ng-if="layout.isSystem === 1" class="list-view-layout__system">(system layout)</span>
-         </div>
+               <div class="list-view-layout__name">
+                   <input ng-if="layout.isSystem !== 1" type="text" ng-model="layout.name" placeholder="Name..." class="-full-width-input" focus-when="{{ vm.focusLayoutName }}" />
+                   <span ng-if="layout.isSystem === 1" class="list-view-layout__name-text">{{layout.name}}</span>
+                   <span ng-if="layout.isSystem === 1" class="list-view-layout__system">(system layout)</span>
+               </div>
 
-         <div class="list-view-layout__path">
-            <input ng-if="layout.isSystem !== 1" type="text" ng-model="layout.path" placeholder="Layout path..." class="-full-width-input" />
-         </div>
+               <div class="list-view-layout__path">
+                   <input ng-if="layout.isSystem !== 1" type="text" ng-model="layout.path" placeholder="Layout path..." class="-full-width-input" />
+               </div>
 
-         <div>
+               <div>
                    <umb-checkbox ng-if="layout.isSystem === 1" model="layout.selected"></umb-checkbox>
 
                    <div class="list-view-layout__remove" ng-if="layout.isSystem !== 1">
-                       <umb-confirm-action show="layout.deletePrompt"
+                       <button type="button" class="btn-icon" ng-click="vm.showPrompt(layout)" aria-label="Remove">
+                           <i class="icon-trash" aria-hidden="true"></i>
+                       </button>
+                       <umb-confirm-action ng-if="layout.deletePrompt"
                                            direction="left"
-                                           on-delete="vm.showPrompt(layout)"
                                            on-confirm="vm.removeLayout($index, layout)"
                                            on-cancel="vm.hidePrompt(layout)">
                        </umb-confirm-action>
                    </div>
-         </div>
+               </div>
 
-      </div>
+           </div>
 
        </div>
 
       <button type="button" class="list-view-add-layout mt2" ng-click="vm.addLayout()">Add layout</button>
 
-    </div>
+   </div>
 
 </div>
diff --git a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/multipletextbox/multipletextbox.html b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/multipletextbox/multipletextbox.html
index 6a9826ac3c..d1c202b867 100644
--- a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/multipletextbox/multipletextbox.html
+++ b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/multipletextbox/multipletextbox.html
@@ -10,12 +10,15 @@
 
           <div class="icon-wrapper">
               <i class="icon icon-navigation handle" aria-hidden="true" localize="title" title="@general_move"></i>
-
+  
               <div class="umb-multiple-textbox__confirm" ng-show="model.value.length > model.config.min">
+                  <button type="button" class="umb-multiple-textbox__confirm-action" ng-click="showPrompt($index, item)" localize="title" title="@content_removeTextBox">
+                      <i class="icon-trash" aria-hidden="true"></i>
+                  </button>
+  
                   <umb-confirm-action
-                      show="promptIsVisible === $index"
+                      ng-if="promptIsVisible === $index"
                       direction="left"
-                      on-delete="showPrompt($index, item)"
                       on-confirm="remove($index)"
                       on-cancel="hidePrompt()">
                   </umb-confirm-action>