Fix semantics for list views (#6595)

umbraco · Oct 15, 2019 · 9c601ab · 9c601ab
1 parent b8425fa
commit 9c601ab
Show file tree

Hide file tree

Showing 3 changed files with 33 additions and 27 deletions.
diff --git a/src/Umbraco.Web.UI.Client/src/less/components/umb-table.less b/src/Umbraco.Web.UI.Client/src/less/components/umb-table.less
@@ -27,14 +27,13 @@
 
 }
 
+.umb-table__action,
 .umb-table a {
+    background: transparent;
+    border: 0 none;
     text-decoration: none;
-    cursor: pointer;
-
-    &:focus {
-        outline: none;
-        text-decoration: none;
-    }
+    padding: 0;
+    margin-left: 1px;
 }
 
 input.umb-table__input {
@@ -50,22 +49,27 @@ input.umb-table__input {
     font-weight: bold;
 }
 
-a.umb-table-head__link {
+.umb-table-head__link {
+    background: transparent;
+    border: 0 none;
     position: relative;
-    cursor: default;
     text-decoration: none;
     color: @gray-3;
+    font-size: inherit;
+    font-weight: inherit;
+    padding: 0 1px;
+
     &:hover {
         text-decoration: none;
         cursor: default;
         color: @gray-3;
     }
 }
 
-a.umb-table-head__link.sortable {
+.umb-table-head__link.sortable {
+    cursor: pointer;
     &:hover {
         text-decoration: none;
-        cursor: pointer;
         color: @black;
     }
 }
@@ -137,15 +141,15 @@ a.umb-table-head__link.sortable {
 }
 
 .umb-table-body__link {
-
     color: @ui-option-type;
     font-size: 14px;
     font-weight: bold;
     text-decoration: none;
-    
+
     &:hover, &:focus {
         color: @ui-option-type-hover;
         text-decoration: underline;
+        outline: none;
     }
 }
 

diff --git a/src/Umbraco.Web.UI.Client/src/views/components/umb-content-grid.html b/src/Umbraco.Web.UI.Client/src/views/components/umb-content-grid.html
@@ -6,15 +6,13 @@
       ng-class="{'-selected': item.selected}"
       ng-click="clickItem(item, $event, $index)">
 
-      <!--<i ng-if="item.selected" class="icon-check umb-content-grid__checkmark"></i>-->
-
       <div class="umb-content-grid__content">
 
         <a class="umb-content-grid__item-name"
            ng-href="{{'#' + item.editPath}}"
            ng-click="clickItemName(item, $event, $index)"
            ng-class="{'-light': !item.published && item.updater != null}">
-            <i class="umb-content-grid__icon {{ item.icon }}"></i>
+            <i class="umb-content-grid__icon {{ item.icon }}" aria-hidden="true"></i>
             <span>{{ item.name }}</span>
         </a>
 

diff --git a/src/Umbraco.Web.UI.Client/src/views/components/umb-table.html b/src/Umbraco.Web.UI.Client/src/views/components/umb-table.html
@@ -5,29 +5,33 @@
             <div class="umb-table-row">
                 <div class="umb-table-cell">
 
-                    <a href="" style="text-decoration: none;" ng-show="vm.allowSelectAll" ng-click="vm.selectAll()">
+                    <button type="button" class="umb-table__action" ng-show="vm.allowSelectAll" ng-click="vm.selectAll()">
                         <umb-checkmark checked="vm.isSelectedAll()" size="xs"></umb-checkmark>
-                    </a>
+                    </button>
 
                 </div>
                 <div class="umb-table-cell umb-table__name">
-                    <a class="umb-table-head__link sortable" href="#"
+                    <button
+                        type="button"
+                        class="umb-table-head__link sortable"
                         ng-click="vm.sort('Name', true, true)"
                         prevent-default>
                         <localize key="general_name">Name</localize>
-                        <i class="umb-table-head__icon icon" ng-class="{'icon-navigation-up': vm.isSortDirection('Name', 'asc'), 'icon-navigation-down': vm.isSortDirection('Name', 'desc')}"></i>
-                    </a>
+                        <i class="umb-table-head__icon icon" aria-hidden="true" ng-class="{'icon-navigation-up': vm.isSortDirection('Name', 'asc'), 'icon-navigation-down': vm.isSortDirection('Name', 'desc')}"></i>
+                    </button>
                 </div>
                 <div class="umb-table-cell" ng-show="vm.items[0].state">
                     <localize key="general_status">Status</localize>
                 </div>
                 <div class="umb-table-cell" ng-repeat="column in vm.itemProperties track by column.alias">
-                    <a class="umb-table-head__link" href="#"
-                       ng-click="vm.sort(column.alias, column.allowSorting, column.isSystem)"
-                       ng-class="{'sortable':column.allowSorting}" prevent-default>
+                    <button
+                        type="button"
+                        class="umb-table-head__link"
+                        ng-click="vm.sort(column.alias, column.allowSorting, column.isSystem)"
+                        ng-class="{'sortable':column.allowSorting}" prevent-default>
                         <span ng-bind="column.header"></span>
-                        <i class="umb-table-head__icon icon" ng-class="{'icon-navigation-up': vm.isSortDirection(column.alias, 'asc'), 'icon-navigation-down': vm.isSortDirection(column.alias, 'desc')}"></i>
-                    </a>
+                        <i class="umb-table-head__icon icon" aria-hidden="true" ng-class="{'icon-navigation-up': vm.isSortDirection(column.alias, 'asc'), 'icon-navigation-down': vm.isSortDirection(column.alias, 'desc')}"></i>
+                    </button>
                 </div>
             </div>
         </div>
@@ -39,8 +43,8 @@
                  ng-click="vm.selectItem(item, $index, $event)">
 
                 <div class="umb-table-cell">
-                    <i class="umb-table-body__icon umb-table-body__fileicon {{item.icon}}" ng-class="vm.getIcon(item)"></i>
-                    <i class="umb-table-body__icon umb-table-body__checkicon icon-check"></i>
+                    <i class="umb-table-body__icon umb-table-body__fileicon {{item.icon}}" aria-hidden="true" ng-class="vm.getIcon(item)"></i>
+                    <i class="umb-table-body__icon umb-table-body__checkicon icon-check" aria-hidden="true"></i>
                 </div>
                 <div class="umb-table-cell umb-table__name">
                     <a title="{{ item.name }}" class="umb-table-body__link"