Accessible sort buttons

src/ui/public/doc_table/components/table_header.html

@@ -1,34 +1,55 @@
 <tr>
   <th width="1%"></th>
   <th ng-if="indexPattern.timeFieldName" data-test-subj="docTableHeaderField">
-    <span>Time <i ng-class="headerClass(indexPattern.timeFieldName)" ng-click="cycleSortOrder(indexPattern.timeFieldName)" tooltip="Sort by time"></i></span>
+    <span>Time <button
+      id="docTableHeaderFieldSort{{indexPattern.timeFieldName}}"
+      tabindex="0"
+      aria-label="{{ getAriaLabelForColumn(indexPattern.timeFieldName) }}"
+      class="docTableHeaderButton"
+      ng-class="headerClass(indexPattern.timeFieldName)"
+      role="button"
+      ng-click="cycleSortOrder(indexPattern.timeFieldName)"
+      tooltip="Sort by time"
+    ></button>
+    </span>
   </th>
   <th ng-repeat="name in columns" data-test-subj="docTableHeaderField">
     <span class="table-header-name">
-      {{name | shortDots}} <i ng-class="headerClass(name)" ng-click="cycleSortOrder(name)" tooltip="{{tooltip(name)}}" tooltip-append-to-body="1"></i>
-    </span>
-    <span class="table-header-move">
-      <i
-        class="fa fa-remove"
-        ng-click="onRemoveColumn(name)"
-        ng-if="canRemoveColumn(name)"
-        tooltip-append-to-body="1"
-        tooltip="Remove column"
-      ></i>
-      <i
-        class="fa fa-angle-double-left"
-        ng-click="moveColumnLeft(name)"
-        ng-if="canMoveColumnLeft(name)"
-        tooltip-append-to-body="1"
-        tooltip="Move column to the left"
-      ></i>
-      <i
-        class="fa fa-angle-double-right"
-        ng-click="moveColumnRight(name)"
-        ng-if="canMoveColumnRight(name)"
+      {{name | shortDots}}
+      <button
+        id="docTableHeaderFieldSort{{name}}"
+        tabindex="0"
+        aria-label="{{ getAriaLabelForColumn(name) }}"
+        class="docTableHeaderButton"
+        ng-class="headerClass(name)"
+        ng-click="cycleSortOrder(name)"
+        tooltip="{{tooltip(name)}}"
         tooltip-append-to-body="1"
-        tooltip="Move column to the right"
-      ></i>
+      ></button>
     </span>
+    <button
+      class="fa fa-remove table-header-move"
+      ng-click="onRemoveColumn(name)"
+      ng-if="canRemoveColumn(name)"
+      tooltip-append-to-body="1"
+      tooltip="Remove column"
+      aria-label="Remove {{name}} column"
+    ></button>
+    <button
+      class="fa fa-angle-double-left table-header-move"
+      ng-click="moveColumnLeft(name)"
+      ng-if="canMoveColumnLeft(name)"
+      tooltip-append-to-body="1"
+      tooltip="Move column to the left"
+      aria-label="Move {{name}} column to the left"
+    ></button>
+    <button
+      class="fa fa-angle-double-right table-header-move"
+      ng-click="moveColumnRight(name)"
+      ng-if="canMoveColumnRight(name)"
+      tooltip-append-to-body="1"
+      tooltip="Move column to the right"
+      aria-label="Move {{name}} column to the right"
+    ></button>
   </th>
 </tr>

src/ui/public/doc_table/components/table_header.js

@@ -96,6 +96,17 @@ module.directive('kbnTableHeader', function (shortDotsFilter) {
 
         $scope.onChangeSortOrder(columnName, newDirection);
       };
+
+      $scope.getAriaLabelForColumn = function getAriaLabelForColumn(name) {
+        if (!isSortableColumn(name)) return null;
+
+        const [currentColumnName, currentDirection = 'asc'] = $scope.sortOrder;
+        if(name === currentColumnName && currentDirection === 'asc') {
+          return `Sort ${name} descending`;
+        }
+
+        return `Sort ${name} ascending`;
+      };
     }
   };
 });

src/ui/public/doc_table/doc_table.less

@@ -90,3 +90,9 @@ doc-table {
     opacity: 1; /* 3 */
   }
 }
+
+.docTableHeaderButton {
+  border: none;
+  background: none;
+  padding: 0;
+}

src/ui/public/styles/base.less

@@ -207,8 +207,18 @@ kbn-table, .kbn-table {
     white-space: nowrap;
     padding-right: 10px;
 
+    .table-header-move {
+      border: none;
+      background: none;
+      padding: 0;
+    }
+
     .table-header-move, .table-header-sortchange {
-      visibility: hidden;
+      opacity: 0;
+
+      &:focus {
+        opacity: 1;
+      }
     }
 
     .fa {
@@ -219,7 +229,7 @@ kbn-table, .kbn-table {
 
   th:hover {
     .table-header-move, .table-header-sortchange {
-      visibility: visible;
+      opacity: 1;
     }
   }
 }

src/ui/public/styles/dark-theme.less

@@ -69,11 +69,15 @@
         color: @table-sort-color;
       }
 
+      button.fa-sort-asc,
+      button.fa-sort-down,
       i.fa-sort-asc,
       i.fa-sort-down {
         color: @table-sort-asc-color;
       }
 
+      button.fa-sort-desc,
+      button.fa-sort-up,
       i.fa-sort-desc,
       i.fa-sort-up {
         color: @table-sort-desc-color;

src/ui/public/styles/table.less

@@ -52,11 +52,15 @@ table {
       color: @table-sort-color;
     }
 
+    button.fa-sort-asc,
+    button.fa-sort-down,
     i.fa-sort-asc,
     i.fa-sort-down {
       color: @table-sort-asc-color;
     }
 
+    button.fa-sort-desc,
+    button.fa-sort-up,
     i.fa-sort-desc,
     i.fa-sort-up {
       color: @table-sort-desc-color;