Improve Discover screen-reader accessibility: (#11598)

- 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.
2025-04-24 09:48:58 -04:00 · 2017-05-09 11:20:48 -07:00 · 2017-05-09 11:20:48 -07:00 · fe6db3b9e4
commit fe6db3b9e4
parent 2587c859da
16 changed files with 115 additions and 44 deletions
--- a/src/core_plugins/kibana/public/discover/components/field_chooser/field_chooser.html
+++ b/src/core_plugins/kibana/public/discover/components/field_chooser/field_chooser.html
@ -45,10 +45,11 @@
      ></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}}"
      >
--- a/src/core_plugins/kibana/public/discover/components/field_chooser/lib/detail_views/string.html
+++ b/src/core_plugins/kibana/public/discover/components/field_chooser/lib/detail_views/string.html
@ -24,14 +24,22 @@
    <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">
--- a/src/core_plugins/kibana/public/discover/index.html
+++ b/src/core_plugins/kibana/public/discover/index.html
@ -155,11 +155,9 @@
              ></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>
--- a/src/core_plugins/kibana/public/discover/partials/no_results.html
+++ b/src/core_plugins/kibana/public/discover/partials/no_results.html
@ -13,8 +13,18 @@
      <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">
--- a/src/core_plugins/kibana/public/discover/styles/main.less
+++ b/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,7 +225,12 @@

 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;
@ -232,11 +238,6 @@ field-name,
    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;
--- a/src/ui/public/directives/field_name.js
+++ b/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,32 +23,26 @@ module.directive('fieldName', function ($compile, $rootScope, $filter) {
      'fieldType': '='
    },
    link: function ($scope, $el) {
-
-      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>';
-        }
+      const typeToIconMap = {
+        boolean: booleanFieldNameIcon,
+        conflict: conflictFieldNameIcon,
+        date: dateFieldNameIcon,
+        geo_point: geoPointFieldNameIcon,
+        ip: ipFieldNameIcon,
+        murmur3: murmur3FieldNameIcon,
+        number: numberFieldNameIcon,
+        source: sourceFieldNameIcon,
+        string: stringFieldNameIcon,
      };

+      function typeIcon(fieldType) {
+        if (typeToIconMap.hasOwnProperty(fieldType)) {
+          return typeToIconMap[fieldType];
+        }
+
+        return unknownFieldNameIcon;
+      }
+
      $rootScope.$watchMulti.call($scope, [
        'field',
        'fieldName',
--- a/src/ui/public/directives/field_name_icons/boolean_field_name_icon.html
+++ b/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>
--- a/src/ui/public/directives/field_name_icons/conflict_field_name_icon.html
+++ b/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>
--- a/src/ui/public/directives/field_name_icons/date_field_name_icon.html
+++ b/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>
--- a/src/ui/public/directives/field_name_icons/geo_point_field_name_icon.html
+++ b/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>
--- a/src/ui/public/directives/field_name_icons/ip_field_name_icon.html
+++ b/src/ui/public/directives/field_name_icons/ip_field_name_icon.html
@ -0,0 +1,4 @@
+<span
+  aria-label="IP address field"
+  class="field-name-icon kuiIcon fa-laptop"
+></span>
--- a/src/ui/public/directives/field_name_icons/murmur3_field_name_icon.html
+++ b/src/ui/public/directives/field_name_icons/murmur3_field_name_icon.html
@ -0,0 +1,6 @@
+<span
+  aria-label="Murmur3 field"
+  class="field-name-icon"
+>
+  <strong aria-hidden>h</strong>
+</span>
--- a/src/ui/public/directives/field_name_icons/number_field_name_icon.html
+++ b/src/ui/public/directives/field_name_icons/number_field_name_icon.html
@ -0,0 +1,6 @@
+<span
+  aria-label="Number field"
+  class="field-name-icon"
+>
+  <strong aria-hidden="true">#</strong>
+</span>
--- a/src/ui/public/directives/field_name_icons/source_field_name_icon.html
+++ b/src/ui/public/directives/field_name_icons/source_field_name_icon.html
@ -0,0 +1,4 @@
+<span
+  aria-label="Source field"
+  class="field-name-icon kuiIcon fa-file-text-o"
+></span>
--- a/src/ui/public/directives/field_name_icons/string_field_name_icon.html
+++ b/src/ui/public/directives/field_name_icons/string_field_name_icon.html
@ -0,0 +1,6 @@
+<span
+  aria-label="String field"
+  class="field-name-icon"
+>
+  <strong aria-hidden="true">t</strong>
+</span>
--- a/src/ui/public/directives/field_name_icons/unknown_field_name_icon.html
+++ b/src/ui/public/directives/field_name_icons/unknown_field_name_icon.html
@ -0,0 +1,6 @@
+<span
+  aria-label="Unknown field"
+  class="field-name-icon"
+>
+  <strong aria-hidden>?</strong>
+</span>