[Accessibility] Improve visualization legends accessibility (#14505)

* Make legend toggle button accessible, fix #11843 * Make legend filter buttons accessible * Highlight chart segments when focusing legend, fix #11845 * Make legend color picker accessible * Remove aria-hidden from legend * Use proper indentation * Remove bluring color button again * Close legend details on pressing escape * Add hint about the action * Only capture escape press when details are opened
elastic · Oct 26, 2017 · 00bbee3 · 00bbee3
1 parent 315da4e
commit 00bbee3
Show file tree

Hide file tree

Showing 3 changed files with 43 additions and 6 deletions.
diff --git a/src/ui/public/visualize/visualization.html b/src/ui/public/visualize/visualization.html
@@ -19,6 +19,6 @@ <h4>No results found</h4>
     ng-style="loadingStyle"
     ng-class="{ loading: vis.type.requiresSearch && searchSource.activeFetchCount > 0 }"
     class="visualize-chart"></div>
-  <visualize-legend aria-hidden="{{!vis.type.isAccessible}}" ng-if="addLegend"></visualize-legend>
+  <visualize-legend ng-if="addLegend"></visualize-legend>
 </div>
 <visualize-spy ng-if="showSpyPanel"></visualize-spy>
diff --git a/src/ui/public/visualize/visualize_legend.html b/src/ui/public/visualize/visualize_legend.html
@@ -3,10 +3,13 @@
     type="button"
     ng-click="toggleLegend()"
     class="kuiCollapseButton legend-collapse-button"
+    aria-label="Toggle legend"
+    aria-expanded="{{!!open}}"
+    aria-controls="{{::legendId}}"
   >
     <span class="kuiIcon {{getToggleLegendClasses()}}"></span>
   </button>
-  <ul class="legend-ul" ng-show="open">
+  <ul class="legend-ul" ng-show="open" id="{{::legendId}}">
 
     <li
       ng-repeat="legendData in labels track by legendData.label"
@@ -16,13 +19,18 @@
       class="legend-value color"
     >
 
-      <div class="legend-value-container">
+      <div class="legend-value-container" ng-keydown="onLegendEntryKeydown($event, this)">
         <div
+          kbn-accessible-click
+          data-label="{{legendData.label}}"
+          ng-focus="highlight($event)"
+          ng-blur="unhighlight($event)"
           ng-click="showDetails = !showDetails"
           ng-class="showDetails ? 'legend-value-full' : 'legend-value-truncate'"
           class="legend-value-title"
           tooltip="{{legendData.label}}"
           tooltip-animation="false"
+          aria-label="{{legendData.label}}, toggle options"
         >
           <i class="fa fa-circle" ng-style="{color: getColor(legendData.label)}"></i> {{legendData.label}}
         </div>
@@ -33,20 +41,35 @@
             ng-show="canFilter(legendData)"
           >
             <button
-              class="kuiButton kuiButton--basic kuiButton--small" ng-click="filter(legendData, false)"
+              class="kuiButton kuiButton--basic kuiButton--small"
+              ng-click="filter(legendData, false)"
+              aria-label="Filter for value {{legendData.label}}"
             >
               <span class="kuiIcon fa-search-plus"></span>
             </button>
 
             <button
-              class="kuiButton kuiButton--basic kuiButton--small" ng-click="filter(legendData, true)"
+              class="kuiButton kuiButton--basic kuiButton--small"
+              ng-click="filter(legendData, true)"
+              aria-label="Filter out value {{legendData.label}}"
             >
               <span class="kuiIcon fa-search-minus"></span>
             </button>
           </div>
 
-          <div class="legend-value-color-picker">
+          <div class="legend-value-color-picker" role="listbox">
+            <span
+              id="{{legendId}}ColorPickerDesc"
+              class="kuiScreenReaderOnly"
+            >
+              Set color for value {{legendData.label}}
+            </span>
             <i ng-repeat="choice in colors"
+              kbn-accessible-click
+              role="option"
+              aria-label="{{choice}}"
+              aria-describedby="{{legendId}}ColorPickerDesc"
+              aria-selected="{{choice === getColor(legendData.label)}}"
               ng-click="setColor(legendData.label, choice)"
               ng-class="choice == getColor(legendData.label) ? 'fa-circle-o' : 'fa-circle'"
               ng-style="{color: choice}" class="fa dot"

diff --git a/src/ui/public/visualize/visualize_legend.js b/src/ui/public/visualize/visualize_legend.js
@@ -3,6 +3,7 @@ import html from 'ui/visualize/visualize_legend.html';
 import { VislibLibDataProvider } from 'ui/vislib/lib/data';
 import { FilterBarClickHandlerProvider } from 'ui/filter_bar/filter_bar_click_handler';
 import { uiModules } from 'ui/modules';
+import { htmlIdGenerator, keyCodes } from 'ui_framework/services';
 
 
 uiModules.get('kibana')
@@ -16,6 +17,7 @@ uiModules.get('kibana')
     link: function ($scope) {
       const $state = getAppState();
       const clickHandler = filterBarClickHandler($state);
+      $scope.legendId = htmlIdGenerator()('legend');
       $scope.open = $scope.uiState.get('vis.legendOpen', true);
 
       $scope.$watch('visData', function (data) {
@@ -91,6 +93,18 @@ uiModules.get('kibana')
         return filters.length;
       };
 
+      /**
+       * Keydown listener for a legend entry.
+       * This will close the details panel of this legend entry when pressing Escape.
+       */
+      $scope.onLegendEntryKeydown = function (event, scope) {
+        if (event.keyCode === keyCodes.ESCAPE && scope.showDetails) {
+          event.preventDefault();
+          event.stopPropagation();
+          scope.showDetails = false;
+        }
+      };
+
       $scope.colors = [
         '#3F6833', '#967302', '#2F575E', '#99440A', '#58140C', '#052B51', '#511749', '#3F2B5B', //6
         '#508642', '#CCA300', '#447EBC', '#C15C17', '#890F02', '#0A437C', '#6D1F62', '#584477', //2