Visualize Accessibility Issues (#13428)

src/core_plugins/kbn_vislib_vis_types/public/controls/gauge_options.html

@@ -97,16 +97,17 @@
         <table class="vis-editor-agg-editor-ranges form-group" ng-show="vis.params.gauge.colorsRange.length">
           <tr>
             <th>
-              <label>From</label>
+              <label id="gaugeOptionsCustomRangeFrom">From</label>
             </th>
             <th colspan="2">
-              <label>To</label>
+              <label id="gaugeOptionsCustomRangeTo">To</label>
             </th>
           </tr>
 
           <tr ng-repeat="range in vis.params.gauge.colorsRange track by $index">
             <td>
               <input
+                aria-labelledby="gaugeOptionsCustomRangeFrom"
                 ng-model="range.from"
                 type="number"
                 class="form-control"
@@ -117,6 +118,7 @@
             </td>
             <td>
               <input
+                aria-labelledby="gaugeOptionsCustomRangeTo"
                 ng-model="range.to"
                 type="number"
                 class="form-control"

src/core_plugins/kbn_vislib_vis_types/public/controls/vislib_basic_options.html

@@ -1,9 +1,10 @@
 <div>
   <div class="vis-option-item">
-    <label>
+    <label for="visualizeBasicSettingsLegendPosition">
       Legend Position
     </label>
     <select
+      id="visualizeBasicSettingsLegendPosition"
       class="form-control"
       ng-model="vis.params.legendPosition"
       ng-options="position.value as position.text for position in vis.type.editorConfig.collections.legendPositions"
@@ -11,7 +12,7 @@
     </select>
   </div>
   <div class="vis-option-item">
-    <label>
+    <label id="visualizeBasicSettingsShowTooltip">
       <input type="checkbox" ng-model="vis.params.addTooltip">
       Show Tooltip
     </label>

src/core_plugins/metrics/public/components/panel_config/metric.js

@@ -85,11 +85,13 @@ class MetricPanelConfig extends Component {
           <div
             className={`kbnTabs__tab${selectedTab === 'data' && '-active' || ''}`}
             onClick={() => this.switchTab('data')}
+            tabIndex="0"
           >Data
           </div>
           <div
             className={`kbnTabs__tab${selectedTab === 'options' && '-active' || ''}`}
             onClick={() => this.switchTab('options')}
+            tabIndex="0"
           >Panel Options
           </div>
         </div>

src/core_plugins/metrics/public/components/panel_config/timeseries.js

@@ -146,16 +146,19 @@ class TimeseriesPanelConfig extends Component {
           <div
             className={`kbnTabs__tab${selectedTab === 'data' && '-active' || ''}`}
             onClick={() => this.switchTab('data')}
+            tabIndex="0"
           >Data
           </div>
           <div
             className={`kbnTabs__tab${selectedTab === 'options' && '-active' || ''}`}
             onClick={() => this.switchTab('options')}
+            tabIndex="0"
           >Panel Options
           </div>
           <div
             className={`kbnTabs__tab${selectedTab === 'annotations' && '-active' || ''}`}
             onClick={() => this.switchTab('annotations')}
+            tabIndex="0"
           >Annotations
           </div>
         </div>

src/core_plugins/metrics/public/components/vis_editor_visualization.js

@@ -61,7 +61,7 @@ class VisEditorVisualization extends Component {
     if (autoApply) applyMessage = 'The changes will be automatically applied.';
     const applyButton = (
       <div className="vis_editor__dirty_controls">
-        <div className="vis_editor__dirty_controls-toggle-label">Auto Apply</div>
+        <div className="vis_editor__dirty_controls-toggle-label" id="tsvbAutoApply">Auto Apply</div>
         <div className="vis_editor__dirty_controls-toggle">
           <Toggle
             defaultChecked={autoApply}

src/core_plugins/metrics/public/components/vis_picker.js

@@ -15,7 +15,7 @@ function VisPickerItem(props) {
       <div className={iconClassName}>
         <i className={`fa ${icon}`} />
       </div>
-      <div className={labelClassName}>
+      <div className={labelClassName} tabIndex="0">
         { label }
       </div>
     </div>

src/core_plugins/table_vis/public/table_vis_params.html

@@ -1,6 +1,6 @@
 <div class="form-group">
-  <label>Per Page</label>
-  <input type="number" ng-model="vis.params.perPage" class="form-control">
+  <label for="datatableVisualizationPerPage">Per Page</label>
+  <input type="number" ng-model="vis.params.perPage" class="form-control" id="datatableVisualizationPerPage">
 </div>
 
 <div class="checkbox">
@@ -32,10 +32,10 @@
 </div>
 
 <div>
-  <label>Total function</label>
+  <label for="datatableVisualizationTotalFunction">Total function</label>
   <select ng-disabled="!vis.params.showTotal"
           class="form-control"
           ng-model="vis.params.totalFunc"
-          ng-options="x for x in totalAggregations">
+          ng-options="x for x in totalAggregations" id="datatableVisualizationTotalFunction">
   </select>
 </div>

src/core_plugins/tile_map/public/editors/tile_map.html

@@ -1,7 +1,9 @@
 <!-- vis type specific options -->
 <div class="form-group">
-  <label>Map type</label>
-    <select name="agg"
+  <label for="coordinateMapOptionsMapType">Map type</label>
+    <select
+      id="coordinateMapOptionsMapType"
+      name="agg"
     class="form-control"
     ng-model="vis.params.mapType"
     ng-init="vis.params.mapType || vis.type.editorConfig.collections.mapTypes[0]"

src/core_plugins/timelion/public/directives/timelion_interval/timelion_interval.html

@@ -5,6 +5,8 @@
   ng-class="{ 'timelion-interval-custom-compact': interval === 'other' }"
   ng-model="otherInterval"
 ><select
+  id="timelionInterval"
+  aria-label="Select interval"
   class="kuiSelect timelion-interval-presets"
   ng-options="intervalOption for intervalOption in intervalOptions"
   ng-class="{ 'timelion-interval-presets-compact': interval === 'other'}"

src/core_plugins/timelion/public/vis/timelion_vis_params.html

@@ -1,6 +1,6 @@
 <div>
   <div class="form-group">
-    <label>Interval</label>
+    <label for="timelionInterval">Interval</label>
     <div class="form-group">
       <timelion-interval model="vis.params.interval"></timelion-interval>
     </div>