use KeyboardEvent.keys instead of KeyboardEvent.keyCodes

[dimitropoulos]

Summary

closes #3512

This PR suggests removing usages of KeyboardEvent.keyCode (since it's deprecated) in favor of its successor KeyboardEvent.key.

Checklist

• Check against all themes for compatibility in both light and dark modes
• Checked in mobile
• Checked in IE11 and Firefox
• Props have proper autodocs
• Added documentation examples
• Added or updated jest tests
• Checked for breaking changes and labeled appropriately
• Checked for accessibility including keyboard-only and screenreader modes
• A changelog entry exists and is marked appropriately

---

Breaking Change Info

What changed?

1. From @elastic/eui/lib/services, the following have been renamed

   Previous Name	New Name
   keyCodes	key
   cascadingMenuKeyCodes	cascadingMenuKeys
   comboBoxKeyCodes	comboBoxKeys

2. In addition to renaming, the values of keys, cascadingMenuKeys, comboBoxKeys, as well as accessibleClickKeys have also been updated to follow the KeyboardEvent.key API, rather than the KeyboardEvent.keyCode API.
   For example,

   Previous Name	Previous Value	New Name	New Value
   cascadingMenuKeyCodes.ESCAPE	27	cascadingMenuKeys.ESCAPE	'Escape'
   accessibleClickKeys.UP	38	accessibleClickKeys.ARROW_UP	'ArrowUp'

What specific steps do I take?

1. Confirm that the browsers you support also support KeyboardEvent.key. The an up-to-date comparability graph can be found on the mdn specification page, but the following represents support level as of May 2020:
   
2. Scan your codebase for instances of keyCode to catch examples where an event.keyCode is accessed and replace keyCode usages with key usages. Also look for keyCodes. to find prior usages of the keyCodes constants map. Here are some examples:
   1. callbacks responding to keyboard events:

      const onKeyDown = (event: KeyboardEvent<HTMLElement>) => {
      -   if (event.keyCode === keyCodes.UP) {
      +   if (event.key === keys.ARROW_UP) {
      ...

      In this case if the old keyCodes constant was used the refactor is relatively straightforward.
   2. tests expecting a particular keycode

      searchField.simulate('keyUp', {
        target: {
          value: 'is:active',
        },
      - keyCode: ENTER,
      + key: keys.ENTER,
      });

      Since KeyboardEvent.keyCode is deprecated but not yet removed in any browser, any test that was previously testing for keyCode: <keyCode numeric value> should now also work with key: "<key string value>".

Things to watch out for

• The variable names within keyCodes where not perfectly preserved. The KeyboardEvent.keys API uses ArrowUp, and so (to match that API), the UP constant is now ARROW_UP.
• Now might be a good time to scan your codebase for comparisons (or switch statement cases) that use literal values of the .keyCode or .key APIs and update them to use the keyCodes map. Presently TypeScript does not do any type checking or completion on these values (although I'm working to fix that in both the official react types as well as the official TypeScript DOM types) and it's a good practice to use the constants to avoid scenarios like:

  if (event.key === "ArowDown") {

  which will always return false because "ArowDown" is a mispelling of "ArrowDown".
  These situations are generally not terribly hard to find because somewhere in the preceeding code will be a call to event.key or event.keyCode, so searching for .key and .keyCode should turn them all up.

[kibanamachine]

Since this is a community submitted pull request, a Jenkins build has not been kicked off automatically. Can an Elastic organization member please verify the contents of this patch and then kick off a build manually?

[chandlerprall]

Code changes themselves look great, one request on the changelog.

[chandlerprall]

jenkins test this

[kibanamachine]

Preview documentation changes for this PR: https://eui.elastic.co/pr_3517/

[chandlerprall]

Still want this in draft?

[chandlerprall]

Changes LGTM; Re-requested Dave's input on the PR description.

[chandlerprall]

Another jenkins run after the merge with master, will merge if passing.

jenkins test this

[chandlerprall]

src/components/tool_tip/tool_tip.tsx(35,21): error TS2307: Cannot find module '../../services/key_codes'.

Looks like master introduced a new dependency on the refactored service.

[dimitropoulos]

@chandlerprall all rebased and an update for ToolTip is in 78cb2b1

[chandlerprall]

jenkins test this

[kibanamachine]

Preview documentation changes for this PR: https://eui.elastic.co/pr_3517/

[chandlerprall]

#3403

ERROR: Failed to download Chromium r706915! Set "PUPPETEER_SKIP_CHROMIUM_DOWNLOAD" env variable to skip download.

jenkins test this

[kibanamachine]

Preview documentation changes for this PR: https://eui.elastic.co/pr_3517/

[kibanamachine]

Preview documentation changes for this PR: https://eui.elastic.co/pr_3517/

[dimitropoulos]

thanks! now that this has merged I updated the PR description, as planned, with links to relevant source code to make it as easy as possible for consumers to update.