Improve Discover screen-reader accessibility: (#11598) (#11676)

- Apply aria-label to field name icons.
- Change title to alt for Discover 'Back to top' link.
- Remove unnecessary title attributes from Discover No Results state.
- Add aria-label to Discover sidebar's string field value.
- Adjust aria-label of Discover Field Chooser 'Show field settings' button.

Author: cjcenizal

src/core_plugins/kibana/public/discover/components/field_chooser/field_chooser.html

@@ -45,10 +45,11 @@ <h5>Available Fields
       ></span>
 
       <button
+        type="button"
         ng-class="{ 'kuiButton--basic': !filter.active, 'kuiButton--primary': filter.active, 'hidden-xs': !showFields, 'hidden-sm': !showFields }"
         class="kuiButton kuiButton--small pull-right discover-field-filter-toggle"
         ng-click="showFilter = !showFilter"
-        aria-label="Field Settings"
+        aria-label="Show field settings"
         aria-haspopup="true"
         aria-expanded="{{showFilter}}"
       >

src/core_plugins/kibana/public/discover/components/field_chooser/lib/detail_views/string.html

@@ -24,14 +24,22 @@ <h5 ng-show="!field.details.error">Quick Count <kbn-info info="Top 5 values base
     <div ng-if="!field.details.error">
       <div ng-repeat="bucket in ::field.details.buckets" class="discover-field-details-item">
         <div>
+          <!-- Add/remove filter buttons -->
           <span ng-show="field.filterable" class="pull-right">
-            <i aria-hidden="true" class="fa fa-search-minus pull-right discover-field-details-filter"
-              ng-click="onAddFilter(field, bucket.value, '-')"  data-test-subj="minus-{{::field.name}}-{{::bucket.display}}"></i>
-            <i aria-hidden="true" class="fa fa-search-plus pull-right discover-field-details-filter"
-              ng-click="onAddFilter(field, bucket.value, '+')" data-test-subj="plus-{{::field.name}}-{{::bucket.display}}"></i>
+            <span aria-hidden="true" class="fa fa-search-minus pull-right discover-field-details-filter"
+              ng-click="onAddFilter(field, bucket.value, '-')"  data-test-subj="minus-{{::field.name}}-{{::bucket.display}}"></span>
+            <span aria-hidden="true" class="fa fa-search-plus pull-right discover-field-details-filter"
+              ng-click="onAddFilter(field, bucket.value, '+')" data-test-subj="plus-{{::field.name}}-{{::bucket.display}}"></span>
           </span>
-          <div css-truncate css-truncate-expandable="true" class="discover-field-details-value" title="{{::bucket.display}}">
-            {{::bucket.display}} <i ng-show="bucket.display === ''">Empty string</i>
+
+          <!-- Field value -->
+          <div
+            css-truncate
+            css-truncate-expandable="true"
+            class="discover-field-details-value"
+            aria-label="Value: {{:: bucket.display === '' ? 'Empty string' : bucket.display }}"
+          >
+            {{::bucket.display}} <em ng-show="bucket.display === ''">Empty string</em>
           </div>
         </div>
         <kbn-tooltip text="{{::bucket.count}}" placement="right" append-to-body="1">

src/core_plugins/kibana/public/discover/index.html

@@ -155,11 +155,9 @@ <h2>Searching</h2>
               ></doc-table>
 
               <div ng-if="rows.length == opts.sampleSize" class="discover-table-footer">
-                <center>
-                  These are the first {{opts.sampleSize}} documents matching
-                  your search, refine your search to see others.
-                  <a ng-click="toTop()" title="Back to top">Back to top.</a>
-                </center>
+                These are the first {{opts.sampleSize}} documents matching
+                your search, refine your search to see others.
+                <a ng-click="toTop()">Back to top.</a>
               </div>
             </div>
           </div>

src/core_plugins/kibana/public/discover/partials/no_results.html

@@ -13,8 +13,18 @@ <h3>Shard Failures</h3>
       <ul>
         <li ng-repeat="failure in failures | limitTo: failuresShown"><strong>Index:</strong> {{failure.index}} <strong>Shard:</strong> {{failure.shard}} <strong>Reason:</strong> {{failure.reason}} </li>
       </ul>
-      <a ng-click="showAllFailures()" ng-if="failures.length > failuresShown" title="Show More">Show More</a>
-      <a ng-click="showLessFailures()" ng-if="failures.length === failuresShown && failures.length > 5" title="Show Less">Show Less</a>
+      <a
+        ng-click="showAllFailures()"
+        ng-if="failures.length > failuresShown"
+      >
+        Show More
+      </a>
+      <a
+        ng-click="showLessFailures()"
+        ng-if="failures.length === failuresShown && failures.length > 5"
+      >
+        Show Less
+      </a>
     </div>
 
     <div ng-show="opts.timefield">

src/core_plugins/kibana/public/discover/styles/main.less

@@ -98,6 +98,7 @@
     .discover-table-footer {
       background-color: @discover-table-footer-bg;
       padding: 5px 10px;
+      text-align: center;
     }
 
     .discover-table-details-toggle {
@@ -224,19 +225,19 @@
 
 field-name,
 [field-name] {
-  > i {
+  &.no-results {
+    color: @field-name-no-results-color;
+  }
+}
+
+  .field-name-icon {
     margin-right: 5px;
     text-align: center;
     display: inline-block;
     width: 12px;
     color: @field-name-color;
   }
 
-  &.no-results {
-    color: @field-name-no-results-color;
-  }
-}
-
 disc-field-chooser {
   .sidebar-item.active .sidebar-item-title {
     background-color: @sidebar-active-bg;

src/ui/public/directives/field_name.js

@@ -1,5 +1,16 @@
 import $ from 'jquery';
 import 'ui/filters/short_dots';
+import booleanFieldNameIcon from './field_name_icons/boolean_field_name_icon.html';
+import conflictFieldNameIcon from './field_name_icons/conflict_field_name_icon.html';
+import dateFieldNameIcon from './field_name_icons/date_field_name_icon.html';
+import geoPointFieldNameIcon from './field_name_icons/geo_point_field_name_icon.html';
+import ipFieldNameIcon from './field_name_icons/ip_field_name_icon.html';
+import murmur3FieldNameIcon from './field_name_icons/murmur3_field_name_icon.html';
+import numberFieldNameIcon from './field_name_icons/number_field_name_icon.html';
+import sourceFieldNameIcon from './field_name_icons/source_field_name_icon.html';
+import stringFieldNameIcon from './field_name_icons/string_field_name_icon.html';
+import unknownFieldNameIcon from './field_name_icons/unknown_field_name_icon.html';
+
 import { uiModules } from 'ui/modules';
 const module = uiModules.get('kibana');
 
@@ -12,31 +23,25 @@ module.directive('fieldName', function ($compile, $rootScope, $filter) {
       'fieldType': '='
     },
     link: function ($scope, $el) {
+      const typeToIconMap = {
+        boolean: booleanFieldNameIcon,
+        conflict: conflictFieldNameIcon,
+        date: dateFieldNameIcon,
+        geo_point: geoPointFieldNameIcon,
+        ip: ipFieldNameIcon,
+        murmur3: murmur3FieldNameIcon,
+        number: numberFieldNameIcon,
+        source: sourceFieldNameIcon,
+        string: stringFieldNameIcon,
+      };
 
-      const typeIcon = function (fieldType) {
-        switch (fieldType) {
-          case 'source':
-            return '<i title="source" class="fa fa-file-text-o "></i>';
-          case 'string':
-            return '<i title="string"><strong>t</strong></i>';
-          case 'murmur3':
-            return '<i title="murmur3"><strong>h</strong></i>';
-          case 'number':
-            return '<i title="number"><strong>#</strong></i>';
-          case 'date':
-            return '<i title="date" class="fa fa-clock-o"></i>';
-          case 'ip':
-            return '<i title="ip" class="fa fa-laptop"></i>';
-          case 'geo_point':
-            return '<i title="geo_point" class="fa fa-globe"></i>';
-          case 'boolean':
-            return '<i title="boolean" class="fa fa-adjust"></i>';
-          case 'conflict':
-            return '<i title="conflict" class="fa fa-warning"></i>';
-          default:
-            return '<i title="unknown"><strong>?</strong></i>';
+      function typeIcon(fieldType) {
+        if (typeToIconMap.hasOwnProperty(fieldType)) {
+          return typeToIconMap[fieldType];
         }
-      };
+
+        return unknownFieldNameIcon;
+      }
 
       $rootScope.$watchMulti.call($scope, [
         'field',

src/ui/public/directives/field_name_icons/boolean_field_name_icon.html

@@ -0,0 +1,4 @@
+<span
+  aria-label="Boolean field"
+  class="field-name-icon kuiIcon fa-adjust"
+></span>

src/ui/public/directives/field_name_icons/conflict_field_name_icon.html

@@ -0,0 +1,4 @@
+<span
+  aria-label="Conflicting field"
+  class="field-name-icon kuiIcon fa-warning"
+></span>

src/ui/public/directives/field_name_icons/date_field_name_icon.html

@@ -0,0 +1,4 @@
+<span
+  aria-label="Date field"
+  class="field-name-icon kuiIcon fa-clock-o"
+></span>

src/ui/public/directives/field_name_icons/geo_point_field_name_icon.html

@@ -0,0 +1,4 @@
+<span
+  aria-label="Geo-point field"
+  class="field-name-icon kuiIcon fa-globe"
+></span>