From 4ddad1a24b8290b256e5f4307a9f00fa47c7ca85 Mon Sep 17 00:00:00 2001 From: Tim Roes Date: Tue, 29 Aug 2017 12:22:32 +0200 Subject: [PATCH] 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 --- .../public/visualize/editor/editor.html | 1 + .../public/visualize/wizard/step_2.html | 2 ++ .../components/vis_editor_visualization.js | 9 ++++++++- .../metrics/public/less/editor.less | 2 +- .../directives/__tests__/input_focus.js | 20 +++++++++++++++---- src/ui/public/directives/input_focus.js | 13 +++++++----- .../directives/paginated_selectable_list.js | 3 ++- .../public/directives/saved_object_finder.js | 7 ++++++- .../partials/paginated_selectable_list.html | 1 + .../public/partials/saved_object_finder.html | 1 + .../public/query_bar/directive/query_bar.html | 2 ++ .../public/query_bar/directive/query_bar.js | 1 + 12 files changed, 49 insertions(+), 13 deletions(-) diff --git a/src/core_plugins/kibana/public/visualize/editor/editor.html b/src/core_plugins/kibana/public/visualize/editor/editor.html index 76ba542c9e786..66334f7b1a53a 100644 --- a/src/core_plugins/kibana/public/visualize/editor/editor.html +++ b/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" > diff --git a/src/core_plugins/kibana/public/visualize/wizard/step_2.html b/src/core_plugins/kibana/public/visualize/wizard/step_2.html index 5ab7bfa3f5c8f..00fedfd7dbfaa 100644 --- a/src/core_plugins/kibana/public/visualize/wizard/step_2.html +++ b/src/core_plugins/kibana/public/visualize/wizard/step_2.html @@ -25,6 +25,7 @@

list-property="attributes.title" user-make-url="makeUrl" class="wizard-row visualizeWizardPaginatedSelectableList kuiVerticalRhythm" + disable-auto-focus="true" > @@ -38,6 +39,7 @@

type="searches" class="wizard-row visualizeWizardSavedObjectFinder kuiVerticalRhythm" make-url="step2WithSearchUrl" + disable-auto-focus="true" > diff --git a/src/core_plugins/metrics/public/components/vis_editor_visualization.js b/src/core_plugins/metrics/public/components/vis_editor_visualization.js index 0fcad617ce341..444ae8a7be34b 100644 --- a/src/core_plugins/metrics/public/components/vis_editor_visualization.js +++ b/src/core_plugins/metrics/public/components/vis_editor_visualization.js @@ -62,9 +62,16 @@ class VisEditorVisualization extends Component { if (autoApply) applyMessage = 'The changes will be automatically applied.'; const applyButton = (
-
Auto Apply
+
'); + expect(selectedEl).not.to.be(element[0]); + }); + + it('should still focus the input if disable-input-focus is falsy', function () { + renderEl(''); + expect(selectedEl).to.be(element[0]); + }); }); diff --git a/src/ui/public/directives/input_focus.js b/src/ui/public/directives/input_focus.js index d94c0814e0c69..74cd9a20faf49 100644 --- a/src/ui/public/directives/input_focus.js +++ b/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(); + }); + } } }; }); diff --git a/src/ui/public/directives/paginated_selectable_list.js b/src/ui/public/directives/paginated_selectable_list.js index 2676fe9c23ef5..af398108b3db8 100644 --- a/src/ui/public/directives/paginated_selectable_list.js +++ b/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) { diff --git a/src/ui/public/directives/saved_object_finder.js b/src/ui/public/directives/saved_object_finder.js index 74861250ca943..66d51749ee0e2 100644 --- a/src/ui/public/directives/saved_object_finder.js +++ b/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', diff --git a/src/ui/public/partials/paginated_selectable_list.html b/src/ui/public/partials/paginated_selectable_list.html index 85aa72e799279..a298bdad59096 100644 --- a/src/ui/public/partials/paginated_selectable_list.html +++ b/src/ui/public/partials/paginated_selectable_list.html @@ -9,6 +9,7 @@