fix(selection-list): allow jumping to first/last item using home/end (#9062)

Allows users to jump focus to the first and last items in a selection list using the home and end keys.

Author: crisbeto

src/lib/list/selection-list.spec.ts

@@ -1,17 +1,17 @@
-import {DOWN_ARROW, SPACE, ENTER, UP_ARROW} from '@angular/cdk/keycodes';
+import {DOWN_ARROW, END, ENTER, HOME, SPACE, UP_ARROW} from '@angular/cdk/keycodes';
 import {Platform} from '@angular/cdk/platform';
-import {createKeyboardEvent, dispatchFakeEvent} from '@angular/cdk/testing';
+import {createKeyboardEvent, dispatchFakeEvent, dispatchKeyboardEvent} from '@angular/cdk/testing';
 import {Component, DebugElement} from '@angular/core';
 import {async, ComponentFixture, fakeAsync, inject, TestBed, tick} from '@angular/core/testing';
+import {FormControl, FormsModule, NgModel, ReactiveFormsModule} from '@angular/forms';
 import {By} from '@angular/platform-browser';
 import {
   MatListModule,
   MatListOption,
   MatListOptionChange,
   MatSelectionList,
-  MatSelectionListChange
+  MatSelectionListChange,
 } from './index';
-import {FormControl, FormsModule, NgModel, ReactiveFormsModule} from '@angular/forms';
 
 describe('MatSelectionList without forms', () => {
   describe('with list option', () => {
@@ -264,6 +264,29 @@ describe('MatSelectionList without forms', () => {
       expect(manager.activeItemIndex).toEqual(3);
     });
 
+    it('should focus the first non-disabled item when pressing HOME', () => {
+      const manager = selectionList.componentInstance._keyManager;
+      expect(manager.activeItemIndex).toBe(-1);
+
+      const event = dispatchKeyboardEvent(selectionList.nativeElement, 'keydown', HOME);
+      fixture.detectChanges();
+
+      // Note that the first item is disabled so we expect the second one to be focused.
+      expect(manager.activeItemIndex).toBe(1);
+      expect(event.defaultPrevented).toBe(true);
+    });
+
+    it('should focus the last item when pressing END', () => {
+      const manager = selectionList.componentInstance._keyManager;
+      expect(manager.activeItemIndex).toBe(-1);
+
+      const event = dispatchKeyboardEvent(selectionList.nativeElement, 'keydown', END);
+      fixture.detectChanges();
+
+      expect(manager.activeItemIndex).toBe(3);
+      expect(event.defaultPrevented).toBe(true);
+    });
+
     it('should be able to select all options', () => {
       const list: MatSelectionList = selectionList.componentInstance;
 

src/lib/list/selection-list.ts

@@ -9,7 +9,7 @@
 import {FocusableOption, FocusKeyManager} from '@angular/cdk/a11y';
 import {coerceBooleanProperty} from '@angular/cdk/coercion';
 import {SelectionModel} from '@angular/cdk/collections';
-import {SPACE, ENTER} from '@angular/cdk/keycodes';
+import {END, ENTER, HOME, SPACE} from '@angular/cdk/keycodes';
 import {
   AfterContentInit,
   Attribute,
@@ -29,6 +29,7 @@ import {
   QueryList,
   ViewEncapsulation,
 } from '@angular/core';
+import {ControlValueAccessor, NG_VALUE_ACCESSOR} from '@angular/forms';
 import {
   CanDisable,
   CanDisableRipple,
@@ -39,7 +40,6 @@ import {
   mixinDisableRipple,
   mixinTabIndex,
 } from '@angular/material/core';
-import {ControlValueAccessor, NG_VALUE_ACCESSOR} from '@angular/forms';
 
 
 /** @docs-private */
@@ -356,6 +356,12 @@ export class MatSelectionList extends _MatSelectionListMixinBase implements Focu
         // Always prevent space from scrolling the page since the list has focus
         event.preventDefault();
         break;
+      case HOME:
+      case END:
+        event.keyCode === HOME ? this._keyManager.setFirstItemActive() :
+                                 this._keyManager.setLastItemActive();
+        event.preventDefault();
+        break;
       default:
         this._keyManager.onKeydown(event);
     }