From 1cd79d81af821470de2123e1c6febe2980d98111 Mon Sep 17 00:00:00 2001
From: Jan Skovgaard <1932158+BatJan@users.noreply.github.com>
Date: Thu, 23 Jul 2020 17:28:24 +0200
Subject: [PATCH] umb-confirmation directive: move trashcan into directive and
 address accessibility issues (#8198)

---
 .../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  | 25 +++++++++------
 .../views/components/umb-groups-builder.html  |  8 ++---
 .../src/views/propertyeditors/grid/grid.html  |  8 ++---
 .../listview/layouts.prevalues.html           | 26 +++++++--------
 .../multipletextbox/multipletextbox.html      |  9 ++----
 8 files changed, 66 insertions(+), 52 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 1dcccda481c6..2f682205ad84 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
-                ng-if="vm.promptIsVisible"
+                show="vm.promptIsVisible"
                 direction="left"
+                on-delete="vm.showPrompt()"
                 on-confirm="vm.confirmAction()"
                 on-cancel="vm.hidePrompt()">
             </umb-confirm-action>
@@ -71,17 +71,23 @@ The prompt can be opened in four direction up, down, left or right.</p>
 
     function link(scope, el, attr, ctrl) {
 
-      scope.clickConfirm = function() {
-          if(scope.onConfirm) {
-              scope.onConfirm();
-          }
-      };
+        scope.clickButton = function (event) {
+            if(scope.onDelete) {
+                scope.onDelete({$event: event});
+            }
+        }
 
-      scope.clickCancel = function() {
-          if(scope.onCancel) {
-              scope.onCancel();
-          }
-      };
+        scope.clickConfirm = function() {
+            if(scope.onConfirm) {
+                scope.onConfirm();
+            }
+        };
+
+        scope.clickCancel = function() {
+            if(scope.onCancel) {
+                scope.onCancel();
+            }
+        };
 
     }
 
@@ -91,6 +97,8 @@ 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 f972633bf479..6ecfd520724b 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,3 +1,8 @@
+//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 2929fd229cc8..4bb5232c9e7f 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
@@ -11,10 +11,9 @@
             <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>
 
-                <i class="icon-trash" ng-click="vm.showPrompt($index, tag)" localize="title" title="@buttons_deleteTag"></i>
-
-                <umb-confirm-action ng-if="vm.promptIsVisible === $index"
+                <umb-confirm-action show="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 1b88c9f988d8..ddc237cc34ca 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,22 +1,29 @@
-<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">
+    <button ng-if="onDelete" type="button" class="btn-reset" ng-click="clickButton($event)">
+        <i class="icon-trash" aria-hidden="true"></i>
+        <span class="sr-only">Delete</span>
+     </button>
 
-        <button class="umb_confirm-action__overlay-action -confirm btn-reset" ng-click="clickConfirm()" localize="title" title="@buttons_confirmActionConfirm" type="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()" ng-if="show">
+
+        <button type="button" class="umb_confirm-action__overlay-action -confirm btn-reset" ng-click="clickConfirm()" localize="title" title="@buttons_confirmActionConfirm">
             <i class="icon-check" aria-hidden="true"></i>
             <span class="sr-only">
                 <localize key="buttons_confirmActionConfirm">Confirm</localize>
             </span>
         </button>
 
-        <button class="umb_confirm-action__overlay-action -cancel btn-reset"  ng-click="clickCancel()" localize="title" title="@buttons_confirmActionCancel" type="button">
+        <button type="button" class="umb_confirm-action__overlay-action -cancel btn-reset" ng-click="clickCancel()" localize="title" title="@buttons_confirmActionCancel">
             <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 c46981a6cb77..b1c15b114095 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
-                            ng-if="tab.deletePrompt"
+                            show="tab.deletePrompt"
                             direction="left"
+                            on-delete="togglePrompt(tab)"
                             on-confirm="removeGroup($index)"
                             on-cancel="hidePrompt(tab)">
                         </umb-confirm-action>
@@ -264,10 +264,10 @@
 
                                     <!-- delete property -->
                                     <div ng-if="!property.locked" class="umb-group-builder__property-action">
-                                        <button aria-label="Delete property" class="icon-trash" ng-click="togglePrompt(property)"></button>
                                         <umb-confirm-action
-                                            ng-if="property.deletePrompt"
+                                            show="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 dd3ae63ec7fb..4e45a724bcbf 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
@@ -95,10 +95,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
-                                            ng-if="row.deletePrompt"
+                                            show="row.deletePrompt"
                                             direction="left"
+                                            on-delete="togglePrompt(row)"
                                             on-confirm="removeRow(section, $index)"
                                             on-cancel="hidePrompt(row)">
                                         </umb-confirm-action>
@@ -205,9 +205,9 @@
                                                                           </div>
 
                                                                           <div class="umb-control-tool">
-                                                                              <button class="umb-control-tool-icon icon-trash btn-reset" ng-click="togglePrompt(control)" type="button"></button>
-                                                                              <umb-confirm-action ng-if="control.deletePrompt"
+                                                                              <umb-confirm-action show="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 d0348bb708fd..a77064078259 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
@@ -30,20 +30,18 @@
                    <input ng-if="layout.isSystem !== 1" type="text" ng-model="layout.path" placeholder="Layout path..." class="-full-width-input" />
                </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">
-                       <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-confirm="vm.removeLayout($index, layout)"
-                                           on-cancel="vm.hidePrompt(layout)">
-                       </umb-confirm-action>
-                   </div>
-               </div>
+         <div>
+           <umb-checkbox ng-if="layout.isSystem === 1" model="layout.selected" />
+            <div class="list-view-layout__remove" ng-if="layout.isSystem !== 1">
+                <umb-confirm-action
+                    show="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>
 
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 baee2869242a..461d7a42a15e 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,15 +10,12 @@
 
           <div class="icon-wrapper">
               <i class="icon icon-navigation handle" 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
-                      ng-if="promptIsVisible === $index"
+                      show="promptIsVisible === $index"
                       direction="left"
+                      on-delete="showPrompt($index, item)"
                       on-confirm="remove($index)"
                       on-cancel="hidePrompt()">
                   </umb-confirm-action>