Make Discover table keyboard accessible. (#11604) (#11705)

* Make Discover table carets tabbable. * Make Discover table tabs tabbable. * Make Discover table icon buttons tabbable.
2025-04-23 09:19:04 -04:00 · 2017-05-10 10:46:56 -07:00 · 2017-05-10 10:46:56 -07:00 · 3ea447380f
commit 3ea447380f
parent 07916f0c2f
9 changed files with 103 additions and 47 deletions
--- 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>
--- 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 {
--- 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 @@ if (timefield) {
  <%= 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>
--- 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>
--- 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 */
+  }
 }
--- 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"
--- a/src/ui/public/doc_viewer/doc_viewer.less
+++ b/src/ui/public/doc_viewer/doc_viewer.less
@ -23,6 +23,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;
--- 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;'
--- 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');
        });
      });