Change (deprecated) KeyboardEvent.keyCode -> KeyboardEvent.key (amppr…

…oject#18530)

* Change KeyboardEvent.keyCode -> KeyboardEvent.key

* Linter issues

* Change KeyCodes enum to be strings

* which fix

extensions/amp-accordion/0.1/amp-accordion.js

@@ -16,7 +16,7 @@
 
 import {ActionTrust} from '../../../src/action-constants';
 import {Animation} from '../../../src/animation';
-import {KeyCodes} from '../../../src/utils/key-codes';
+import {Keys} from '../../../src/utils/key-codes';
 import {Layout} from '../../../src/layout';
 import {Services} from '../../../src/services';
 import {bezierCurve} from '../../../src/curve';
@@ -487,14 +487,14 @@ class AmpAccordion extends AMP.BaseElement {
     if (event.defaultPrevented) {
       return;
     }
-    const {keyCode} = event;
-    switch (keyCode) {
-      case KeyCodes.UP_ARROW: /* fallthrough */
-      case KeyCodes.DOWN_ARROW:
+    const {key} = event;
+    switch (key) {
+      case Keys.UP_ARROW: /* fallthrough */
+      case Keys.DOWN_ARROW:
         this.navigationKeyDownHandler_(event);
         return;
-      case KeyCodes.ENTER: /* fallthrough */
-      case KeyCodes.SPACE:
+      case Keys.ENTER: /* fallthrough */
+      case Keys.SPACE:
         if (event.target == event.currentTarget) {
           // Only activate if header element was activated directly.
           // Do not respond to key presses on its children.
@@ -516,7 +516,7 @@ class AmpAccordion extends AMP.BaseElement {
     if (index !== -1) {
       event.preventDefault();
       // Up and down are the same regardless of locale direction.
-      const diff = event.keyCode == KeyCodes.UP_ARROW ? -1 : 1;
+      const diff = event.key == Keys.UP_ARROW ? -1 : 1;
       // If user navigates one past the beginning or end, wrap around.
       let newFocusIndex = (index + diff) % this.headers_.length;
       if (newFocusIndex < 0) {

extensions/amp-accordion/0.1/test/test-amp-accordion.js

@@ -15,7 +15,7 @@
  */
 
 import '../amp-accordion';
-import {KeyCodes} from '../../../../src/utils/key-codes';
+import {Keys} from '../../../../src/utils/key-codes';
 import {poll} from '../../../../testing/iframe';
 import {tryFocus} from '../../../../src/dom';
 
@@ -369,7 +369,7 @@ describes.realWin('amp-accordion', {
       const headerElements = doc.querySelectorAll(
           'section > *:first-child');
       const keyDownEvent = {
-        keyCode: KeyCodes.SPACE,
+        key: Keys.SPACE,
         target: headerElements[0],
         currentTarget: headerElements[0],
         preventDefault: sandbox.spy(),
@@ -391,7 +391,7 @@ describes.realWin('amp-accordion', {
       const child = doc.createElement('div');
       headerElements[0].appendChild(child);
       const keyDownEvent = {
-        keyCode: KeyCodes.ENTER,
+        key: Keys.ENTER,
         target: child,
         currentTarget: headerElements[0],
         preventDefault: sandbox.spy(),
@@ -411,7 +411,7 @@ describes.realWin('amp-accordion', {
       const headerElements = doc.querySelectorAll(
           'section > *:first-child');
       const keyDownEvent = {
-        keyCode: KeyCodes.ENTER,
+        key: Keys.ENTER,
         target: headerElements[1],
         currentTarget: headerElements[1],
         preventDefault: sandbox.spy(),
@@ -435,7 +435,7 @@ describes.realWin('amp-accordion', {
       expect(doc.activeElement)
           .to.equal(headerElements[0]);
       const upArrowEvent = {
-        keyCode: KeyCodes.UP_ARROW,
+        key: Keys.UP_ARROW,
         target: headerElements[0],
         currentTarget: headerElements[0],
         preventDefault: sandbox.spy(),
@@ -444,7 +444,7 @@ describes.realWin('amp-accordion', {
       expect(doc.activeElement)
           .to.equal(headerElements[headerElements.length - 1]);
       const downArrowEvent = {
-        keyCode: KeyCodes.DOWN_ARROW,
+        key: Keys.DOWN_ARROW,
         target: headerElements[headerElements.length - 1],
         currentTarget: headerElements[headerElements.length - 1],
         preventDefault: sandbox.spy(),

extensions/amp-carousel/0.1/base-carousel.js

@@ -13,7 +13,7 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import {KeyCodes} from '../../../src/utils/key-codes';
+import {Keys} from '../../../src/utils/key-codes';
 import {Services} from '../../../src/services';
 
 /**
@@ -77,7 +77,7 @@ export class BaseCarousel extends AMP.BaseElement {
     button.classList.add(className);
     button.setAttribute('role', 'button');
     button.onkeydown = event => {
-      if (event.keyCode == KeyCodes.ENTER || event.keyCode == KeyCodes.SPACE) {
+      if (event.key == Keys.ENTER || event.key == Keys.SPACE) {
         if (!event.defaultPrevented) {
           event.preventDefault();
           onInteraction();

extensions/amp-date-picker/0.1/amp-date-picker.js

@@ -22,7 +22,7 @@ import {DEFAULT_FORMAT, DEFAULT_LOCALE, FORMAT_STRINGS} from './constants';
 import {DatesList} from './dates-list';
 import {Deferred} from '../../../src/utils/promise';
 import {FiniteStateMachine} from '../../../src/finite-state-machine';
-import {KeyCodes} from '../../../src/utils/key-codes';
+import {Keys} from '../../../src/utils/key-codes';
 import {Layout, isLayoutSizeDefined} from '../../../src/layout';
 import {Services} from '../../../src/services';
 import {batchFetchJsonFor} from '../../../src/batched-json';
@@ -948,7 +948,7 @@ export class AmpDatePicker extends AMP.BaseElement {
    * @private
    */
   handleDocumentKeydown_(e) {
-    if (e.keyCode == KeyCodes.ESCAPE &&
+    if (e.key == Keys.ESCAPE &&
         this.mode_ == DatePickerMode.OVERLAY &&
         this.element.contains(this.document_.activeElement)) {
       this.transitionTo_(DatePickerState.OVERLAY_CLOSED);
@@ -967,7 +967,7 @@ export class AmpDatePicker extends AMP.BaseElement {
       return;
     }
 
-    if (e.keyCode == KeyCodes.DOWN_ARROW) {
+    if (e.key == Keys.DOWN_ARROW) {
       this.updateDateFieldFocus_(target);
       this.transitionTo_(DatePickerState.OVERLAY_OPEN_PICKER);
       if (this.mode_ === DatePickerMode.STATIC) {
@@ -978,7 +978,7 @@ export class AmpDatePicker extends AMP.BaseElement {
         }
       }
       e.preventDefault();
-    } else if (e.keyCode == KeyCodes.ESCAPE) {
+    } else if (e.key == Keys.ESCAPE) {
       this.transitionTo_(DatePickerState.OVERLAY_CLOSED);
     } else {
       this.transitionTo_(DatePickerState.OVERLAY_OPEN_INPUT);

extensions/amp-image-lightbox/0.1/amp-image-lightbox.js

@@ -26,7 +26,7 @@ import {
   TapzoomRecognizer,
 } from '../../../src/gesture-recognizers';
 import {Gestures} from '../../../src/gesture';
-import {KeyCodes} from '../../../src/utils/key-codes';
+import {Keys} from '../../../src/utils/key-codes';
 import {Services} from '../../../src/services';
 import {bezierCurve} from '../../../src/curve';
 import {continueMotion} from '../../../src/motion';
@@ -849,7 +849,7 @@ class AmpImageLightbox extends AMP.BaseElement {
    * @private
    */
   closeOnEscape_(event) {
-    if (event.keyCode == KeyCodes.ESCAPE) {
+    if (event.key == Keys.ESCAPE) {
       this.close();
     }
   }

extensions/amp-image-lightbox/0.1/test/test-amp-image-lightbox.js

@@ -20,7 +20,7 @@ import * as lolex from 'lolex';
 import {
   ImageViewer,
 } from '../amp-image-lightbox';
-import {KeyCodes} from '../../../../src/utils/key-codes';
+import {Keys} from '../../../../src/utils/key-codes';
 import {Services} from '../../../../src/services';
 import {parseSrcset} from '../../../../src/srcset';
 
@@ -190,7 +190,7 @@ describes.realWin('amp-image-lightbox component', {
       ampImage.setAttribute('width', '100');
       ampImage.setAttribute('height', '100');
       impl.activate({caller: ampImage});
-      impl.closeOnEscape_({keyCode: KeyCodes.ESCAPE});
+      impl.closeOnEscape_({key: Keys.ESCAPE});
       expect(setupCloseSpy).to.be.calledOnce;
 
       // Regression test: ensure escape event listener is bound properly

extensions/amp-lightbox-gallery/0.1/amp-lightbox-gallery.js

@@ -26,7 +26,7 @@ import {
   VIDEO_TAGS,
 } from './service/lightbox-manager-impl';
 import {Gestures} from '../../../src/gesture';
-import {KeyCodes} from '../../../src/utils/key-codes';
+import {Keys} from '../../../src/utils/key-codes';
 import {Services} from '../../../src/services';
 import {SwipeYRecognizer} from '../../../src/gesture-recognizers';
 import {bezierCurve} from '../../../src/curve';
@@ -1268,19 +1268,19 @@ export class AmpLightboxGallery extends AMP.BaseElement {
     if (!this.isActive_) {
       return;
     }
-    const {keyCode} = event;
-    switch (keyCode) {
-      case KeyCodes.ESCAPE:
+    const {key} = event;
+    switch (key) {
+      case Keys.ESCAPE:
         this.close_();
         break;
-      case KeyCodes.LEFT_ARROW:
+      case Keys.LEFT_ARROW:
         this.maybeSlideCarousel_(/*direction*/ -1);
         break;
-      case KeyCodes.RIGHT_ARROW:
+      case Keys.RIGHT_ARROW:
         this.maybeSlideCarousel_(/*direction*/ 1);
         break;
       default:
-        // Keycode not registered. Do nothing.
+        // Key not registered. Do nothing.
     }
   }
 

extensions/amp-lightbox/0.1/amp-lightbox.js

@@ -18,7 +18,7 @@ import {ActionTrust} from '../../../src/action-constants';
 import {AmpEvents} from '../../../src/amp-events';
 import {CSS} from '../../../build/amp-lightbox-0.1.css';
 import {Gestures} from '../../../src/gesture';
-import {KeyCodes} from '../../../src/utils/key-codes';
+import {Keys} from '../../../src/utils/key-codes';
 import {Services} from '../../../src/services';
 import {SwipeXYRecognizer} from '../../../src/gesture-recognizers';
 import {
@@ -395,7 +395,7 @@ class AmpLightbox extends AMP.BaseElement {
    * @private
    */
   closeOnEscape_(event) {
-    if (event.keyCode == KeyCodes.ESCAPE) {
+    if (event.key == Keys.ESCAPE) {
       this.close();
     }
   }

extensions/amp-selector/0.1/amp-selector.js

@@ -17,7 +17,7 @@
 import {ActionTrust} from '../../../src/action-constants';
 import {AmpEvents} from '../../../src/amp-events';
 import {CSS} from '../../../build/amp-selector-0.1.css';
-import {KeyCodes} from '../../../src/utils/key-codes';
+import {Keys} from '../../../src/utils/key-codes';
 import {Services} from '../../../src/services';
 import {areEqualOrdered} from '../../../src/utils/array';
 import {closestBySelector, isRTL, tryFocus} from '../../../src/dom';
@@ -431,18 +431,18 @@ export class AmpSelector extends AMP.BaseElement {
     if (this.element.hasAttribute('disabled')) {
       return;
     }
-    const {keyCode} = event;
-    switch (keyCode) {
-      case KeyCodes.LEFT_ARROW: /* fallthrough */
-      case KeyCodes.UP_ARROW: /* fallthrough */
-      case KeyCodes.RIGHT_ARROW: /* fallthrough */
-      case KeyCodes.DOWN_ARROW:
+    const {key} = event;
+    switch (key) {
+      case Keys.LEFT_ARROW: /* fallthrough */
+      case Keys.UP_ARROW: /* fallthrough */
+      case Keys.RIGHT_ARROW: /* fallthrough */
+      case Keys.DOWN_ARROW:
         if (this.kbSelectMode_ != KEYBOARD_SELECT_MODES.NONE) {
           this.navigationKeyDownHandler_(event);
         }
         return;
-      case KeyCodes.ENTER: /* fallthrough */
-      case KeyCodes.SPACE:
+      case Keys.ENTER: /* fallthrough */
+      case Keys.SPACE:
         this.selectionKeyDownHandler_(event);
         return;
     }
@@ -456,20 +456,20 @@ export class AmpSelector extends AMP.BaseElement {
   navigationKeyDownHandler_(event) {
     const doc = this.win.document;
     let dir = 0;
-    switch (event.keyCode) {
-      case KeyCodes.LEFT_ARROW:
+    switch (event.key) {
+      case Keys.LEFT_ARROW:
         // Left is considered 'previous' in LTR and 'next' in RTL.
         dir = isRTL(doc) ? 1 : -1;
         break;
-      case KeyCodes.UP_ARROW:
+      case Keys.UP_ARROW:
         // Up is considered 'previous' in both LTR and RTL.
         dir = -1;
         break;
-      case KeyCodes.RIGHT_ARROW:
+      case Keys.RIGHT_ARROW:
         // Right is considered 'next' in LTR and 'previous' in RTL.
         dir = isRTL(doc) ? -1 : 1;
         break;
-      case KeyCodes.DOWN_ARROW:
+      case Keys.DOWN_ARROW:
         // Down is considered 'next' in both LTR and RTL.
         dir = 1;
         break;
@@ -506,8 +506,8 @@ export class AmpSelector extends AMP.BaseElement {
    * @param {!Event} event
    */
   selectionKeyDownHandler_(event) {
-    const {keyCode} = event;
-    if (keyCode == KeyCodes.SPACE || keyCode == KeyCodes.ENTER) {
+    const {key} = event;
+    if (key == Keys.SPACE || key == Keys.ENTER) {
       if (this.options_.includes(event.target)) {
         event.preventDefault();
         const el = dev().assertElement(event.target);