Improve Visualize screen-reader accessibility: (elastic#11599)

- Add aria-label to Tile Map visualization's 'Fit Data Bounds' button. - Add aria-label for Visualize Editor sidebar index pattern. - Add aria-label to Time Series Visual Builder Annotation icon options. - Add aria-label for Time Series Visual Builder AggSelectOption. - Add aria-label to Time Series Visual Builder Annotation selected icon option. - Adjust aria-labels for Heatmap visualization options. - Adjust aria-labels for ValueAxes add and remove buttons.
cjcenizal · May 11, 2017 · c21e339 · c21e339
1 parent 78cb3a8
commit c21e339
Show file tree

Hide file tree

Showing 7 changed files with 49 additions and 29 deletions.
diff --git a/src/core_plugins/kbn_vislib_vis_types/public/controls/heatmap_options.html b/src/core_plugins/kbn_vislib_vis_types/public/controls/heatmap_options.html
@@ -86,11 +86,12 @@
           Custom Ranges
         </span>
       </div>
-      <input aria-label="enable"
-             ng-model="vis.params.setColorRange"
-             type="checkbox"
-             class="kuiSideBarSectionTitle__action"
-             ng-click="toggleColorRangeSection(true)"
+      <input
+        aria-label="Enable custom ranges"
+        ng-model="vis.params.setColorRange"
+        type="checkbox"
+        class="kuiSideBarSectionTitle__action"
+        ng-click="toggleColorRangeSection(true)"
       >
     </div>
 
@@ -172,10 +173,11 @@
           Show Labels
         </span>
       </div>
-      <input aria-label="enable"
-             ng-model="valueAxis.labels.show"
-             type="checkbox"
-             class="kuiSideBarSectionTitle__action"
+      <input
+        aria-label="Show labels"
+        ng-model="valueAxis.labels.show"
+        type="checkbox"
+        class="kuiSideBarSectionTitle__action"
       >
     </div>
     <div ng-if="valueAxis.labels.show" ng-show="showLabels" class="kuiSideBarCollapsibleSection">

diff --git a/src/core_plugins/kbn_vislib_vis_types/public/controls/point_series/value_axes.html b/src/core_plugins/kbn_vislib_vis_types/public/controls/point_series/value_axes.html
@@ -5,9 +5,10 @@
     </div>
 
     <button
-      aria-label="Add value axis"
+      data-test-subj="visualizeAddYAxisButton"
+      aria-label="Add Y axis"
       ng-click="addValueAxis()"
-      tooltip="Add value axis"
+      tooltip="Add Y axis"
       tooltip-append-to-body="true"
       type="button"
       class="fa fa-plus kuiSideBarSectionTitle__action"
@@ -37,9 +38,9 @@
 
       <button
         ng-hide="vis.params.valueAxes.length === 1"
-        aria-label="Remove value axis"
+        aria-label="Remove Y axis"
         ng-click="removeValueAxis(axis)"
-        tooltip="Remove value axis"
+        tooltip="Remove Y axis"
         tooltip-append-to-body="true"
         type="button"
         class="fa fa-remove kuiSideBarCollapsibleTitle__action"

diff --git a/src/core_plugins/kibana/public/visualize/editor/sidebar.html b/src/core_plugins/kibana/public/visualize/editor/sidebar.html
@@ -6,7 +6,12 @@
     novalidate
   ><!-- see http://goo.gl/9kgz5w -->
 
-    <div css-truncate title="{{indexPattern.id}}" ng-if="vis.type.requiresSearch" class="index-pattern">
+    <div
+      css-truncate
+      aria-label="{{:: 'Index pattern: ' + indexPattern.id}}"
+      ng-if="vis.type.requiresSearch"
+      class="index-pattern"
+    >
       {{ indexPattern.id }}
     </div>
 

diff --git a/src/core_plugins/metrics/public/components/aggs/agg_select.js b/src/core_plugins/metrics/public/components/aggs/agg_select.js
@@ -73,11 +73,13 @@ class AggSelectOption extends Component {
         note = (<span className="vis_editor__agg_select-note">(requires child aggregation)</span>);
       }
       return (
-        <div className="Select-option vis_editor__agg_select-heading"
+        <div
+          className="Select-option vis_editor__agg_select-heading"
           onMouseEnter={this.handleMouseEnter}
           onMouseDown={this.handleMouseDown}
           onMouseMove={this.handleMouseMove}
-          title={label}>
+          ariaLabel={label}
+        >
           <span className="Select-value-label" style={style}>
             <strong>{label}</strong>
             {note}
@@ -86,11 +88,13 @@ class AggSelectOption extends Component {
       );
     }
     return (
-      <div className={this.props.className}
+      <div
+        className={this.props.className}
         onMouseEnter={this.handleMouseEnter}
         onMouseDown={this.handleMouseDown}
         onMouseMove={this.handleMouseMove}
-        title={label}>
+        ariaLabel={label}
+      >
         <span className="Select-value-label" style={style}>
           { this.props.children }
         </span>

diff --git a/src/core_plugins/metrics/public/components/icon_select.js b/src/core_plugins/metrics/public/components/icon_select.js
@@ -27,15 +27,21 @@ class IconOption extends Component {
 
   render() {
     const icon = this.props.option.value;
-    const title = this.props.option.label;
+    const label = this.props.option.label;
     return (
       <div className={this.props.className}
         onMouseEnter={this.handleMouseEnter}
         onMouseDown={this.handleMouseDown}
         onMouseMove={this.handleMouseMove}
-        title={title}>
-        <span className="Select-value-label">
-          <i className={`vis_editor__icon_select-option fa ${icon}`}></i>
+      >
+        <span
+          className="Select-value-label"
+          aria-label={`${label} icon`}
+        >
+          <span
+            className={`vis_editor__icon_select-option kuiIcon ${icon}`}
+            aria-hidden="true"
+          ></span>
           { this.props.children }
         </span>
       </div>
@@ -60,9 +66,12 @@ function IconValue(props) {
   const icon = props.value && props.value.value;
   const label = props.value && props.value.label;
   return (
-    <div className="Select-value" title={label}>
-      <span className="Select-value-label">
-        <i className={`vis_editor__icon_select-value fa ${icon}`}></i>
+    <div className="Select-value">
+      <span
+        className="Select-value-label"
+        aria-label={`${label} icon`}
+      >
+        <span className={`vis_editor__icon_select-value kuiIcon ${icon}`}></span>
         { props.children }
       </span>
     </div>

diff --git a/src/ui/public/vis_maps/kibana_map.js b/src/ui/public/vis_maps/kibana_map.js
@@ -17,7 +17,7 @@ function makeFitControl(fitContainer, kibanaMap) {
     },
     onAdd: function (leafletMap) {
       this._leafletMap = leafletMap;
-      $(this._fitContainer).html('<a class="fa fa-crop" href="#" title="Fit Data Bounds"></a>')
+      $(this._fitContainer).html('<a class="kuiIcon fa-crop" href="#" aria-label="Fit Data Bounds"></a>')
         .on('click', e => {
           e.preventDefault();
           this._kibanaMap.fitToData();

diff --git a/test/functional/page_objects/point_series_page.js b/test/functional/page_objects/point_series_page.js
@@ -1,6 +1,7 @@
 export function PointSeriesPageProvider({ getService }) {
   const remote = getService('remote');
   const config = getService('config');
+  const testSubjects = getService('testSubjects');
   const log = getService('log');
 
   const defaultFindTimeout = config.get('timeouts.find');
@@ -21,9 +22,7 @@ export function PointSeriesPageProvider({ getService }) {
     }
 
     clickAddAxis() {
-      return remote
-        .setFindTimeout(defaultFindTimeout)
-        .findByCssSelector('button[aria-label="Add value axis"]')
+      return testSubjects.find('visualizeAddYAxisButton')
         .click();
     }