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,6 +1,6 @@
-import {DOWN_ARROW, SPACE, ENTER, UP_ARROW} from '@angular/cdk/keycodes';
+import {DOWN_ARROW, SPACE, ENTER, UP_ARROW, HOME, END} 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 {By} from '@angular/platform-browser';
@@ -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 {SPACE, ENTER, HOME, END} from '@angular/cdk/keycodes';
 import {
   AfterContentInit,
   Attribute,
@@ -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);
     }