From 22a70b75c4b94d185ce716430f2461f7ad8ce8f2 Mon Sep 17 00:00:00 2001
From: Mark Robert Henderson <henderson.mark@gmail.com>
Date: Tue, 20 Jun 2017 15:48:11 -0400
Subject: [PATCH] Accessible Discover table column header buttons (#12217)

---
 .../doc_table/components/table_header.html    | 69 ++++++++++++-------
 .../doc_table/components/table_header.js      | 11 +++
 src/ui/public/doc_table/doc_table.less        |  6 ++
 src/ui/public/styles/base.less                | 14 +++-
 src/ui/public/styles/dark-theme.less          |  4 ++
 src/ui/public/styles/table.less               |  4 ++
 6 files changed, 82 insertions(+), 26 deletions(-)

diff --git a/src/ui/public/doc_table/components/table_header.html b/src/ui/public/doc_table/components/table_header.html
index 10c8f8d63306c..14e9d9d9708d3 100644
--- a/src/ui/public/doc_table/components/table_header.html
+++ b/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>
diff --git a/src/ui/public/doc_table/components/table_header.js b/src/ui/public/doc_table/components/table_header.js
index e8cea37c7c195..d808f44cd6e21 100644
--- a/src/ui/public/doc_table/components/table_header.js
+++ b/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`;
+      };
     }
   };
 });
diff --git a/src/ui/public/doc_table/doc_table.less b/src/ui/public/doc_table/doc_table.less
index 8235f242fa629..cb579c6c397d3 100644
--- a/src/ui/public/doc_table/doc_table.less
+++ b/src/ui/public/doc_table/doc_table.less
@@ -92,3 +92,9 @@ doc-table {
     opacity: 1; /* 3 */
   }
 }
+
+.docTableHeaderButton {
+  border: none;
+  background: none;
+  padding: 0;
+}
diff --git a/src/ui/public/styles/base.less b/src/ui/public/styles/base.less
index b429f193f3b40..342ce050e282b 100644
--- a/src/ui/public/styles/base.less
+++ b/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;
     }
   }
 }
diff --git a/src/ui/public/styles/dark-theme.less b/src/ui/public/styles/dark-theme.less
index eac3b45a08beb..208348ed70d5c 100644
--- a/src/ui/public/styles/dark-theme.less
+++ b/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;
diff --git a/src/ui/public/styles/table.less b/src/ui/public/styles/table.less
index 2f96b264bfd9b..439f8ae6491c9 100644
--- a/src/ui/public/styles/table.less
+++ b/src/ui/public/styles/table.less
@@ -53,11 +53,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;