refactor(cdk/a11y): use event.key and not keycode for TreeKeyManager/…

…Typeahead

src/cdk/a11y/key-manager/tree-key-manager.spec.ts

@@ -1,15 +1,3 @@
-import {
-  DOWN_ARROW,
-  EIGHT,
-  END,
-  ENTER,
-  HOME,
-  LEFT_ARROW,
-  RIGHT_ARROW,
-  SPACE,
-  TAB,
-  UP_ARROW,
-} from '@angular/cdk/keycodes';
 import {createKeyboardEvent} from '../../testing/private';
 import {QueryList} from '@angular/core';
 import {TreeKeyManager} from './tree-key-manager';
@@ -98,17 +86,17 @@ describe('TreeKeyManager', () => {
 
   beforeEach(() => {
     fakeKeyEvents = {
-      downArrow: createKeyboardEvent('keydown', DOWN_ARROW),
-      upArrow: createKeyboardEvent('keydown', UP_ARROW),
-      leftArrow: createKeyboardEvent('keydown', LEFT_ARROW),
-      rightArrow: createKeyboardEvent('keydown', RIGHT_ARROW),
-      tab: createKeyboardEvent('keydown', TAB),
-      home: createKeyboardEvent('keydown', HOME),
-      end: createKeyboardEvent('keydown', END),
-      enter: createKeyboardEvent('keydown', ENTER),
-      space: createKeyboardEvent('keydown', SPACE),
-      star: createKeyboardEvent('keydown', EIGHT, '*'),
-      unsupported: createKeyboardEvent('keydown', 192), // corresponds to the tilde character (~)
+      downArrow: createKeyboardEvent('keydown', undefined, 'ArrowDown'),
+      upArrow: createKeyboardEvent('keydown', undefined, 'ArrowUp'),
+      leftArrow: createKeyboardEvent('keydown', undefined, 'ArrowLeft'),
+      rightArrow: createKeyboardEvent('keydown', undefined, 'ArrowRight'),
+      tab: createKeyboardEvent('keydown', undefined, 'Tab'),
+      home: createKeyboardEvent('keydown', undefined, 'Home'),
+      end: createKeyboardEvent('keydown', undefined, 'End'),
+      enter: createKeyboardEvent('keydown', undefined, 'Enter'),
+      space: createKeyboardEvent('keydown', undefined, ' '),
+      star: createKeyboardEvent('keydown', undefined, '*'),
+      unsupported: createKeyboardEvent('keydown', undefined, '~'),
     };
   });
 

src/cdk/a11y/key-manager/tree-key-manager.ts

@@ -6,17 +6,6 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-import {
-  DOWN_ARROW,
-  END,
-  ENTER,
-  HOME,
-  LEFT_ARROW,
-  RIGHT_ARROW,
-  SPACE,
-  TAB,
-  UP_ARROW,
-} from '@angular/cdk/keycodes';
 import {InjectionToken, QueryList} from '@angular/core';
 import {Observable, Subject, Subscription, isObservable, of as observableOf} from 'rxjs';
 import {take} from 'rxjs/operators';
@@ -149,49 +138,47 @@ export class TreeKeyManager<T extends TreeKeyManagerItem> implements TreeKeyMana
    * @param event Keyboard event that represents the user interaction with the tree.
    */
   onKeydown(event: KeyboardEvent) {
-    const keyCode = event.keyCode;
+    const key = event.key;
 
-    switch (keyCode) {
-      case TAB:
+    switch (key) {
+      case 'Tab':
         // NB: return here, in order to allow Tab to actually tab out of the tree
         return;
 
-      case DOWN_ARROW:
+      case 'ArrowDown':
         this._focusNextItem();
         break;
 
-      case UP_ARROW:
+      case 'ArrowUp':
         this._focusPreviousItem();
         break;
 
-      case RIGHT_ARROW:
+      case 'ArrowRight':
         this._horizontalOrientation === 'rtl'
           ? this._collapseCurrentItem()
           : this._expandCurrentItem();
         break;
 
-      case LEFT_ARROW:
+      case 'ArrowLeft':
         this._horizontalOrientation === 'rtl'
           ? this._expandCurrentItem()
           : this._collapseCurrentItem();
         break;
 
-      case HOME:
+      case 'Home':
         this._focusFirstItem();
         break;
 
-      case END:
+      case 'End':
         this._focusLastItem();
         break;
 
-      case ENTER:
-      case SPACE:
+      case 'Enter':
+      case ' ':
         this._activateCurrentItem();
         break;
 
       default:
-        // The keyCode for `*` is the same as the keyCode for `8`, so we check the event key
-        // instead.
         if (event.key === '*') {
           this._expandAllItemsAtCurrentItemLevel();
           break;

src/cdk/a11y/key-manager/typeahead.ts

@@ -6,7 +6,6 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-import {A, NINE, Z, ZERO} from '@angular/cdk/keycodes';
 import {Subject, Observable} from 'rxjs';
 import {debounceTime, filter, map, tap} from 'rxjs/operators';
 
@@ -75,14 +74,8 @@ export class Typeahead<T extends TypeaheadItem> {
   }
 
   handleKey(event: KeyboardEvent): void {
-    const keyCode = event.keyCode;
-
-    // Attempt to use the `event.key` which also maps it to the user's keyboard language,
-    // otherwise fall back to resolving alphanumeric characters via the keyCode.
-    if (event.key && event.key.length === 1) {
+    if (event.key.length === 1) {
       this._letterKeyStream.next(event.key.toLocaleUpperCase());
-    } else if ((keyCode >= A && keyCode <= Z) || (keyCode >= ZERO && keyCode <= NINE)) {
-      this._letterKeyStream.next(String.fromCharCode(keyCode));
     }
   }
 

src/cdk/tree/tree-with-tree-control.spec.ts

@@ -29,7 +29,6 @@ import {FlatTreeControl} from './control/flat-tree-control';
 import {NestedTreeControl} from './control/nested-tree-control';
 import {CdkTreeModule, CdkTreeNodePadding} from './index';
 import {CdkTree, CdkTreeNode} from './tree';
-import {LEFT_ARROW, RIGHT_ARROW} from '../keycodes';
 
 describe('CdkTree', () => {
   /** Represents an indent for expectNestedTreeToMatch */
@@ -777,7 +776,7 @@ describe('CdkTree', () => {
         (getNodes(treeElement)[1] as HTMLElement).click();
         fixture.detectChanges();
 
-        // NB: only four elements are present here; children are not present
+        // Note: only four elements are present here; children are not present
         // in DOM unless the parent node is expanded.
         expect(
           getNodes(treeElement)
@@ -808,7 +807,7 @@ describe('CdkTree', () => {
         let node = getNodes(treeElement)[1] as HTMLElement;
 
         node.focus();
-        node.dispatchEvent(createKeyboardEvent('keydown', RIGHT_ARROW));
+        node.dispatchEvent(createKeyboardEvent('keydown', undefined, 'ArrowRight'));
         fixture.detectChanges();
 
         expect(component.treeControl.expansionModel.selected.length)
@@ -824,7 +823,7 @@ describe('CdkTree', () => {
 
         node = getNodes(treeElement)[1] as HTMLElement;
         node.focus();
-        node.dispatchEvent(createKeyboardEvent('keydown', LEFT_ARROW));
+        node.dispatchEvent(createKeyboardEvent('keydown', undefined, 'ArrowLeft'));
         fixture.detectChanges();
 
         expectNestedTreeToMatch(
@@ -839,7 +838,7 @@ describe('CdkTree', () => {
 
         node = getNodes(treeElement)[1] as HTMLElement;
         node.focus();
-        node.dispatchEvent(createKeyboardEvent('keydown', RIGHT_ARROW));
+        node.dispatchEvent(createKeyboardEvent('keydown', undefined, 'ArrowRight'));
         fixture.detectChanges();
 
         expect(component.treeControl.expansionModel.selected.length)

src/cdk/tree/tree.spec.ts

@@ -25,7 +25,6 @@ import {map} from 'rxjs/operators';
 import {CdkTreeModule, CdkTreeNodePadding} from './index';
 import {CdkTree, CdkTreeNode} from './tree';
 import {createKeyboardEvent} from '@angular/cdk/testing/testbed/fake-events';
-import {B, C, T} from '../keycodes';
 
 /**
  * This is a cloned version of `tree.spec.ts` that contains all the same tests,
@@ -789,7 +788,7 @@ describe('CdkTree', () => {
         (getNodes(treeElement)[1] as HTMLElement).click();
         fixture.detectChanges();
 
-        // NB: only four elements are present here; children are not present
+        // Note: only four elements are present here; children are not present
         // in DOM unless the parent node is expanded.
         expect(getNodes(treeElement).map(x => x.getAttribute('aria-expanded')))
           .withContext('aria-expanded attributes')
@@ -1305,7 +1304,9 @@ describe('CdkTree', () => {
       });
       describe(`when pressing 'b'`, () => {
         beforeEach(fakeAsync(() => {
-          component.tree.nativeElement.dispatchEvent(createKeyboardEvent('keydown', B));
+          component.tree.nativeElement.dispatchEvent(
+            createKeyboardEvent('keydown', undefined, 'b'),
+          );
           fixture.detectChanges();
           tick(1000);
         }));
@@ -1332,13 +1333,17 @@ describe('CdkTree', () => {
 
       describe(`when pressing 'b'`, () => {
         beforeEach(fakeAsync(() => {
-          component.tree.nativeElement.dispatchEvent(createKeyboardEvent('keydown', B));
+          component.tree.nativeElement.dispatchEvent(
+            createKeyboardEvent('keydown', undefined, 'b'),
+          );
           fixture.detectChanges();
           tick(1000);
         }));
 
         it('focuses banana', fakeAsync(() => {
-          component.tree.nativeElement.dispatchEvent(createKeyboardEvent('keydown', B));
+          component.tree.nativeElement.dispatchEvent(
+            createKeyboardEvent('keydown', undefined, 'b'),
+          );
           fixture.detectChanges();
           tick(1000);
 
@@ -1350,7 +1355,9 @@ describe('CdkTree', () => {
 
       describe(`when pressing 'c'`, () => {
         beforeEach(fakeAsync(() => {
-          component.tree.nativeElement.dispatchEvent(createKeyboardEvent('keydown', C));
+          component.tree.nativeElement.dispatchEvent(
+            createKeyboardEvent('keydown', undefined, 'c'),
+          );
           fixture.detectChanges();
           tick(1000);
         }));
@@ -1363,7 +1370,9 @@ describe('CdkTree', () => {
 
       describe(`when pressing 't'`, () => {
         beforeEach(fakeAsync(() => {
-          component.tree.nativeElement.dispatchEvent(createKeyboardEvent('keydown', T));
+          component.tree.nativeElement.dispatchEvent(
+            createKeyboardEvent('keydown', undefined, 't'),
+          );
           fixture.detectChanges();
           tick(1000);
         }));