Improve Visualize sidebar accessibility. (#11754) (#11827)

* Make Visualize sidebar tabs keyboard accssible.
* Make Visualize Heatmap sidebar options keyboard accessible.
* Remove unnecessary kbn-accessible-click from Visualize reset button.
* Make Visualize Point Series sidebar options keyboard accessible.

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

@@ -11,7 +11,14 @@
         ng-options="mode for mode in vis.type.params.colorSchemas"
       ></select>
     </div>
-    <div class="text-info text-center" ng-show="customColors" ng-click="resetColors()">reset colors</div>
+    <div
+      class="text-info text-center"
+      ng-show="customColors"
+      ng-click="resetColors()"
+      kbn-accessible-click
+    >
+      reset colors
+    </div>
   </div>
 
   <div class="kuiSideBarFormRow">
@@ -76,11 +83,12 @@
       <div
         class="kuiSideBarCollapsibleTitle__label"
         ng-click="toggleColorRangeSection()"
+        kbn-accessible-click
       >
         <span
           aria-hidden="true"
           ng-class="{ 'fa-caret-down': showColorRange, 'fa-caret-right': !showColorRange }"
-          class="fa fa-caret-right kuiSideBarCollapsibleTitle__caret"
+          class="kuiIcon fa-caret-right kuiSideBarCollapsibleTitle__caret"
         ></span>
         <span class="kuiSideBarCollapsibleTitle__text">
           Custom Ranges
@@ -92,6 +100,7 @@
         type="checkbox"
         class="kuiSideBarSectionTitle__action"
         ng-click="toggleColorRangeSection(true)"
+        kbn-accessible-click
       >
     </div>
 
@@ -131,8 +140,9 @@
                 type="button"
                 ng-click="removeRange($index)"
                 class="kuiButton kuiButton--danger kuiButton--small"
+                kbn-accessible-click
               >
-                <i class="fa fa-times"></i>
+                <span class="kuiIcon fa-times"><span>
               </button>
             </td>
           </tr>
@@ -140,13 +150,14 @@
 
         <div class="hintbox" ng-show="!vis.params.colorsRange.length">
           <p>
-            <i class="fa fa-danger text-danger"></i>
+            <span class="kuiIcon fa-danger text-danger"><span>
             <strong>Required:</strong> You must specify at least one range.
           </p>
         </div>
 
         <button
           ng-click="addRange()"
+          kbn-accessible-click
           class="kuiButton kuiButton--primary kuiButton--fullWidth"
         >
           Add Range
@@ -160,6 +171,7 @@
       <div
         class="kuiSideBarCollapsibleTitle__label"
         ng-click="toggleLabelSection()"
+        kbn-accessible-click
       >
         <span
           aria-hidden="true"
@@ -167,7 +179,7 @@
           'fa-caret-down': showLabels,
           'fa-caret-right': !showLabels
           }"
-          class="fa fa-caret-right kuiSideBarCollapsibleTitle__caret"
+          class="kuiIcon fa-caret-right kuiSideBarCollapsibleTitle__caret"
         ></span>
         <span class="kuiSideBarCollapsibleTitle__text">
           Show Labels

src/core_plugins/kbn_vislib_vis_types/public/controls/point_series/category_axis.html

@@ -34,14 +34,14 @@
   <!-- Advanced options -->
   <div class="kuiSideBarSection">
     <a
-      href=""
       class="kuiSideBarOptionsLink"
       ng-click="isCategoryAxisAdvancedOptionsOpen = !isCategoryAxisAdvancedOptionsOpen"
+      kbn-accessible-click
     >
       <span
         aria-hidden="true"
         ng-class="{ 'fa-caret-down': isCategoryAxisAdvancedOptionsOpen, 'fa-caret-right': !isCategoryAxisAdvancedOptionsOpen }"
-        class="fa fa-caret-right kuiSideBarOptionsLink__caret"
+        class="kuiIcon fa-caret-right kuiSideBarOptionsLink__caret"
       ></span>
       <span class="kuiSideBarOptionsLink__text">
         <span ng-show="!isCategoryAxisAdvancedOptionsOpen">

src/core_plugins/kbn_vislib_vis_types/public/controls/point_series/grid.html

@@ -3,11 +3,12 @@
     <div
       class="kuiSideBarCollapsibleTitle__label"
       ng-click="isGridOpen = !isGridOpen"
+      kbn-accessible-click
     >
       <span
         aria-hidden="true"
         ng-class="{ 'fa-caret-down': isGridOpen, 'fa-caret-right': !isGridOpen }"
-        class="fa fa-caret-right kuiSideBarCollapsibleTitle__caret"
+        class="kuiIcon fa-caret-right kuiSideBarCollapsibleTitle__caret"
       ></span>
       <span class="kuiSideBarCollapsibleTitle__text">
         Grid

src/core_plugins/kbn_vislib_vis_types/public/controls/point_series/series.html

@@ -14,11 +14,12 @@
         ng-init="isSeriesOpen = ($index === 0)"
         class="kuiSideBarCollapsibleTitle__label"
         ng-click="isSeriesOpen = !isSeriesOpen"
+        kbn-accessible-click
       >
         <span
           aria-hidden="true"
           ng-class="{ 'fa-caret-down': isSeriesOpen, 'fa-caret-right': !isSeriesOpen }"
-          class="fa fa-caret-right kuiSideBarCollapsibleTitle__caret"
+          class="kuiIcon fa-caret-right kuiSideBarCollapsibleTitle__caret"
         ></span>
         <span class="kuiSideBarCollapsibleTitle__text">
           {{chart.data.label}}

src/core_plugins/kbn_vislib_vis_types/public/controls/point_series/value_axes.html

@@ -11,7 +11,7 @@
       tooltip="Add Y axis"
       tooltip-append-to-body="true"
       type="button"
-      class="fa fa-plus kuiSideBarSectionTitle__action"
+      class="kuiIcon fa-plus kuiSideBarSectionTitle__action"
     ></button>
   </div>
 
@@ -23,11 +23,12 @@
       <div
         class="kuiSideBarCollapsibleTitle__label"
         ng-click="isValueAxisOpen = !isValueAxisOpen"
+        kbn-accessible-click
       >
         <span
           aria-hidden="true"
           ng-class="{ 'fa-caret-down': isValueAxisOpen, 'fa-caret-right': !isValueAxisOpen }"
-          class="fa fa-caret-right kuiSideBarCollapsibleTitle__caret"
+          class="kuiIcon fa-caret-right kuiSideBarCollapsibleTitle__caret"
         ></span>
         <span class="kuiSideBarCollapsibleTitle__text">
           {{axis.name}}
@@ -43,7 +44,7 @@
         tooltip="Remove Y axis"
         tooltip-append-to-body="true"
         type="button"
-        class="fa fa-remove kuiSideBarCollapsibleTitle__action"
+        class="kuiIcon fa-remove kuiSideBarCollapsibleTitle__action"
       ></button>
     </div>
 
@@ -120,14 +121,14 @@
       <!-- Advanced options -->
       <div class="kuiSideBarSection">
         <a
-          href=""
           class="kuiSideBarOptionsLink"
           ng-click="isValueAxisAdvancedOptionsOpen = !isValueAxisAdvancedOptionsOpen"
+          kbn-accessible-click
         >
           <span
             aria-hidden="true"
             ng-class="{ 'fa-caret-down': isValueAxisAdvancedOptionsOpen, 'fa-caret-right': !isValueAxisAdvancedOptionsOpen }"
-            class="fa fa-caret-right kuiSideBarOptionsLink__caret"
+            class="kuiIcon fa-caret-right kuiSideBarOptionsLink__caret"
           ></span>
           <span class="kuiSideBarOptionsLink__text">
             <span ng-show="!isValueAxisAdvancedOptionsOpen">
@@ -225,11 +226,12 @@
                   Max
                 </label>
                 <div class="kuiSideBarFormRow__control">
-                  <input name="yMax"
-                         class="kuiInput kuiSideBarInput"
-                         type="number"
-                         step="0.1"
-                         ng-model="axis.scale.max"
+                  <input
+                    name="yMax"
+                    class="kuiInput kuiSideBarInput"
+                    type="number"
+                    step="0.1"
+                    ng-model="axis.scale.max"
                   >
                 </div>
               </div>
@@ -239,12 +241,13 @@
                   Min
                 </label>
                 <div class="kuiSideBarFormRow__control">
-                  <input name="yMin"
-                         class="kuiInput kuiSideBarInput"
-                         type="number"
-                         step="0.1"
-                         greater-than="{{axis.scale.type === 'log' ? 0 : ''}}"
-                         ng-model="axis.scale.min"
+                  <input
+                    name="yMin"
+                    class="kuiInput kuiSideBarInput"
+                    type="number"
+                    step="0.1"
+                    greater-than="{{axis.scale.type === 'log' ? 0 : ''}}"
+                    ng-model="axis.scale.min"
                   >
                 </div>
               </div>

src/core_plugins/kibana/public/visualize/editor/sidebar.html

@@ -25,15 +25,18 @@
               class="vis-editor-subnav-link"
               ng-class="{'is-vis-editor-sub-nav-link-selected': sidebar.section == 'data'}"
               ng-click="sidebar.section='data'"
+              kbn-accessible-click
             >
               Data
             </a>
           </li>
+
           <li ng-repeat="tab in vis.type.params.optionTabs" ng-class="{active: sidebar.section == tab.name}">
             <a
               class="vis-editor-subnav-link"
               ng-class="{'is-vis-editor-sub-nav-link-selected': sidebar.section == tab.name}"
               ng-click="sidebar.section=tab.name"
+              kbn-accessible-click
             >
               {{tab.title}}
             </a>
@@ -51,9 +54,10 @@
             tooltip-append-to-body="1"
           >
             <a class="vis-editor-subnav-link vis-editor-subnav-link--danger">
-              <i class="fa fa-warning"></i>
+              <span class="kuiIcon fa-warning"></span>
             </a>
           </li>
+
           <li
             tooltip="Apply changes"
             tooltip-placement="bottom"
@@ -64,21 +68,25 @@
               class="kuiButton kuiButton--primary navbar-btn-link"
               type="submit"
               ng-disabled="!vis.dirty || visualizeEditor.errorCount() > 0"
+              aria-label="Update the visualization with your changes"
             >
-              <i class="fa fa-play"></i>
+              <span aria-hidden="true" class="kuiIcon fa-play"></span>
             </button>
           </li>
+
           <li
             tooltip="Discard changes"
             tooltip-placement="bottom"
             tooltip-popup-delay="400"
             tooltip-append-to-body="1"
           >
-            <button class="kuiButton kuiButton--basic navbar-btn-link"
+            <button
+              class="kuiButton kuiButton--basic navbar-btn-link"
               ng-disabled="!vis.dirty"
-              ng-click="resetEditableVis()">
-
-              <i class="fa fa-close"></i>
+              ng-click="resetEditableVis()"
+              aria-label="Reset the visualization"
+            >
+              <span class="kuiIcon fa-close"></span>
             </button>
           </li>
         </ul>