From 538b867447c94d70e428fe23b8972d6e3d3fafdb Mon Sep 17 00:00:00 2001
From: Bjarne Fyrstenborg <bjarne_fyrstenborg@hotmail.com>
Date: Fri, 31 Jul 2020 10:24:20 +0200
Subject: [PATCH] Buttons cleanup (#8529)

---
 .../lib/bootstrap/less/pager.less             | 24 +++++++++-----
 .../lib/bootstrap/less/pagination.less        | 31 ++++++++++++++-----
 .../src/less/components/umb-pagination.less   |  8 +++--
 .../src/views/components/umb-pagination.html  | 24 +++++++++-----
 .../src/views/partialviews/create.html        | 18 +++++------
 .../listview/icon.prevalues.html              |  2 +-
 .../propertyeditors/listview/listview.html    | 13 ++++----
 7 files changed, 78 insertions(+), 42 deletions(-)

diff --git a/src/Umbraco.Web.UI.Client/lib/bootstrap/less/pager.less b/src/Umbraco.Web.UI.Client/lib/bootstrap/less/pager.less
index 1476188297..718ade757e 100644
--- a/src/Umbraco.Web.UI.Client/lib/bootstrap/less/pager.less
+++ b/src/Umbraco.Web.UI.Client/lib/bootstrap/less/pager.less
@@ -13,6 +13,7 @@
   display: inline;
 }
 .pager li > a,
+.pager li > button,
 .pager li > span {
   display: inline-block;
   padding: 5px 14px;
@@ -21,23 +22,30 @@
   .border-radius(15px);
 }
 .pager li > a:hover,
-.pager li > a:focus {
-  text-decoration: none;
-  background-color: #f5f5f5;
+.pager li > a:focus,
+.pager li > button:hover,
+.pager li > button:focus {
+    text-decoration: none;
+    background-color: #f5f5f5;
 }
 .pager .next > a,
+.pager .next > button,
 .pager .next > span {
   float: right;
 }
 .pager .previous > a,
+.pager .previous > button,
 .pager .previous > span {
-  float: left;
+    float: left;
 }
 .pager .disabled > a,
 .pager .disabled > a:hover,
 .pager .disabled > a:focus,
+.pager .disabled > button,
+.pager .disabled > button:hover,
+.pager .disabled > button:focus
 .pager .disabled > span {
-  color: @grayLight;
-  background-color: #fff;
-  cursor: default;
-}
\ No newline at end of file
+    color: @grayLight;
+    background-color: #fff;
+    cursor: default;
+}
diff --git a/src/Umbraco.Web.UI.Client/lib/bootstrap/less/pagination.less b/src/Umbraco.Web.UI.Client/lib/bootstrap/less/pagination.less
index 6f6e6ac7de..ae10700eb3 100644
--- a/src/Umbraco.Web.UI.Client/lib/bootstrap/less/pagination.less
+++ b/src/Umbraco.Web.UI.Client/lib/bootstrap/less/pagination.less
@@ -21,6 +21,7 @@
   display: inline; // Remove list-style and block-level defaults
 }
 .pagination ul > li > a,
+.pagination ul > li > button,
 .pagination ul > li > span {
   float: left; // Collapse white-space
   padding: 4px 12px;
@@ -32,29 +33,38 @@
 }
 .pagination ul > li > a:hover,
 .pagination ul > li > a:focus,
+.pagination ul > li > button:hover,
+.pagination ul > li > button:focus,
 .pagination ul > .active > a,
+.pagination ul > .active > button,
 .pagination ul > .active > span {
-  background-color: @paginationActiveBackground;
+    background-color: @paginationActiveBackground;
 }
 .pagination ul > .active > a,
+.pagination ul > .active > button,
 .pagination ul > .active > span {
-  color: @grayLight;
-  cursor: default;
+    color: @grayLight;
+    cursor: default;
 }
 .pagination ul > .disabled > span,
 .pagination ul > .disabled > a,
 .pagination ul > .disabled > a:hover,
-.pagination ul > .disabled > a:focus {
-  color: @grayLight;
-  background-color: transparent;
-  cursor: default;
+.pagination ul > .disabled > a:focus,
+.pagination ul > .disabled > button,
+.pagination ul > .disabled > button:hover,
+.pagination ul > .disabled > button:focus {
+    color: @grayLight;
+    background-color: transparent;
+    cursor: default;
 }
 .pagination ul > li:first-child > a,
+.pagination ul > li:first-child > button,
 .pagination ul > li:first-child > span {
   border-left-width: 1px;
   .border-left-radius(@baseBorderRadius);
 }
 .pagination ul > li:last-child > a,
+.pagination ul > li:last-child > button,
 .pagination ul > li:last-child > span {
   .border-right-radius(@baseBorderRadius);
 }
@@ -77,15 +87,18 @@
 // Large
 .pagination-large {
   ul > li > a,
+  ul > li > button,
   ul > li > span {
     padding: @paddingLarge;
     font-size: @fontSizeLarge;
   }
   ul > li:first-child > a,
+  ul > li:first-child > button,
   ul > li:first-child > span {
     .border-left-radius(@borderRadiusLarge);
   }
   ul > li:last-child > a,
+  ul > li:last-child > button,
   ul > li:last-child > span {
     .border-right-radius(@borderRadiusLarge);
   }
@@ -95,10 +108,12 @@
 .pagination-mini,
 .pagination-small {
   ul > li:first-child > a,
+  ul > li:first-child > button,
   ul > li:first-child > span {
     .border-left-radius(@borderRadiusSmall);
   }
   ul > li:last-child > a,
+  ul > li:last-child > button,
   ul > li:last-child > span {
     .border-right-radius(@borderRadiusSmall);
   }
@@ -107,6 +122,7 @@
 // Small
 .pagination-small {
   ul > li > a,
+  ul > li > button,
   ul > li > span {
     padding: @paddingSmall;
     font-size: @fontSizeSmall;
@@ -115,6 +131,7 @@
 // Mini
 .pagination-mini {
   ul > li > a,
+  ul > li > button,
   ul > li > span {
     padding: @paddingMini;
     font-size: @fontSizeMini;
diff --git a/src/Umbraco.Web.UI.Client/src/less/components/umb-pagination.less b/src/Umbraco.Web.UI.Client/src/less/components/umb-pagination.less
index 8d3d563cab..f44aa645c4 100644
--- a/src/Umbraco.Web.UI.Client/src/less/components/umb-pagination.less
+++ b/src/Umbraco.Web.UI.Client/src/less/components/umb-pagination.less
@@ -1,3 +1,5 @@
-.umb-pagination ul {
-    box-shadow: none;
-}
\ No newline at end of file
+.umb-pagination {
+    ul {
+        box-shadow: none;
+    }
+}
diff --git a/src/Umbraco.Web.UI.Client/src/views/components/umb-pagination.html b/src/Umbraco.Web.UI.Client/src/views/components/umb-pagination.html
index fae431a11a..f3c6c98cf9 100644
--- a/src/Umbraco.Web.UI.Client/src/views/components/umb-pagination.html
+++ b/src/Umbraco.Web.UI.Client/src/views/components/umb-pagination.html
@@ -2,24 +2,34 @@
     <div ng-show="pagination.length > 1">
         <ul>
             <li ng-class="{disabled:pageNumber <= 1}">
-                <a href="#" ng-click="prev()" prevent-default>
+                <button type="button"
+                        class="btn-reset"
+                        ng-disabled="pageNumber <= 1"
+                        ng-click="prev()">
                     <localize key="general_previous">Previous</localize>
-                </a>
+                </button>
             </li>
 
             <li ng-repeat="pgn in pagination track by $index"
                 ng-class="{active:pgn.isActive}">
 
-                <a href="#" ng-click="goToPage(pgn.val - 1)" prevent-default
-                   ng-bind="pgn.name ? pgn.name : pgn.val"
-                   ng-if="pgn.val != '...'"></a>
+                <button type="button"
+                        class="btn-reset"
+                        ng-click="goToPage(pgn.val - 1)"
+                        ng-bind="pgn.name ? pgn.name : pgn.val"
+                        ng-disabled="pgn.val === pageNumber"
+                        ng-if="pgn.val != '...'">
+                </button>
                 <span ng-bind="pgn.val" ng-if="pgn.val == '...'"></span>
             </li>
 
             <li ng-class="{disabled:pageNumber >= totalPages}">
-                <a href="#" ng-click="next()" prevent-default>
+                <button type="button"
+                        class="btn-reset"
+                        ng-disabled="pageNumber >= totalPages"
+                        ng-click="next()">
                     <localize key="general_next">Next</localize>
-                </a>
+                </button>
             </li>
         </ul>
     </div>
diff --git a/src/Umbraco.Web.UI.Client/src/views/partialviews/create.html b/src/Umbraco.Web.UI.Client/src/views/partialviews/create.html
index 661bc615f6..6fbb69fa80 100644
--- a/src/Umbraco.Web.UI.Client/src/views/partialviews/create.html
+++ b/src/Umbraco.Web.UI.Client/src/views/partialviews/create.html
@@ -10,20 +10,20 @@
             <div ng-if="!vm.showSnippets">
                 <ul class="umb-actions umb-actions-child">
                     <li class="umb-action">
-                        <button href="" class="umb-action-link umb-outline btn-reset" ng-click="vm.createPartialView()" umb-auto-focus>
-                            <i class="large icon icon-article"></i>
+                        <button type="button" class="umb-action-link umb-outline btn-reset" ng-click="vm.createPartialView()" umb-auto-focus>
+                            <i class="large icon icon-article" aria-hidden="true"></i>
                             <span class="menu-label"><localize key="create_newEmptyPartialView">New empty partial view</localize></span>
                         </button>
                     </li>
                     <li class="umb-action">
-                        <button href="" class="umb-action-link umb-outline btn-reset" ng-click="vm.showCreateFromSnippet()">
-                            <i class="large icon icon-article"></i>
+                        <button type="button" class="umb-action-link umb-outline btn-reset" ng-click="vm.showCreateFromSnippet()">
+                            <i class="large icon icon-article" aria-hidden="true"></i>
                             <span class="menu-label"><localize key="create_newPartialViewFromSnippet">New partial view from snippet</localize>...</span>
                         </button>
                     </li>
                     <li class="umb-action">
-                        <button href="" class="umb-action-link umb-outline btn-reset" ng-click="vm.showCreateFolder()">
-                            <i class="large icon icon-folder"></i>
+                        <button type="button" class="umb-action-link umb-outline btn-reset" ng-click="vm.showCreateFolder()">
+                            <i class="large icon icon-folder" aria-hidden="true"></i>
                             <span class="menu-label"><localize key="general_folder"></localize>...</span>
                         </button>
                     </li>
@@ -34,8 +34,8 @@
             <div ng-if="vm.showSnippets">
                 <ul class="umb-actions umb-actions-child">
                     <li class="umb-action" ng-repeat="snippet in vm.snippets">
-                        <button href="" class="umb-action-link umb-outline btn-reset" ng-click="vm.createPartialView(snippet)" style="padding-top: 6px; padding-bottom: 6px;">
-                            <i class="icon-article icon" style="font-size: 20px;"></i>
+                        <button type="button" class="umb-action-link umb-outline btn-reset" ng-click="vm.createPartialView(snippet)" style="padding-top: 6px; padding-bottom: 6px;">
+                            <i class="icon-article icon" aria-hidden="true" style="font-size: 20px;"></i>
                             <span class="menu-label" style="margin-left: 0; padding-left: 5px;">{{ snippet.name }}</span>
                         </button>
                     </li>
@@ -68,7 +68,7 @@
 
     <!-- Dialog footer -->
     <div class="umb-dialog-footer btn-toolbar umb-btn-toolbar" ng-hide="vm.creatingFolder">
-        <button class="btn btn-info" ng-click="vm.close()">
+        <button type="button" class="btn btn-info" ng-click="vm.close()">
             <localize key="buttons_somethingElse">Do something else</localize>
         </button>
     </div>
diff --git a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/listview/icon.prevalues.html b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/listview/icon.prevalues.html
index 2d3d4eeae2..8a11cb516d 100644
--- a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/listview/icon.prevalues.html
+++ b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/listview/icon.prevalues.html
@@ -2,7 +2,7 @@
     <ng-form data-element="editor-icon" name="iconForm">
         <div class="umb-panel-header-icon" ng-if="!hideIcon" ng-click="openIconPicker()" ng-class="{'-placeholder': model.value==='' || model.value===null}"
              title="{{model.value}}">
-            <i class="icon {{model.value}}" ng-if="model.value!=='' && model.value!==null"></i>
+            <i class="icon {{model.value}}" aria-hidden="true" ng-if="model.value!=='' && model.value!==null"></i>
             <div class="umb-panel-header-icon-text" ng-if="model.value==='' || model.value===null">
                 <localize key="settings_addIcon"></localize>
             </div>
diff --git a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/listview/listview.html b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/listview/listview.html
index 2eed825c7a..05a294cc1c 100644
--- a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/listview/listview.html
+++ b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/listview/listview.html
@@ -14,29 +14,28 @@
 
                     <!-- Renders when it's only possible to create one specific document type for, which no blueprint exists-->
                    <div class="btn-group" ng-show="createAllowedButtonSingle">
-                       <button type="button" class="btn btn-outline umb-outline" ng-click="createBlank(entityType,listViewAllowedTypes[0].alias)" prevent-default>
+                       <button type="button" class="btn btn-outline umb-outline" ng-click="createBlank(entityType,listViewAllowedTypes[0].alias)">
                            <localize key="actions_create">Create</localize> {{listViewAllowedTypes[0].name}}
                        </button>
                    </div>
 
                    <!-- Renders when it's only possible to create one specific document type for which a blueprint exits-->
                    <div class="btn-group" ng-show="createAllowedButtonSingleWithBlueprints" deep-blur="leaveDropdown()">
-                       <button type="button" class="btn btn-white dropdown-toggle" aria-expanded="{{page.createDropdownOpen}}" ng-click="toggleDropdown()" prevent-default>
+                       <button type="button" class="btn btn-white dropdown-toggle" aria-expanded="{{page.createDropdownOpen}}" ng-click="toggleDropdown()">
                            <span>
                                <localize key="actions_create">Create</localize> {{listViewAllowedTypes[0].name}}
                            </span>
                            <span class="caret" aria-hidden="true"></span>
                         </button>
 
-
                        <umb-dropdown ng-if="page.createDropdownOpen" on-close="page.createDropdownOpen = false">
                            <umb-dropdown-item ng-repeat="contentType in listViewAllowedTypes track by contentType.key | orderBy:'name':false">
-                                <button type="button" ng-click="createBlank(entityType,contentType.alias)" prevent-default>
+                                <button type="button" ng-click="createBlank(entityType,contentType.alias)">
                                     <i class="{{::contentType.icon}}" aria-hidden="true"></i>
                                     {{::contentType.name}} <span ng-show="contentType.blueprints" style="text-transform: lowercase;">(<localize key="blueprints_blankBlueprint">blank</localize>)</span>
                                 </button>
 
-                                <button type="button" ng-repeat="blueprint in contentType.blueprints track by blueprint.id | orderBy:'name':false" ng-click="createFromBlueprint(entityType, contentType.alias, blueprint.id)" prevent-default>
+                                <button type="button" ng-repeat="blueprint in contentType.blueprints track by blueprint.id | orderBy:'name':false" ng-click="createFromBlueprint(entityType, contentType.alias, blueprint.id)">
                                     &nbsp;&nbsp;<i class="{{::contentType.icon}}" aria-hidden="true"></i>
                                     {{::blueprint.name}}
                                 </button>
@@ -53,13 +52,13 @@
 
                        <umb-dropdown ng-if="page.createDropdownOpen" on-close="page.createDropdownOpen = false">
                            <umb-dropdown-item ng-repeat="contentType in listViewAllowedTypes track by contentType.key | orderBy:'name':false">
-                               <button type="button" ng-click="createBlank(entityType,contentType.alias)" prevent-default>
+                               <button type="button" ng-click="createBlank(entityType,contentType.alias)">
                                    <i class="{{::contentType.icon}}" aria-hidden="true"></i>
                                    {{::contentType.name}} <span ng-show="contentType.blueprints" style="text-transform: lowercase;">(<localize key="blueprints_blankBlueprint">blank</localize>)</span>
                                </button>
 
 
-                               <button type="button" ng-repeat="blueprint in contentType.blueprints track by blueprint.id | orderBy:'name':false" ng-click="createFromBlueprint(entityType, contentType.alias, blueprint.id)" prevent-default>
+                               <button type="button" ng-repeat="blueprint in contentType.blueprints track by blueprint.id | orderBy:'name':false" ng-click="createFromBlueprint(entityType, contentType.alias, blueprint.id)">
                                    &nbsp;&nbsp;<i class="{{::contentType.icon}}" aria-hidden="true"></i>
                                    {{::blueprint.name}}
                                </button>