Refactor keycode exporting in ui_framework (#13663)

* Refactor keycode exporting in ui_framework

* Replace all uses of ENTER_KEY and SPACE_KEY

* Use ESCAPE instead of ESC universally

* Rename keycodes -> keyCodes

* Replace keyCodes in advanced_row

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);

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);
         }
       };

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;

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);
     });

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);

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();
         }
       });

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();

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;
         }

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);
     }

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);

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();
     }
   };

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',
 };

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,
 };

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';

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';

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;