diff --git a/src/core_plugins/kibana/public/dashboard/dashboard.js b/src/core_plugins/kibana/public/dashboard/dashboard.js index 69e1e4ef695dbf..8dd49bfeada972 100644 --- a/src/core_plugins/kibana/public/dashboard/dashboard.js +++ b/src/core_plugins/kibana/public/dashboard/dashboard.js @@ -25,7 +25,7 @@ import { documentationLinks } from 'ui/documentation_links/documentation_links'; import { showCloneModal } from './top_nav/show_clone_modal'; import { migrateLegacyQuery } from 'ui/utils/migrateLegacyQuery'; import { QueryManagerProvider } from 'ui/query_manager'; -import { ESC_KEY_CODE } from 'ui_framework/services'; +import { keyCodes } from 'ui_framework/services'; import { DashboardContainerAPI } from './dashboard_container_api'; const app = uiModules.get('app/dashboard', [ @@ -328,7 +328,7 @@ app.directive('dashboardApp', function ($injector) { $scope.exitFullScreenMode = () => setFullScreenMode(false); document.addEventListener('keydown', (e) => { - if (e.keyCode === ESC_KEY_CODE) { + if (e.keyCode === keyCodes.ESCAPE) { setFullScreenMode(false); } }, false); diff --git a/src/core_plugins/kibana/public/management/sections/settings/advanced_row.js b/src/core_plugins/kibana/public/management/sections/settings/advanced_row.js index 338c1d4f50ef0b..0114ff7864894b 100644 --- a/src/core_plugins/kibana/public/management/sections/settings/advanced_row.js +++ b/src/core_plugins/kibana/public/management/sections/settings/advanced_row.js @@ -1,6 +1,7 @@ import 'ui/elastic_textarea'; import 'ui/filters/markdown'; import { uiModules } from 'ui/modules'; +import { keyCodes } from 'ui_framework/services'; import advancedRowTemplate from 'plugins/kibana/management/sections/settings/advanced_row.html'; uiModules.get('apps/management') @@ -15,9 +16,6 @@ uiModules.get('apps/management') }, link: function ($scope) { const notify = new Notifier(); - const keyCodes = { - ESC: 27 - }; // To allow passing form validation state back $scope.forms = {}; @@ -33,7 +31,7 @@ uiModules.get('apps/management') }; $scope.maybeCancel = function ($event, conf) { - if ($event.keyCode === keyCodes.ESC) { + if ($event.keyCode === keyCodes.ESCAPE) { $scope.cancelEdit(conf); } }; diff --git a/src/core_plugins/timelion/public/directives/timelion_expression_input.js b/src/core_plugins/timelion/public/directives/timelion_expression_input.js index b378d68d65e41a..591f283cbf368b 100644 --- a/src/core_plugins/timelion/public/directives/timelion_expression_input.js +++ b/src/core_plugins/timelion/public/directives/timelion_expression_input.js @@ -192,7 +192,7 @@ app.directive('timelionExpressionInput', function ($document, $http, $interval, } break; - case comboBoxKeyCodes.ESC: + case comboBoxKeyCodes.ESCAPE: e.preventDefault(); scope.functionSuggestions.hide(); break; diff --git a/src/ui/public/accessibility/__tests__/kbn_accessible_click.js b/src/ui/public/accessibility/__tests__/kbn_accessible_click.js index 011631fd5b09c0..9e5f740942fec6 100644 --- a/src/ui/public/accessibility/__tests__/kbn_accessible_click.js +++ b/src/ui/public/accessibility/__tests__/kbn_accessible_click.js @@ -3,10 +3,7 @@ import sinon from 'sinon'; import expect from 'expect.js'; import ngMock from 'ng_mock'; import '../kbn_accessible_click'; -import { - ENTER_KEY, - SPACE_KEY, -} from 'ui_framework/services'; +import { keyCodes } from 'ui_framework/services'; describe('kbnAccessibleClick directive', () => { let $compile; @@ -92,14 +89,14 @@ describe('kbnAccessibleClick directive', () => { it(`on ENTER keyup`, () => { const e = angular.element.Event('keyup'); // eslint-disable-line new-cap - e.keyCode = ENTER_KEY; + e.keyCode = keyCodes.ENTER; element.trigger(e); sinon.assert.calledOnce(scope.handleClick); }); it(`on SPACE keyup`, () => { const e = angular.element.Event('keyup'); // eslint-disable-line new-cap - e.keyCode = SPACE_KEY; + e.keyCode = keyCodes.SPACE; element.trigger(e); sinon.assert.calledOnce(scope.handleClick); }); diff --git a/src/ui/public/accessibility/__tests__/kbn_ui_ace_keyboard_mode.js b/src/ui/public/accessibility/__tests__/kbn_ui_ace_keyboard_mode.js index 9bbfb4565d96a9..edfd1dc62d471c 100644 --- a/src/ui/public/accessibility/__tests__/kbn_ui_ace_keyboard_mode.js +++ b/src/ui/public/accessibility/__tests__/kbn_ui_ace_keyboard_mode.js @@ -3,10 +3,7 @@ import sinon from 'sinon'; import expect from 'expect.js'; import ngMock from 'ng_mock'; import '../kbn_ui_ace_keyboard_mode'; -import { - ENTER_KEY, - ESC_KEY_CODE, -} from 'ui_framework/services'; +import { keyCodes } from 'ui_framework/services'; describe('kbnUiAceKeyboardMode directive', () => { let element; @@ -30,7 +27,7 @@ describe('kbnUiAceKeyboardMode directive', () => { const textarea = element.find('textarea'); sinon.spy(textarea[0], 'focus'); const ev = angular.element.Event('keydown'); // eslint-disable-line new-cap - ev.keyCode = ENTER_KEY; + ev.keyCode = keyCodes.ENTER; element.find('.uiAceKeyboardHint').trigger(ev); expect(textarea[0].focus.called).to.be(true); expect(element.find('.uiAceKeyboardHint').hasClass('uiAceKeyboardHint-isInactive')).to.be(true); @@ -41,7 +38,7 @@ describe('kbnUiAceKeyboardMode directive', () => { const hint = element.find('.uiAceKeyboardHint'); sinon.spy(hint[0], 'focus'); const ev = angular.element.Event('keydown'); // eslint-disable-line new-cap - ev.keyCode = ESC_KEY_CODE; + ev.keyCode = keyCodes.ESCAPE; textarea.trigger(ev); expect(hint[0].focus.called).to.be(true); expect(hint.hasClass('uiAceKeyboardHint-isInactive')).to.be(false); @@ -80,7 +77,7 @@ describe('kbnUiAceKeyboardModeService', () => { const textarea = element.find('textarea'); sinon.spy(textarea[0], 'focus'); const ev = angular.element.Event('keydown'); // eslint-disable-line new-cap - ev.keyCode = ENTER_KEY; + ev.keyCode = keyCodes.ENTER; element.find('.uiAceKeyboardHint').trigger(ev); expect(textarea[0].focus.called).to.be(true); expect(element.find('.uiAceKeyboardHint').hasClass('uiAceKeyboardHint-isInactive')).to.be(true); @@ -91,7 +88,7 @@ describe('kbnUiAceKeyboardModeService', () => { const hint = element.find('.uiAceKeyboardHint'); sinon.spy(hint[0], 'focus'); const ev = angular.element.Event('keydown'); // eslint-disable-line new-cap - ev.keyCode = ESC_KEY_CODE; + ev.keyCode = keyCodes.ESCAPE; textarea.trigger(ev); expect(hint[0].focus.called).to.be(true); expect(hint.hasClass('uiAceKeyboardHint-isInactive')).to.be(false); diff --git a/src/ui/public/accessibility/kbn_accessible_click.js b/src/ui/public/accessibility/kbn_accessible_click.js index 9a17165572525c..f8bcc3e7ab8920 100644 --- a/src/ui/public/accessibility/kbn_accessible_click.js +++ b/src/ui/public/accessibility/kbn_accessible_click.js @@ -20,7 +20,7 @@ import { accessibleClickKeys, - SPACE_KEY, + keyCodes, } from 'ui_framework/services'; import { uiModules } from 'ui/modules'; @@ -31,7 +31,7 @@ uiModules.get('kibana') controller: $element => { $element.on('keydown', e => { // Prevent a scroll from occurring if the user has hit space. - if (e.keyCode === SPACE_KEY) { + if (e.keyCode === keyCodes.SPACE) { e.preventDefault(); } }); diff --git a/src/ui/public/accessibility/kbn_ui_ace_keyboard_mode.js b/src/ui/public/accessibility/kbn_ui_ace_keyboard_mode.js index d2f2f8f2155dc0..19ab85c28ec63a 100644 --- a/src/ui/public/accessibility/kbn_ui_ace_keyboard_mode.js +++ b/src/ui/public/accessibility/kbn_ui_ace_keyboard_mode.js @@ -15,7 +15,7 @@ import angular from 'angular'; import { uiModules } from 'ui/modules'; import './kbn_ui_ace_keyboard_mode.less'; -import { ESC_KEY_CODE, ENTER_KEY } from 'ui_framework/services'; +import { keyCodes } from 'ui_framework/services'; let aceKeyboardModeId = 0; @@ -53,7 +53,7 @@ uiModules.get('kibana') } hint.keydown((ev) => { - if (ev.keyCode === ENTER_KEY) { + if (ev.keyCode === keyCodes.ENTER) { ev.preventDefault(); startEditing(); } @@ -64,7 +64,7 @@ uiModules.get('kibana') }); uiAceTextbox.keydown((ev) => { - if (ev.keyCode === ESC_KEY_CODE) { + if (ev.keyCode === keyCodes.ESCAPE) { ev.preventDefault(); ev.stopPropagation(); enableOverlay(); diff --git a/src/ui/public/typeahead/typeahead.js b/src/ui/public/typeahead/typeahead.js index b7a3beefaf5035..4c43237eac5ded 100644 --- a/src/ui/public/typeahead/typeahead.js +++ b/src/ui/public/typeahead/typeahead.js @@ -121,7 +121,7 @@ typeahead.directive('kbnTypeahead', function () { } // hide on escape - if (_.contains([comboBoxKeyCodes.ESC], keyCode)) { + if (_.contains([comboBoxKeyCodes.ESCAPE], keyCode)) { self.hidden = true; self.active = false; } diff --git a/ui_framework/src/components/accessibility/keyboard_accessible.js b/ui_framework/src/components/accessibility/keyboard_accessible.js index bd1d105db1a4f3..765db1db389625 100644 --- a/ui_framework/src/components/accessibility/keyboard_accessible.js +++ b/ui_framework/src/components/accessibility/keyboard_accessible.js @@ -25,22 +25,19 @@ import { cloneElement, } from 'react'; -import { - ENTER_KEY, - SPACE_KEY, -} from '../../services'; +import { keyCodes } from '../../services'; export class KuiKeyboardAccessible extends Component { onKeyDown = e => { // Prevent a scroll from occurring if the user has hit space. - if (e.keyCode === SPACE_KEY) { + if (e.keyCode === keyCodes.SPACE) { e.preventDefault(); } } onKeyUp = e => { // Support keyboard accessibility by emulating mouse click on ENTER or SPACE keypress. - if (e.keyCode === ENTER_KEY || e.keyCode === SPACE_KEY) { + if (e.keyCode === keyCodes.ENTER || e.keyCode === keyCodes.SPACE) { // Delegate to the click handler on the element. this.props.children.props.onClick(e); } diff --git a/ui_framework/src/components/accessibility/keyboard_accessible.test.js b/ui_framework/src/components/accessibility/keyboard_accessible.test.js index e7a15a641e3986..b4734df641cce3 100644 --- a/ui_framework/src/components/accessibility/keyboard_accessible.test.js +++ b/ui_framework/src/components/accessibility/keyboard_accessible.test.js @@ -7,10 +7,7 @@ import sinon from 'sinon'; import { KuiKeyboardAccessible } from './keyboard_accessible'; -import { - ENTER_KEY, - SPACE_KEY, -} from '../../services'; +import { keyCodes } from '../../services'; describe('KuiKeyboardAccessible', () => { describe('throws an error', () => { @@ -176,7 +173,7 @@ describe('KuiKeyboardAccessible', () => { ); $button.find('[data-div]').simulate('keyup', { - keyCode: ENTER_KEY + keyCode: keyCodes.ENTER }); sinon.assert.calledOnce(onClickHandler); @@ -192,7 +189,7 @@ describe('KuiKeyboardAccessible', () => { ); $button.find('[data-div]').simulate('keyup', { - keyCode: SPACE_KEY + keyCode: keyCodes.SPACE }); sinon.assert.calledOnce(onClickHandler); diff --git a/ui_framework/src/components/modal/confirm_modal.js b/ui_framework/src/components/modal/confirm_modal.js index f1a04c6c761d53..5a83940143f025 100644 --- a/ui_framework/src/components/modal/confirm_modal.js +++ b/ui_framework/src/components/modal/confirm_modal.js @@ -8,7 +8,7 @@ import { KuiModalHeaderTitle } from './modal_header_title'; import { KuiModalBody } from './modal_body'; import { KuiModalBodyText } from './modal_body_text'; import { KuiButton } from '../index'; -import { ESC_KEY_CODE } from '../../services'; +import { keyCodes } from '../../services'; export const CONFIRM_BUTTON = 'confirm'; export const CANCEL_BUTTON = 'cancel'; @@ -32,7 +32,7 @@ export function KuiConfirmModal({ const onKeyDown = (event) => { // Treat the 'esc' key as a cancel indicator. - if (event.keyCode === ESC_KEY_CODE) { + if (event.keyCode === keyCodes.ESCAPE) { onCancel(); } }; diff --git a/ui_framework/src/services/accessibility/accessible_click_keys.js b/ui_framework/src/services/accessibility/accessible_click_keys.js index 16025d16c20593..345df7d16788a5 100644 --- a/ui_framework/src/services/accessibility/accessible_click_keys.js +++ b/ui_framework/src/services/accessibility/accessible_click_keys.js @@ -1,8 +1,7 @@ -export const ENTER_KEY = 13; -export const SPACE_KEY = 32; +import { ENTER, SPACE } from '../key_codes'; // These keys are used to execute click actions on interactive elements like buttons and links. export const accessibleClickKeys = { - [ENTER_KEY]: 'enter', - [SPACE_KEY]: 'space', + [ENTER]: 'enter', + [SPACE]: 'space', }; diff --git a/ui_framework/src/services/accessibility/combo_box_key_codes.js b/ui_framework/src/services/accessibility/combo_box_key_codes.js index b1033bd42dd12c..844c105ac29eb5 100644 --- a/ui_framework/src/services/accessibility/combo_box_key_codes.js +++ b/ui_framework/src/services/accessibility/combo_box_key_codes.js @@ -8,17 +8,17 @@ */ import { - DOWN_KEY_CODE, - ENTER_KEY_CODE, - ESC_KEY_CODE, - TAB_KEY_CODE, - UP_KEY_CODE, + DOWN, + ENTER, + ESCAPE, + TAB, + UP, } from '../key_codes'; export const comboBoxKeyCodes = { - DOWN: DOWN_KEY_CODE, - ENTER: ENTER_KEY_CODE, - ESC: ESC_KEY_CODE, - TAB: TAB_KEY_CODE, - UP: UP_KEY_CODE, + DOWN, + ENTER, + ESCAPE, + TAB, + UP, }; diff --git a/ui_framework/src/services/accessibility/index.js b/ui_framework/src/services/accessibility/index.js index a5c2e961e0a823..894a1d2dd458bb 100644 --- a/ui_framework/src/services/accessibility/index.js +++ b/ui_framework/src/services/accessibility/index.js @@ -1,7 +1,2 @@ -export { - accessibleClickKeys, - ENTER_KEY, - SPACE_KEY, -} from './accessible_click_keys'; - +export { accessibleClickKeys } from './accessible_click_keys'; export { comboBoxKeyCodes } from './combo_box_key_codes'; diff --git a/ui_framework/src/services/index.js b/ui_framework/src/services/index.js index ba63715c0a2681..faa2456ef623c1 100644 --- a/ui_framework/src/services/index.js +++ b/ui_framework/src/services/index.js @@ -1,11 +1,12 @@ +// Export all keyCodes under a `keyCodes` named variable +import * as keyCodes from './key_codes'; +export { keyCodes }; + export { accessibleClickKeys, comboBoxKeyCodes, - ENTER_KEY, - SPACE_KEY, } from './accessibility'; export { SortableProperties } from './sort'; -export { ESC_KEY_CODE } from './key_codes'; export { LEFT_ALIGNMENT, RIGHT_ALIGNMENT } from './alignment'; diff --git a/ui_framework/src/services/key_codes.js b/ui_framework/src/services/key_codes.js index 9356814e302fa1..bf47767e8d228b 100644 --- a/ui_framework/src/services/key_codes.js +++ b/ui_framework/src/services/key_codes.js @@ -1,5 +1,8 @@ -export const DOWN_KEY_CODE = 40; -export const ENTER_KEY_CODE = 13; -export const ESC_KEY_CODE = 27; -export const TAB_KEY_CODE = 9; -export const UP_KEY_CODE = 38; +export const ENTER = 13; +export const SPACE = 32; +export const ESCAPE = 27; +export const TAB = 9; + +// Arrow keys +export const DOWN = 40; +export const UP = 38;