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 <chandler.prall@gmail.com>
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());
  }