use KeyboardEvent.keys instead of KeyboardEvent.keyCodes (#3517)

* uses `KeyboardEvent.keys` instead of `KeyboardEvent.keyCodes` everywhere * adds changelog entry * fixes markdown for changelog links * updates ToolTip component (after rebase) * Update CHANGELOG.md Co-authored-by: Chandler Prall <[email protected]>
elastic · Jun 4, 2020 · fa2916e · fa2916e
1 parent c134b58
commit fa2916e
Show file tree

Hide file tree

Showing 50 changed files with 434 additions and 425 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -8,6 +8,7 @@
 
 - A fixed `EuiHeader` no longer automatically padding directly to the `<body>` element ([#3538](https://github.com/elastic/eui/pull/3538))
 - Improved `EuiPagination`, `EuiDataGrid`, `EuiBasicTable` and `EuiInMemoryTable` accessibility, causing `EuiPaginationButton` to require a new prop `pageIndex` ([#3294](https://github.com/elastic/eui/pull/3294))
+- Replaced all usages of [`KeyboardEvent.keyCode`](https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/keyCode) (deprecated) with [`KeyboardEvent.key`](https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/key). From `@elastic/eui/lib/services`, `keyCodes` has been replaced with `keys`, as has `cascadingMenuKeyCodes`->`cascadingMenuKeys`, and `comboBoxKeyCodes`->`comboBoxKeys`.  The implementation of all of those exports (as well as `accessibleClickKeys`) all now use `KeyboardEvent.key` values. ([#3517](https://github.com/elastic/eui/pull/3517))
 
 
 ## [`24.1.0`](https://github.com/elastic/eui/tree/v24.1.0)

diff --git a/src-docs/src/views/app_view.js b/src-docs/src/views/app_view.js
@@ -11,7 +11,7 @@ import {
   EuiContext,
 } from '../../../src/components';
 
-import { keyCodes } from '../../../src/services';
+import { keys } from '../../../src/services';
 
 export class AppView extends Component {
   constructor(...args) {
@@ -83,23 +83,23 @@ export class AppView extends Component {
     return <div className="guide">{this.renderContent()}</div>;
   }
 
-  onKeydown = e => {
-    if (e.target !== document.body) {
+  onKeydown = event => {
+    if (event.target !== document.body) {
       return;
     }
 
-    if (e.metaKey) {
+    if (event.metaKey) {
       return;
     }
 
     const { routes, currentRoute } = this.props;
 
-    if (e.keyCode === keyCodes.LEFT) {
+    if (event.key === keys.ARROW_LEFT) {
       pushRoute(routes.getPreviousRoute);
       return;
     }
 
-    if (e.keyCode === keyCodes.RIGHT) {
+    if (event.key === keys.ARROW_RIGHT) {
       pushRoute(routes.getNextRoute);
     }
 

diff --git a/src-docs/src/views/window_event/window_event_conflict.js b/src-docs/src/views/window_event/window_event_conflict.js
@@ -9,6 +9,7 @@ import {
   EuiFieldText,
   EuiSpacer,
 } from '../../../../src/components';
+import { keys } from '../../../../src/services';
 
 import { ModalExample } from './modal_example_container';
 
@@ -18,10 +19,10 @@ const ConflictModal = props => {
   const updateInputValue = e => {
     setInputValue(e.target.value);
   };
-  const clearInputValueOnEscape = e => {
-    if (e.key === 'Escape') {
+  const clearInputValueOnEscape = event => {
+    if (event.key === keys.ESCAPE) {
       setInputValue('');
-      e.stopPropagation();
+      event.stopPropagation();
     }
   };
 

diff --git a/src/components/accessibility/keyboard_accessible.test.tsx b/src/components/accessibility/keyboard_accessible.test.tsx
@@ -23,7 +23,7 @@ import { render, shallow } from 'enzyme';
 
 import { EuiKeyboardAccessible } from './keyboard_accessible';
 
-import { keyCodes } from '../../services';
+import { keys } from '../../services';
 
 const noop = () => {
   // eslint-disable-line no-empty
@@ -194,7 +194,7 @@ describe('EuiKeyboardAccessible', () => {
       );
 
       $button.find('[data-div]').simulate('keyup', {
-        keyCode: keyCodes.ENTER,
+        key: keys.ENTER,
       });
 
       expect(onClickHandler).toBeCalled();
@@ -210,7 +210,7 @@ describe('EuiKeyboardAccessible', () => {
       );
 
       $button.find('[data-div]').simulate('keyup', {
-        keyCode: keyCodes.SPACE,
+        key: keys.SPACE,
       });
 
       expect(onClickHandler).toBeCalled();

diff --git a/src/components/accessibility/keyboard_accessible.ts b/src/components/accessibility/keyboard_accessible.ts
@@ -41,33 +41,33 @@
 
 import { Component, cloneElement, KeyboardEvent, ReactElement } from 'react';
 
-import { keyCodes } from '../../services';
+import { keys } from '../../services';
 
 interface Props {
   children: ReactElement<any>;
 }
 
 export class EuiKeyboardAccessible extends Component<Props> {
-  onKeyDown = (e: KeyboardEvent<any>) => {
+  onKeyDown = (event: KeyboardEvent<any>) => {
     // Prevent a scroll from occurring if the user has hit space.
-    if (e.keyCode === keyCodes.SPACE) {
-      e.preventDefault();
+    if (event.key === keys.SPACE) {
+      event.preventDefault();
     }
 
     if (this.props.children.props.onKeyDown) {
-      this.props.children.props.onKeyDown(e);
+      this.props.children.props.onKeyDown(event);
     }
   };
 
-  onKeyUp = (e: KeyboardEvent<any>) => {
+  onKeyUp = (event: KeyboardEvent<any>) => {
     // Support keyboard accessibility by emulating mouse click on ENTER or SPACE keypress.
-    if (e.keyCode === keyCodes.ENTER || e.keyCode === keyCodes.SPACE) {
+    if (event.key === keys.ENTER || event.key === keys.SPACE) {
       // Delegate to the click handler on the element.
-      this.props.children.props.onClick(e);
+      this.props.children.props.onClick(event);
     }
 
     if (this.props.children.props.onKeyUp) {
-      this.props.children.props.onKeyUp(e);
+      this.props.children.props.onKeyUp(event);
     }
   };
 

diff --git a/src/components/basic_table/in_memory_table.test.tsx b/src/components/basic_table/in_memory_table.test.tsx
@@ -22,8 +22,7 @@ import { mount, shallow } from 'enzyme';
 import { requiredProps } from '../../test';
 
 import { EuiInMemoryTable, EuiInMemoryTableProps } from './in_memory_table';
-import { ENTER } from '../../services/key_codes';
-import { SortDirection } from '../../services';
+import { keys, SortDirection } from '../../services';
 import { SearchFilterConfig } from '../search_bar/filters';
 
 jest.mock('../../services/accessibility', () => ({
@@ -766,7 +765,7 @@ describe('EuiInMemoryTable', () => {
         target: {
           value: 'is:active',
         },
-        keyCode: ENTER,
+        key: keys.ENTER,
       });
       component.update();
 
@@ -777,7 +776,7 @@ describe('EuiInMemoryTable', () => {
         target: {
           value: 'active:false',
         },
-        keyCode: ENTER,
+        key: keys.ENTER,
       });
       component.update();
 

diff --git a/src/components/code/_code_block.tsx b/src/components/code/_code_block.tsx
@@ -37,7 +37,7 @@ import { EuiOverlayMask } from '../overlay_mask';
 
 import { EuiFocusTrap } from '../focus_trap';
 
-import { keyCodes } from '../../services';
+import { keys } from '../../services';
 import { EuiI18n } from '../i18n';
 import { EuiInnerText } from '../inner_text';
 import { keysOf } from '../common';
@@ -146,7 +146,7 @@ export const EuiCodeBlockImpl: FunctionComponent<Props> = ({
   });
 
   const onKeyDown = (event: KeyboardEvent<HTMLElement>) => {
-    if (event.keyCode === keyCodes.ESCAPE) {
+    if (event.key === keys.ESCAPE) {
       event.preventDefault();
       event.stopPropagation();
       closeFullScreen();

diff --git a/src/components/code_editor/code_editor.test.tsx b/src/components/code_editor/code_editor.test.tsx
@@ -20,7 +20,7 @@
 import React from 'react';
 import { mount, ReactWrapper } from 'enzyme';
 import { EuiCodeEditor } from './code_editor';
-import { keyCodes } from '../../services';
+import { keys } from '../../services';
 import {
   findTestSubject,
   requiredProps,
@@ -85,15 +85,15 @@ describe('EuiCodeEditor', () => {
 
       test('should be disabled when the ui ace box gains focus', () => {
         const hint = findTestSubject(component, 'codeEditorHint');
-        hint.simulate('keyup', { keyCode: keyCodes.ENTER });
+        hint.simulate('keyup', { key: keys.ENTER });
         expect(
           findTestSubject(component, 'codeEditorHint').getDOMNode()
         ).toMatchSnapshot();
       });
 
       test('should be enabled when the ui ace box loses focus', () => {
         const hint = findTestSubject(component, 'codeEditorHint');
-        hint.simulate('keyup', { keyCode: keyCodes.ENTER });
+        hint.simulate('keyup', { key: keys.ENTER });
         // @ts-ignore
         component.instance().onBlurAce();
         expect(
@@ -116,7 +116,7 @@ describe('EuiCodeEditor', () => {
         component.instance().onKeydownAce({
           preventDefault: () => {},
           stopPropagation: () => {},
-          keyCode: keyCodes.ESCAPE,
+          key: keys.ESCAPE,
         });
         const hint = findTestSubject(component, 'codeEditorHint').getDOMNode();
         expect(hint).toBe(document.activeElement);

diff --git a/src/components/code_editor/code_editor.tsx b/src/components/code_editor/code_editor.tsx
@@ -22,7 +22,7 @@ import classNames from 'classnames';
 import AceEditor, { IAceEditorProps } from 'react-ace';
 
 import { keysOf } from '../common';
-import { htmlIdGenerator, keyCodes } from '../../services';
+import { htmlIdGenerator, keys } from '../../services';
 import { EuiI18n } from '../i18n';
 
 const DEFAULT_MODE = 'text';
@@ -115,7 +115,7 @@ export class EuiCodeEditor extends Component<
   };
 
   onKeydownAce = (event: KeyboardEvent) => {
-    if (event.keyCode === keyCodes.ESCAPE) {
+    if (event.key === keys.ESCAPE) {
       // If the autocompletion context menu is open then we want to let ESCAPE close it but
       // **not** exit out of editing mode.
       if (this.aceEditor !== null && !this.aceEditor.editor.completer) {
@@ -146,7 +146,7 @@ export class EuiCodeEditor extends Component<
   };
 
   onKeyDownHint: KeyboardEventHandler<HTMLDivElement> = event => {
-    if (event.keyCode === keyCodes.ENTER) {
+    if (event.key === keys.ENTER) {
       event.preventDefault();
       this.startEditing();
     }

diff --git a/src/components/collapsible_nav/collapsible_nav.tsx b/src/components/collapsible_nav/collapsible_nav.tsx
@@ -28,7 +28,7 @@ import React, {
 } from 'react';
 import classNames from 'classnames';
 import { throttle } from '../color_picker/utils';
-import { EuiWindowEvent, keyCodes, htmlIdGenerator } from '../../services';
+import { EuiWindowEvent, keys, htmlIdGenerator } from '../../services';
 import { EuiFocusTrap } from '../focus_trap';
 import { EuiOverlayMask } from '../overlay_mask';
 import { CommonProps } from '../common';
@@ -118,7 +118,7 @@ export const EuiCollapsibleNav: FunctionComponent<EuiCollapsibleNavProps> = ({
   }, [navIsDocked, functionToCallOnWindowResize, isOpen]);
 
   const onKeyDown = (event: KeyboardEvent) => {
-    if (event.keyCode === keyCodes.ESCAPE) {
+    if (event.key === keys.ESCAPE) {
       event.preventDefault();
       collapse();
     }

diff --git a/src/components/color_picker/color_picker.test.tsx b/src/components/color_picker/color_picker.test.tsx
@@ -21,7 +21,7 @@ import React from 'react';
 import { render, mount } from 'enzyme';
 
 import { EuiColorPicker } from './color_picker';
-import { VISUALIZATION_COLORS, keyCodes } from '../../services';
+import { VISUALIZATION_COLORS, keys } from '../../services';
 import { requiredProps, findTestSubject, sleep } from '../../test';
 
 jest.mock('../portal', () => ({
@@ -186,7 +186,7 @@ test('popover color selector is hidden when the ESC key pressed', async () => {
   findTestSubject(colorPicker, 'colorPickerAnchor').simulate('click');
   await sleep();
   findTestSubject(colorPicker, 'colorPickerPopover').simulate('keydown', {
-    keyCode: keyCodes.ESCAPE,
+    key: keys.ESCAPE,
   });
   // Portal removal not working with Jest. The blur handler is called just before the portal would be removed.
   expect(onBlurHandler).toBeCalled();
@@ -205,7 +205,7 @@ test('popover color selector is hidden and input regains focus when the ENTER ke
 
   findTestSubject(colorPicker, 'colorPickerAnchor').simulate('click');
   findTestSubject(colorPicker, 'euiSaturation').simulate('keydown', {
-    keyCode: keyCodes.ENTER,
+    key: keys.ENTER,
   });
   expect(
     findTestSubject(colorPicker, 'colorPickerAnchor').getDOMNode()

diff --git a/src/components/color_picker/color_picker.tsx b/src/components/color_picker/color_picker.tsx
@@ -46,7 +46,7 @@ import {
 import { EuiI18n } from '../i18n';
 import { EuiPopover } from '../popover';
 import { EuiSpacer } from '../spacer';
-import { VISUALIZATION_COLORS, keyCodes } from '../../services';
+import { VISUALIZATION_COLORS, keys } from '../../services';
 
 import { EuiHue } from './hue';
 import { EuiSaturation } from './saturation';
@@ -150,7 +150,7 @@ export interface EuiColorPickerProps
 function isKeyboardEvent(
   event: React.MouseEvent | React.KeyboardEvent
 ): event is React.KeyboardEvent {
-  return typeof event === 'object' && 'keyCode' in event;
+  return typeof event === 'object' && 'key' in event;
 }
 
 const getOutput = (
@@ -312,8 +312,8 @@ export const EuiColorPicker: FunctionComponent<EuiColorPickerProps> = ({
     closeColorSelector(true);
   };
 
-  const handleOnKeyDown = (e: React.KeyboardEvent<HTMLDivElement>) => {
-    if (e.keyCode === keyCodes.ENTER) {
+  const handleOnKeyDown = (event: React.KeyboardEvent<HTMLDivElement>) => {
+    if (event.key === keys.ENTER) {
       if (isColorSelectorShown) {
         handleFinalSelection();
       } else {
@@ -323,23 +323,25 @@ export const EuiColorPicker: FunctionComponent<EuiColorPickerProps> = ({
   };
 
   const handleInputActivity = (
-    e:
+    event:
       | React.KeyboardEvent<HTMLInputElement>
       | React.MouseEvent<HTMLInputElement>
   ) => {
-    if (isKeyboardEvent(e)) {
-      if (e.keyCode === keyCodes.ENTER) {
-        e.preventDefault();
+    if (isKeyboardEvent(event)) {
+      if (event.key === keys.ENTER) {
+        event.preventDefault();
         handleToggle();
       }
     } else {
       showColorSelector();
     }
   };
 
-  const handleToggleOnKeyDown = (e: React.KeyboardEvent<HTMLDivElement>) => {
-    if (e.keyCode === keyCodes.DOWN) {
-      e.preventDefault();
+  const handleToggleOnKeyDown = (
+    event: React.KeyboardEvent<HTMLDivElement>
+  ) => {
+    if (event.key === keys.ARROW_DOWN) {
+      event.preventDefault();
       if (isColorSelectorShown) {
         const nextFocusEl = mode !== 'swatch' ? satruationRef : swatchRef;
         if (nextFocusEl.current) {
@@ -351,9 +353,9 @@ export const EuiColorPicker: FunctionComponent<EuiColorPickerProps> = ({
     }
   };
 
-  const handleColorInput = (e: React.ChangeEvent<HTMLInputElement>) => {
-    handleOnChange(e.target.value);
-    const newColor = getChromaColor(e.target.value, showAlpha);
+  const handleColorInput = (event: React.ChangeEvent<HTMLInputElement>) => {
+    handleOnChange(event.target.value);
+    const newColor = getChromaColor(event.target.value, showAlpha);
     if (newColor) {
       updateColorAsHsv(newColor.hsv());
     }