Improve accessibility of the visualize editor (#13780)

* Use aria-expanded and better labels for agg collapsables * Fix all agg options collapsables, fix #12892 * Label all vis editor inputs correctly, fix #11859 * Fix broken functional test
elastic · Aug 31, 2017 · b296d86 · b296d86
1 parent 10b9a6b
commit b296d86
Show file tree

Hide file tree

Showing 27 changed files with 140 additions and 47 deletions.
diff --git a/src/core_plugins/kbn_vislib_vis_types/public/controls/gauge_options.html b/src/core_plugins/kbn_vislib_vis_types/public/controls/gauge_options.html
@@ -78,6 +78,10 @@
   <div>
     <div class="kuiSideBarCollapsibleTitle">
       <div
+        kbn-accessible-click
+        aria-expanded="{{!!showColorRange}}"
+        aria-controls="gaugeOptionsRanges"
+        aria-label="Toggle range options"
         class="kuiSideBarCollapsibleTitle__label"
         ng-click="showColorRange = !showColorRange"
       >
@@ -92,7 +96,7 @@
       </div>
     </div>
 
-    <div ng-show="showColorRange" class="kuiSideBarCollapsibleSection">
+    <div id="gaugeOptionsRanges" ng-show="showColorRange" class="kuiSideBarCollapsibleSection">
       <div class="kuiSideBarSection">
         <table class="vis-editor-agg-editor-ranges form-group" ng-show="vis.params.gauge.colorsRange.length">
           <tr>
@@ -158,6 +162,10 @@
   <div ng-show="vis.params.gauge.colorsRange.length > 1">
     <div class="kuiSideBarCollapsibleTitle">
       <div
+        kbn-accessible-click
+        aria-expanded="{{!!showColorOptions}}"
+        aria-controls="gaugeOptionsColors"
+        aria-label="Toggle color options"
         class="kuiSideBarCollapsibleTitle__label"
         ng-click="showColorOptions = !showColorOptions"
       >
@@ -174,7 +182,7 @@
       </span>
       </div>
     </div>
-    <div ng-if="showColorOptions" class="kuiSideBarCollapsibleSection">
+    <div id="gaugeOptionsColors" ng-if="showColorOptions" class="kuiSideBarCollapsibleSection">
       <div class="kuiSideBarSection">
         <div class="kuiSideBarFormRow">
           <label class="kuiSideBarFormRow__label" for="colorSchema">
@@ -203,13 +211,13 @@
     </div>
   </div>
 
-
-
-
-
   <div>
     <div class="kuiSideBarCollapsibleTitle">
       <div
+        kbn-accessible-click
+        aria-expanded="{{!!showStyle}}"
+        aria-controls="gaugeOptionsStyle"
+        aria-label="Toggle style options"
         class="kuiSideBarCollapsibleTitle__label"
         ng-click="showStyle = !showStyle"
       >
@@ -226,7 +234,7 @@
         </span>
       </div>
     </div>
-    <div ng-if="showStyle" class="kuiSideBarCollapsibleSection">
+    <div id="gaugeOptionsStyle" ng-if="showStyle" class="kuiSideBarCollapsibleSection">
 
       <div class="kuiSideBarSection">
         <div ng-hide="vis.params.gauge.type === 'simple'">

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
@@ -84,6 +84,9 @@
         class="kuiSideBarCollapsibleTitle__label"
         ng-click="toggleColorRangeSection()"
         kbn-accessible-click
+        aria-expanded="{{!!showColorRange}}"
+        aria-controls="heatmapOptionsRanges"
+        aria-label="Toggle custom ranges options"
       >
         <span
           aria-hidden="true"
@@ -104,7 +107,12 @@
       >
     </div>
 
-    <div ng-if="vis.params.setColorRange" ng-show="showColorRange" class="kuiSideBarCollapsibleSection">
+    <div
+      id="heatmapOptionsRanges"
+      ng-if="vis.params.setColorRange"
+      ng-show="showColorRange"
+      class="kuiSideBarCollapsibleSection"
+    >
       <div class="kuiSideBarSection">
         <table class="vis-editor-agg-editor-ranges form-group" ng-show="vis.params.colorsRange.length">
           <tr>
@@ -172,6 +180,8 @@
         class="kuiSideBarCollapsibleTitle__label"
         ng-click="toggleLabelSection()"
         kbn-accessible-click
+        aria-expanded="{{!!showLabels}}"
+        aria-controls="heatmapOptionsLabels"
       >
         <span
           aria-hidden="true"
@@ -192,7 +202,12 @@
         class="kuiSideBarSectionTitle__action"
       >
     </div>
-    <div ng-if="vis.params.valueAxes[0].labels.show" ng-show="showLabels" class="kuiSideBarCollapsibleSection">
+    <div
+      id="heatmapOptionsLabels"
+      ng-if="vis.params.valueAxes[0].labels.show"
+      ng-show="showLabels"
+      class="kuiSideBarCollapsibleSection"
+    >
       <div class="kuiSideBarSection">
         <div class="kuiSideBarFormRow">
           <label class="kuiSideBarFormRow__label" for="rotateLabels">

diff --git a/src/core_plugins/kbn_vislib_vis_types/public/controls/point_series/grid.html b/src/core_plugins/kbn_vislib_vis_types/public/controls/point_series/grid.html
@@ -4,6 +4,9 @@
       class="kuiSideBarCollapsibleTitle__label"
       ng-click="isGridOpen = !isGridOpen"
       kbn-accessible-click
+      aria-expanded="{{!!isGridOpen}}"
+      aria-controls="visGridOptions"
+      aria-label="Toggle grid options"
     >
       <span
         aria-hidden="true"
@@ -16,7 +19,7 @@
     </div>
   </div>
 
-  <div ng-show="isGridOpen" class="kuiSideBarCollapsibleSection">
+  <div id="visGridOptions" ng-show="isGridOpen" class="kuiSideBarCollapsibleSection">
     <!-- General -->
     <div class="kuiSideBarSection">
       <div class="kuiSideBarFormRow">

diff --git a/src/core_plugins/kbn_vislib_vis_types/public/controls/point_series/series.html b/src/core_plugins/kbn_vislib_vis_types/public/controls/point_series/series.html
@@ -15,6 +15,9 @@
         class="kuiSideBarCollapsibleTitle__label"
         ng-click="isSeriesOpen = !isSeriesOpen"
         kbn-accessible-click
+        aria-expanded="{{!!isSeriesOpen}}"
+        aria-controls="visSeriesOptions{{$index}}"
+        aria-label="Toggle {{chart.data.label}} options"
       >
         <span
           aria-hidden="true"
@@ -27,7 +30,7 @@
       </div>
     </div>
 
-    <div ng-show="isSeriesOpen" class="kuiSideBarCollapsibleSection">
+    <div id="visSeriesOptions{{$index}}" ng-show="isSeriesOpen" class="kuiSideBarCollapsibleSection">
       <!-- General -->
       <div class="kuiSideBarSection">
 

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
@@ -24,6 +24,9 @@
         class="kuiSideBarCollapsibleTitle__label"
         ng-click="isValueAxisOpen = !isValueAxisOpen"
         kbn-accessible-click
+        aria-expanded="{{!!isValueAxisOpen}}"
+        aria-controls="axisOptions{{axis.id}}"
+        aria-label="Toggle {{axis.name}} options"
       >
         <span
           aria-hidden="true"
@@ -48,7 +51,7 @@
       ></button>
     </div>
 
-    <div ng-show="isValueAxisOpen" class="kuiSideBarCollapsibleSection">
+    <div id="axisOptions{{axis.id}}" ng-show="isValueAxisOpen" class="kuiSideBarCollapsibleSection">
       <!-- General -->
       <div class="kuiSideBarSection">
         <div class="kuiSideBarFormRow">

diff --git a/src/ui/public/agg_types/controls/date_ranges.html b/src/ui/public/agg_types/controls/date_ranges.html
@@ -2,17 +2,18 @@
     <table class="vis-editor-agg-editor-ranges form-group" ng-show="agg.params.ranges.length">
       <tr>
         <th>
-          <label>From</label>
+          <label id="visEditorDateRangeFrom{{agg.id}}">From</label>
         </th>
         <th colspan="2">
-          <label>To</label>
+          <label id="visEditorDateRangeTo{{agg.id}}">To</label>
         </th>
       </tr>
 
       <tr
         ng-repeat="range in agg.params.ranges track by $index">
         <td class="kbn-timepicker">
           <input
+            aria-labelledby="visEditorDateRangeFrom{{agg.id}}"
             ng-model="range.from"
             validate-date-math
             type="text"
@@ -21,6 +22,7 @@
         </td>
         <td class="kbn-timepicker">
           <input
+            aria-labelledby="visEditorDateRangeTo{{agg.id}}"
             ng-model="range.to"
             validate-date-math
             class="form-control"
@@ -29,6 +31,7 @@
         <td>
           <button
             type="button"
+            aria-label="Remove this range"
             ng-click="agg.params.ranges.splice($index, 1)"
             class="kuiButton kuiButton--danger kuiButton--small">
             <i class="fa fa-times" ></i>

diff --git a/src/ui/public/agg_types/controls/extended_bounds.html b/src/ui/public/agg_types/controls/extended_bounds.html
@@ -1,24 +1,38 @@
 <div ng-if="aggParam.shouldShow(agg)">
   <div>
-    <label>Extended Bounds</label>
+    <label id="extendedBoundsLabel{{agg.id}}">Extended Bounds</label>
     <kbn-info info="Min and Max do not filter the results, but rather extend the bounds of the result set."></kbn-info>
   </div>
   <div class="vis-editor-agg-form-row">
     <div class="form-group">
-      <div>Min <small>(optional)</small></div>
+      <label
+        id="extendedBoundsMinLabel{{agg.id}}"
+        for="extendedBoundsMinInput{{agg.id}}"
+      >
+        Min <small>(optional)</small>
+      </label>
       <input
+        id="extendedBoundsMinInput{{agg.id}}"
+        aria-labelledby="extendedBoundsLabel{{agg.id}} extendedBoundsMinLabel{{agg.id}}"
         ng-model="agg.params.extended_bounds.min"
         type="number"
         class="form-control"
         name="extended_bounds.min" />
     </div>
     <div class="form-group">
-      <div>Max <small>(optional)</small></div>
+      <label
+        id="extendedBoundsMaxLabel{{agg.id}}"
+        for="extendedBoundsMaxInput{{agg.id}}"
+      >
+        Max <small>(optional)</small>
+      </label>
       <input
+        id="extendedBoundsMaxInput{{agg.id}}"
+        aria-labelledby="extendedBoundsLabel{{agg.id}} extendedBoundsMaxLabel{{agg.id}}"
         ng-model="agg.params.extended_bounds.max"
         type="number"
         class="form-control"
         name="extended_bounds.max" />
     </div>
   </div>
-</div>
+</div>
diff --git a/src/ui/public/agg_types/controls/field.html b/src/ui/public/agg_types/controls/field.html
@@ -1,9 +1,10 @@
 <div class="form-group">
-  <label for="field">
+  <label>
     Field
   </label>
 
   <ui-select
+    title="Aggregation Field"
     name="field"
     required
     class="vis-editor-field-ui-select field-select"

diff --git a/src/ui/public/agg_types/controls/filters.html b/src/ui/public/agg_types/controls/filters.html
@@ -1,7 +1,7 @@
 <div class="form-group">
   <div ng-repeat="filter in agg.params.filters">
     <div class="vis-editor-agg-header">
-      <label>
+      <label for="visEditorFilterInput{{agg.id}}">
           Filter {{$index + 1}}
           <span ng-if="filter.label">- {{ filter.label }}</span>
       </label>
@@ -10,11 +10,15 @@
         <button
           ng-click="showConfig = !showConfig"
           type="button"
+          aria-label="Toggle filter label"
+          aria-expanded="{{!!showConfig}}"
+          aria-controls="visEditorFilterLabel{{agg.id}}"
           class="kuiButton kuiButton--basic kuiButton--small">
           <i class="fa fa-tag"></i>
         </button>
         <button
           type="button"
+          aria-label="Remove this filter"
           ng-click="agg.params.filters.splice($index, 1)"
           class="kuiButton kuiButton--danger kuiButton--small">
           <i class="fa fa-times"></i>
@@ -24,16 +28,18 @@
 
     <div class="form-group">
       <input
+        id="visEditorFilterInput{{agg.id}}"
         parse-query
         ng-model="filter.input.query"
         type="text"
         class="form-control"
         name="filter{{$index}}">
     </div>
 
-    <div class="form-group" ng-show="showConfig">
-      <label>Filter {{$index + 1}} label</label>
+    <div class="form-group" ng-show="showConfig" id="visEditorFilterLabel{{agg.id}}">
+      <label for="visEditorFilterLabelInput{{agg.id}}">Filter {{$index + 1}} label</label>
       <input
+        id="visEditorFilterLabelInput{{agg.id}}"
         ng-model="filter.label"
         placeholder="Label"
         type="text"

diff --git a/src/ui/public/agg_types/controls/interval.html b/src/ui/public/agg_types/controls/interval.html
@@ -1,5 +1,5 @@
 <div class="form-group">
-  <label>
+  <label for="visEditorInterval{{agg.id}}">
     Interval
     <kbn-info
       ng-show="agg.buckets.getInterval().scaled"
@@ -9,6 +9,7 @@
     </kbn-info>
   </label>
   <select
+    id="visEditorInterval{{agg.id}}"
     ng-if="aggParam.options"
     ng-model="agg.params.interval"
     ng-change="agg.write()"
@@ -19,6 +20,7 @@
     <option value="">-- select a valid interval --</option>
   </select>
   <input
+    aria-label="Custom interval"
     type="text"
     name="customInterval"
     ng-model="agg.params.customInterval"
@@ -28,6 +30,7 @@
     class="form-control"
     required />
   <input
+    id="visEditorInterval{{agg.id}}"
     ng-if="!aggParam.options"
     ng-model="agg.params.interval"
     required