Make Discover table keyboard accessible. (elastic#11604)

* Make Discover table carets tabbable. * Make Discover table tabs tabbable. * Make Discover table icon buttons tabbable.
snide · May 30, 2017 · f778fb2 · f778fb2
1 parent fc8136d
commit f778fb2
Show file tree

Hide file tree

Showing 9 changed files with 103 additions and 47 deletions.
diff --git a/src/core_plugins/kbn_doc_views/public/views/table.html b/src/core_plugins/kbn_doc_views/public/views/table.html
@@ -8,32 +8,52 @@
       </td>
       <td width="1%" class="doc-viewer-buttons" ng-if="filter">
         <span ng-if="mapping[field].filterable">
-          <i ng-click="filter(mapping[field], flattened[field], '+')"
-            tooltip="Filter for value"
-            tooltip-append-to-body="1"
-            class="fa fa-search-plus"></i>
-          <i ng-click="filter(mapping[field], flattened[field],'-')"
-            tooltip="Filter out value"
-            tooltip-append-to-body="1"
-            class="fa fa-search-minus"></i>
+          <button
+            class="doc-viewer-button"
+            ng-click="filter(mapping[field], flattened[field], '+')"
+          >
+            <i
+              tooltip="Filter for value"
+              tooltip-append-to-body="1"
+              class="fa fa-search-plus"></i>
+          </button>
+
+          <button
+            class="doc-viewer-button"
+            ng-click="filter(mapping[field], flattened[field],'-')"
+          >
+            <i
+              tooltip="Filter out value"
+              tooltip-append-to-body="1"
+              class="fa fa-search-minus"></i>
+          </button>
         </span>
         <span ng-if="!mapping[field].filterable" tooltip="Unindexed fields can not be searched">
           <i class="fa fa-search-plus text-muted"></i>
           <i class="fa fa-search-minus text-muted"></i>
         </span>
         <span ng-if="canToggleColumns()">
-          <i
-            class="fa fa-columns"
+          <button
+            class="doc-viewer-button"
             ng-click="toggleColumn(field)"
-            tooltip-append-to-body="1"
-            tooltip="Toggle column in table"
-          ></i>
+          >
+            <i
+              class="fa fa-columns"
+              tooltip-append-to-body="1"
+              tooltip="Toggle column in table"
+            ></i>
+          </button>
         </span>
         <span ng-if="!indexPattern.metaFields.includes(field)">
-          <i ng-click="filter('_exists_', field, '+')"
-            tooltip="Filter for field present"
-            tooltip-append-to-body="1"
-            class="fa fa-asterisk"></i>
+          <button
+            class="doc-viewer-button"
+            ng-click="filter('_exists_', field, '+')"
+          >
+            <i
+              tooltip="Filter for field present"
+              tooltip-append-to-body="1"
+              class="fa fa-asterisk"></i>
+          </button>
         </span>
         <span ng-if="indexPattern.metaFields.includes(field)" tooltip="Unable to filter for presence of meta fields">
           <i class="fa fa-asterisk text-muted"></i>

diff --git a/src/core_plugins/kibana/public/discover/styles/main.less b/src/core_plugins/kibana/public/discover/styles/main.less
@@ -109,11 +109,18 @@
       white-space: nowrap;
     }
 
-    .discover-table-open-icon {
-      // when switching between open and closed, the toggle changes size
-      // slightly which is a problem because it forces the entire table to
-      // re-render which is SLOW
-      width: 7px;
+    /**
+     * 1. When switching between open and closed, the toggle changes size
+     *    slightly which is a problem because it forces the entire table to
+     *    re-render which is SLOW.
+     */
+    .discover-table-open-button {
+      appearance: none;
+      background-color: transparent;
+      padding: 0;
+      border: none;
+      width: 7px; /* 1 */
+      height: 7px;
     }
 
     .discover-field-filter {

diff --git a/src/ui/public/doc_table/components/table_row/cell.html b/src/ui/public/doc_table/components/table_row/cell.html
@@ -12,21 +12,21 @@
   <%= formatted %>
   <span class="table-cell-filter">
     <% if (filterable) { %>
-      <span
+      <button
         ng-click="inlineFilter($event, '+')"
-        class="fa fa-search-plus docTableRowFilterIcon"
+        class="fa fa-search-plus docTableRowFilterButton"
         data-column="<%- column %>"
         tooltip="Filter for value"
         tooltip-append-to-body="1"
-      ></span>
+      ></button>
 
-      <span
+      <button
         ng-click="inlineFilter($event, '-')"
-        class="fa fa-search-minus docTableRowFilterIcon"
+        class="fa fa-search-minus docTableRowFilterButton"
         data-column="<%- column %>"
         tooltip="Filter out value"
         tooltip-append-to-body="1"
-      ></span>
+      ></button>
     <% } %>
   </span>
 </td>
diff --git a/src/ui/public/doc_table/components/table_row/open.html b/src/ui/public/doc_table/components/table_row/open.html
@@ -1,6 +1,8 @@
 <td ng-click="toggleRow()" data-test-subj="docTableExpandToggleColumn">
-  <i
-    class="fa discover-table-open-icon"
-    ng-class="{ 'fa-caret-down': open, 'fa-caret-right': !open }">
-  </i>
+  <button class="discover-table-open-button">
+    <span
+      class="kuiIcon"
+      ng-class="{ 'fa-caret-down': open, 'fa-caret-right': !open }"
+    ></span>
+  </button>
 </td>
diff --git a/src/ui/public/doc_table/doc_table.less b/src/ui/public/doc_table/doc_table.less
@@ -43,12 +43,11 @@ doc-table {
         background-color: @panel-bg;
         white-space: nowrap;
         right: 0;
-        display: none;
       }
 
       &:hover {
-        .table-cell-filter {
-          display: inline;
+        .docTableRowFilterButton {
+          opacity: 1;
         }
       }
     }
@@ -70,13 +69,24 @@ doc-table {
 
 /**
  * 1. Align icon with text in cell.
+ * 2. Use opacity to make this element accessible to screen readers and keyboard.
+ * 3. Show on focus to enable keyboard accessibility.
  */
-.docTableRowFilterIcon {
+.docTableRowFilterButton {
+  appearance: none;
+  background-color: transparent;
+  border: none;
+  padding: 0;
   font-size: 14px;
   line-height: 1; /* 1 */
-  display: inline;
+  display: inline-block;
+  opacity: 0; /* 2 */
 
   & + & {
     margin-left: 5px;
   }
+
+  &:focus {
+    opacity: 1; /* 3 */
+  }
 }
diff --git a/src/ui/public/doc_viewer/doc_viewer.js b/src/ui/public/doc_viewer/doc_viewer.js
@@ -26,9 +26,19 @@ uiModules.get('kibana')
       $viewer.append($tabs);
       $viewer.append($content);
       docViews.inOrder.forEach(view => {
-        const $tab = $(`<li ng-show="docViews['${view.name}'].shouldShow(hit)" ng-class="{active: mode == '${view.name}'}">
-            <a ng-click="mode='${view.name}'">${view.title}</a>
-          </li>`);
+        const $tab = $(
+          `<li
+            ng-show="docViews['${view.name}'].shouldShow(hit)"
+            ng-class="{active: mode == '${view.name}'}"
+          >
+            <a
+              ng-click="mode='${view.name}'"
+              kbn-accessible-click
+            >
+              ${view.title}
+            </a>
+          </li>`
+        );
         $tabs.append($tab);
         const $viewAttrs = `
           hit="hit"

diff --git a/src/ui/public/doc_viewer/doc_viewer.less b/src/ui/public/doc_viewer/doc_viewer.less
@@ -26,6 +26,13 @@
     white-space: nowrap;
   }
 
+  .doc-viewer-button {
+    appearance: none;
+    background-color: transparent;
+    border: none;
+    padding: 0;
+  }
+
   .doc-viewer-value {
     display: inline-block;
     word-break: break-all;

diff --git a/test/functional/apps/discover/_field_data.js b/test/functional/apps/discover/_field_data.js
@@ -84,7 +84,7 @@ export default function ({ getService, getPageObjects }) {
       it('doc view should show oldest time first', function () {
         // Note: Could just check the timestamp, but might as well check that the whole doc is as expected.
         const ExpectedDoc =
-          'September 22nd 2015, 23:50:13.253 index:logstash-2015.09.22 @timestamp:September 22nd 2015, 23:50:13.253'
+          'September 22nd 2015, 23:50:13.253\nindex:logstash-2015.09.22 @timestamp:September 22nd 2015, 23:50:13.253'
           + ' ip:238.171.34.42 extension:jpg response:200 geo.coordinates:{ "lat": 38.66494528, "lon": -88.45299556'
           + ' } geo.src:FR geo.dest:KH geo.srcdest:FR:KH @tags:success, info utc_time:September 22nd 2015,'
           + ' 23:50:13.253 referer:http://twitter.com/success/nancy-currie agent:Mozilla/4.0 (compatible; MSIE 6.0;'
@@ -135,7 +135,7 @@ export default function ({ getService, getPageObjects }) {
       it('doc view should sort ascending', function () {
         // Note: Could just check the timestamp, but might as well check that the whole doc is as expected.
         const ExpectedDoc =
-          'September 20th 2015, 00:00:00.000 index:logstash-2015.09.20 @timestamp:September 20th 2015, 00:00:00.000'
+          'September 20th 2015, 00:00:00.000\nindex:logstash-2015.09.20 @timestamp:September 20th 2015, 00:00:00.000'
           + ' ip:143.84.142.7 extension:jpg response:200 geo.coordinates:{ "lat": 38.68407028, "lon": -120.9871642 }'
           + ' geo.src:ES geo.dest:US geo.srcdest:ES:US @tags:error, info utc_time:September 20th 2015, 00:00:00.000'
           + ' referer:http://www.slate.com/success/vladimir-kovalyonok agent:Mozilla/4.0 (compatible; MSIE 6.0;'

diff --git a/test/functional/apps/management/_scripted_fields.js b/test/functional/apps/management/_scripted_fields.js
@@ -72,7 +72,7 @@ export default function ({ getService, getPageObjects }) {
         await PageObjects.visualize.waitForVisualization();
         await retry.try(async function() {
           const rowData = await PageObjects.discover.getDocTableIndex(1);
-          expect(rowData).to.be('September 18th 2015, 18:20:57.916 18');
+          expect(rowData).to.be('September 18th 2015, 18:20:57.916\n18');
         });
       });
 
@@ -139,7 +139,7 @@ export default function ({ getService, getPageObjects }) {
         await PageObjects.visualize.waitForVisualization();
         await retry.try(async function() {
           const rowData = await PageObjects.discover.getDocTableIndex(1);
-          expect(rowData).to.be('September 18th 2015, 18:20:57.916 18');
+          expect(rowData).to.be('September 18th 2015, 18:20:57.916\n18');
         });
       });
 
@@ -207,7 +207,7 @@ export default function ({ getService, getPageObjects }) {
         await PageObjects.visualize.waitForVisualization();
         await retry.try(async function() {
           const rowData = await PageObjects.discover.getDocTableIndex(1);
-          expect(rowData).to.be('September 18th 2015, 18:20:57.916 good');
+          expect(rowData).to.be('September 18th 2015, 18:20:57.916\ngood');
 
         });
       });
@@ -271,7 +271,7 @@ export default function ({ getService, getPageObjects }) {
         await PageObjects.visualize.waitForVisualization();
         await retry.try(async function() {
           const rowData = await PageObjects.discover.getDocTableIndex(1);
-          expect(rowData).to.be('September 18th 2015, 18:20:57.916 true');
+          expect(rowData).to.be('September 18th 2015, 18:20:57.916\ntrue');
 
         });
       });
@@ -336,7 +336,7 @@ export default function ({ getService, getPageObjects }) {
         await PageObjects.visualize.waitForVisualization();
         await retry.try(async function() {
           const rowData = await PageObjects.discover.getDocTableIndex(1);
-          expect(rowData).to.be('September 18th 2015, 06:52:55.953 2015-09-18 07:00');
+          expect(rowData).to.be('September 18th 2015, 06:52:55.953\n2015-09-18 07:00');
         });
       });