Improve accessibility of visualization view (#13726)

* Use correct aria-label react attribute

* Label TSVB auto apply button, fix #12900

* Create possibility to conditionally disable input-focus directive

* Disable auto focus when creating a new viz, fix #12888

* Fix styling of label in TSVB

* Disable auto focus in visualizations, fix #11856

* Fix disable of auto focus

* Disable auto focus of index selection in vis wizard

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

@@ -37,6 +37,7 @@
             query="state.query"
             app-name="'visualize'"
             on-submit="updateQuery($query)"
+            disable-auto-focus="true"
           >
           </query-bar>
         </div>

src/core_plugins/kibana/public/visualize/wizard/step_2.html

@@ -25,6 +25,7 @@ <h2 class="kuiTitle kuiVerticalRhythm">
         list-property="attributes.title"
         user-make-url="makeUrl"
         class="wizard-row visualizeWizardPaginatedSelectableList kuiVerticalRhythm"
+        disable-auto-focus="true"
       ></paginated-selectable-list>
     </div>
 
@@ -38,6 +39,7 @@ <h2 class="kuiTitle kuiVerticalRhythm">
         type="searches"
         class="wizard-row visualizeWizardSavedObjectFinder kuiVerticalRhythm"
         make-url="step2WithSearchUrl"
+        disable-auto-focus="true"
       ></saved-object-finder>
     </div>
   </div>

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

@@ -61,9 +61,16 @@ 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" id="tsvbAutoApply">Auto Apply</div>
+        <label
+          className="vis_editor__dirty_controls-toggle-label"
+          id="tsvbAutoApply"
+          htmlFor="tsvbAutoApplyInput"
+        >
+          Auto Apply
+        </label>
         <div className="vis_editor__dirty_controls-toggle">
           <Toggle
+            id="tsvbAutoApplyInput"
             defaultChecked={autoApply}
             icons={false}
             onChange={this.props.onToggleAutoApply} />

src/core_plugins/metrics/public/less/editor.less

@@ -470,9 +470,9 @@
   padding: 4px 10px 0;
   flex: 0 0 auto;
   color: @gray;
+  font-weight: normal;
 }
 
 .vis_editor__dirty_controls-toggle {
   flex: 0 0 auto;
 }
-

src/ui/public/directives/__tests__/input_focus.js

@@ -35,10 +35,12 @@ describe('Input focus directive', function () {
     $rootScope.$digest();
     $timeout.flush();
     selectedEl = document.activeElement;
-    selectedText = selectedEl.value.slice(
-      selectedEl.selectionStart,
-      selectedEl.selectionEnd
-    );
+    if (selectedEl.value) {
+      selectedText = selectedEl.value.slice(
+        selectedEl.selectionStart,
+        selectedEl.selectionEnd
+      );
+    }
   }
 
 
@@ -54,4 +56,14 @@ describe('Input focus directive', function () {
     expect(selectedText.length).to.equal(inputValue.length);
     expect(selectedText).to.equal(inputValue);
   });
+
+  it('should not focus the input if disable-input-focus is set to true on the same element', function () {
+    renderEl('<input type="text" ng-model="value" input-focus disable-input-focus="true">');
+    expect(selectedEl).not.to.be(element[0]);
+  });
+
+  it('should still focus the input if disable-input-focus is falsy', function () {
+    renderEl('<input type="text" ng-model="value" input-focus disable-input-focus="false">');
+    expect(selectedEl).to.be(element[0]);
+  });
 });

src/ui/public/directives/input_focus.js

@@ -1,14 +1,17 @@
 import { uiModules } from 'ui/modules';
 const module = uiModules.get('kibana');
 
-module.directive('inputFocus', function ($timeout) {
+module.directive('inputFocus', function ($parse, $timeout) {
   return {
     restrict: 'A',
     link: function ($scope, $elem, attrs) {
-      $timeout(function () {
-        $elem.focus();
-        if (attrs.inputFocus === 'select') $elem.select();
-      });
+      const isDisabled = attrs.disableInputFocus && $parse(attrs.disableInputFocus)($scope);
+      if (!isDisabled) {
+        $timeout(function () {
+          $elem.focus();
+          if (attrs.inputFocus === 'select') $elem.select();
+        });
+      }
     }
   };
 });

src/ui/public/directives/paginated_selectable_list.js

@@ -17,7 +17,8 @@ module.directive('paginatedSelectableList', function () {
       list: '=',
       listProperty: '@',
       userMakeUrl: '=?',
-      userOnSelect: '=?'
+      userOnSelect: '=?',
+      disableAutoFocus: '='
     },
     template: paginatedSelectableListTemplate,
     controller: function ($scope) {

src/ui/public/directives/saved_object_finder.js

@@ -25,7 +25,12 @@ module.directive('savedObjectFinder', function ($location, $injector, kbnUrl, Pr
        * @type {function} - an optional function. If supplied an `Add new X` button is shown
        * and this function is called when clicked.
        */
-      onAddNew: '='
+      onAddNew: '=',
+      /**
+       * @{type} boolean - set this to true, if you don't want the search box above the
+       * table to automatically gain focus once loaded
+       */
+      disableAutoFocus: '='
     },
     template: savedObjectFinderTemplate,
     controllerAs: 'finder',

src/ui/public/partials/paginated_selectable_list.html

@@ -9,6 +9,7 @@
         <input
           class="kuiSearchInput__input"
           input-focus
+          disable-input-focus="disableAutoFocus"
           ng-model="query"
           placeholder="Filter..."
           class="form-control"

src/ui/public/partials/saved_object_finder.html

@@ -9,6 +9,7 @@
         <input
           class="kuiSearchInput__input"
           input-focus
+          disable-input-focus="disableAutoFocus"
           ng-model="filter"
           ng-attr-placeholder="{{ finder.properties.nouns | label }} Filter..."
           ng-keydown="finder.filterKeyDown($event)"

src/ui/public/query_bar/directive/query_bar.html

@@ -11,6 +11,7 @@
         <input
           parse-query
           input-focus
+          disable-input-focus="queryBar.disableAutoFocus"
           kbn-typeahead-input
           ng-model="queryBar.localQuery.query"
           placeholder="Search... (e.g. status:200 AND extension:PHP)"
@@ -40,6 +41,7 @@
         <input
           ng-model="queryBar.localQuery.query"
           input-focus
+          disable-input-focus="queryBar.disableAutoFocus"
           kbn-typeahead-input
           placeholder="Search... (e.g. status:200 AND extension:PHP)"
           aria-label="Search input"

src/ui/public/query_bar/directive/query_bar.js

@@ -15,6 +15,7 @@ module.directive('queryBar', function () {
       query: '=',
       appName: '=?',
       onSubmit: '&',
+      disableAutoFocus: '='
     },
     controllerAs: 'queryBar',
     bindToController: true,