Buttons cleanup (#8529)

2020-07-31 10:24:20 +02:00
parent dfe8930653
commit 538b867447
7 changed files with 78 additions and 42 deletions
@@ -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;
-}
+    color: @grayLight;
+    background-color: #fff;
+    cursor: default;
+}
@@ -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;
@@ -1,3 +1,5 @@
-.umb-pagination ul {
-    box-shadow: none;
-}
+.umb-pagination {
+    ul {
+        box-shadow: none;
+    }
+}
@@ -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>
@@ -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>
@@ -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>
@@ -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>