[Accessibility] Add button to skip past the discover doc table (#12539)

elastic · Jul 11, 2017 · b97a265 · b97a265
1 parent fbb074a
commit b97a265
Show file tree

Hide file tree

Showing 5 changed files with 65 additions and 5 deletions.
diff --git a/src/core_plugins/kibana/public/context/app.html b/src/core_plugins/kibana/public/context/app.html
@@ -118,6 +118,7 @@
         sorting="contextApp.state.queryParameters.sort"
         columns="contextApp.state.queryParameters.columns"
         infinite-scroll="true"
+        minimum-visible-rows="contextApp.state.rows.all.length"
       ></doc-table>
     </div>
   </div>

diff --git a/src/core_plugins/kibana/public/discover/controllers/discover.js b/src/core_plugins/kibana/public/discover/controllers/discover.js
@@ -90,8 +90,21 @@ app.directive('discoverApp', function () {
   };
 });
 
-function discoverController($scope, config, courier, $route, $window, Notifier,
-  AppState, timefilter, Promise, Private, kbnUrl) {
+function discoverController(
+  $element,
+  $route,
+  $scope,
+  $timeout,
+  $window,
+  AppState,
+  Notifier,
+  Private,
+  Promise,
+  config,
+  courier,
+  kbnUrl,
+  timefilter,
+) {
 
   const Vis = Private(VisProvider);
   const docTitle = Private(DocTitleProvider);
@@ -107,6 +120,7 @@ function discoverController($scope, config, courier, $route, $window, Notifier,
   $scope.queryDocLinks = documentationLinks.query;
   $scope.intervalOptions = Private(AggTypesBucketsIntervalOptionsProvider);
   $scope.showInterval = false;
+  $scope.minimumVisibleRows = 50;
 
   $scope.intervalEnabled = function (interval) {
     return interval.val !== 'custom';
@@ -579,10 +593,21 @@ function discoverController($scope, config, courier, $route, $window, Notifier,
     columnActions.moveColumn($scope.state.columns, columnName, newIndex);
   };
 
-  $scope.toTop = function () {
+  $scope.scrollToTop = function () {
     $window.scrollTo(0, 0);
   };
 
+  $scope.scrollToBottom = function () {
+    // delay scrolling to after the rows have been rendered
+    $timeout(() => {
+      $element.find('#discoverBottomMarker').focus();
+    }, 0);
+  };
+
+  $scope.showAllRows = function () {
+    $scope.minimumVisibleRows = $scope.hits;
+  };
+
   let loadingVis;
   function setupVisualization() {
     // If we're not setting anything up we need to return an empty promise

diff --git a/src/core_plugins/kibana/public/discover/index.html b/src/core_plugins/kibana/public/discover/index.html
@@ -101,6 +101,16 @@ <h2>Searching</h2>
 
           <!-- result -->
           <div class="results" ng-show="resultState === 'ready'">
+            <button
+              class="kuiButton kuiButton--basic kuiButton--iconText discover-skip-button"
+              ng-click="showAllRows(); scrollToBottom()"
+            >
+              <span class="kuiButton__inner">
+                <span aria-hidden="true" class="kuiButton__icon kuiIcon fa-chevron-down"></span>
+                <span>Skip to bottom</span>
+              </span>
+            </button>
+
             <div class="discover-timechart" ng-if="opts.timefield">
               <header>
                 <center class="small">
@@ -152,17 +162,20 @@ <h2>Searching</h2>
                 data-shared-item
                 data-title="{{opts.savedSearch.lastSavedTitle}}"
                 data-description="{{opts.savedSearch.description}}"
+                minimum-visible-rows="minimumVisibleRows"
                 render-counter
                 on-add-column="addColumn"
                 on-change-sort-order="setSortOrder"
                 on-move-column="moveColumn"
                 on-remove-column="removeColumn"
               ></doc-table>
 
+              <a tabindex="0" id="discoverBottomMarker"></a>
+
               <div ng-if="rows.length == opts.sampleSize" class="discover-table-footer">
                 These are the first {{opts.sampleSize}} documents matching
                 your search, refine your search to see others.
-                <a ng-click="toTop()">Back to top.</a>
+                <a kbn-accessible-click ng-click="scrollToTop()">Back to top.</a>
               </div>
             </div>
           </div>

diff --git a/src/core_plugins/kibana/public/discover/styles/main.less b/src/core_plugins/kibana/public/discover/styles/main.less
@@ -301,3 +301,19 @@ disc-field-chooser {
       width: auto;
     }
   }
+
+.discover-skip-button {
+  position: absolute;
+  left: -10000px;
+  top: 4px;
+  width: 1px;
+  height: 1px;
+  overflow: hidden;
+
+  &:focus {
+    left: initial;
+    right: 15px;
+    width: auto;
+    height: auto;
+  }
+}
diff --git a/src/ui/public/doc_table/doc_table.js b/src/ui/public/doc_table/doc_table.js
@@ -24,14 +24,19 @@ uiModules.get('kibana')
       infiniteScroll: '=?',
       filter: '=?',
       filters: '=?',
+      minimumVisibleRows: '=?',
       onAddColumn: '=?',
       onChangeSortOrder: '=?',
       onMoveColumn: '=?',
       onRemoveColumn: '=?',
     },
     link: function ($scope, $el) {
       const notify = new Notifier();
-      $scope.limit = 50;
+
+      $scope.$watch('minimumVisibleRows', (minimumVisibleRows) => {
+        $scope.limit = Math.max(minimumVisibleRows || 50, $scope.limit || 50);
+      });
+
       $scope.persist = {
         sorting: $scope.sorting,
         columns: $scope.columns