fix(expansion-panel): don't handle events with modifier keys in accordion (#15750)

Fixes the accordion reacting to and preventing the default action of the home and end keys, even if they have modifiers, which could conflict with the user's shortcuts.

Author: crisbeto

src/material/expansion/accordion.spec.ts

@@ -8,7 +8,7 @@ import {
   MatExpansionPanel,
   MatExpansionPanelHeader,
 } from './index';
-import {dispatchKeyboardEvent} from '@angular/cdk/testing';
+import {dispatchKeyboardEvent, createKeyboardEvent, dispatchEvent} from '@angular/cdk/testing';
 import {DOWN_ARROW, UP_ARROW, HOME, END} from '@angular/cdk/keycodes';
 import {FocusMonitor} from '@angular/cdk/a11y';
 
@@ -201,10 +201,31 @@ describe('MatAccordion', () => {
     const headers = fixture.componentInstance.headers.toArray();
 
     headers.forEach(header => spyOn(header, 'focus'));
-    dispatchKeyboardEvent(headerElements[headerElements.length - 1].nativeElement, 'keydown', HOME);
+    const event = dispatchKeyboardEvent(
+        headerElements[headerElements.length - 1].nativeElement, 'keydown', HOME);
     fixture.detectChanges();
 
     expect(headers[0].focus).toHaveBeenCalledTimes(1);
+    expect(event.defaultPrevented).toBe(true);
+  });
+
+  it('should not handle the home key when it is pressed with a modifier', () => {
+    const fixture = TestBed.createComponent(SetOfItems);
+    fixture.detectChanges();
+
+    const headerElements = fixture.debugElement.queryAll(By.css('mat-expansion-panel-header'));
+    const headers = fixture.componentInstance.headers.toArray();
+
+    headers.forEach(header => spyOn(header, 'focus'));
+    const eventTarget = headerElements[headerElements.length - 1].nativeElement;
+    const event = createKeyboardEvent('keydown', HOME, eventTarget);
+    Object.defineProperty(event, 'altKey', {get: () => true});
+
+    dispatchEvent(eventTarget, event);
+    fixture.detectChanges();
+
+    expect(headers[0].focus).not.toHaveBeenCalled();
+    expect(event.defaultPrevented).toBe(false);
   });
 
   it('should focus the last header when pressing the end key', () => {
@@ -215,10 +236,31 @@ describe('MatAccordion', () => {
     const headers = fixture.componentInstance.headers.toArray();
 
     headers.forEach(header => spyOn(header, 'focus'));
-    dispatchKeyboardEvent(headerElements[0].nativeElement, 'keydown', END);
+    const event = dispatchKeyboardEvent(headerElements[0].nativeElement, 'keydown', END);
     fixture.detectChanges();
 
     expect(headers[headers.length - 1].focus).toHaveBeenCalledTimes(1);
+    expect(event.defaultPrevented).toBe(true);
+  });
+
+  it('should not handle the end key when it is pressed with a modifier', () => {
+    const fixture = TestBed.createComponent(SetOfItems);
+    fixture.detectChanges();
+
+    const headerElements = fixture.debugElement.queryAll(By.css('mat-expansion-panel-header'));
+    const headers = fixture.componentInstance.headers.toArray();
+
+    headers.forEach(header => spyOn(header, 'focus'));
+
+    const eventTarget = headerElements[0].nativeElement;
+    const event = createKeyboardEvent('keydown', END, eventTarget);
+    Object.defineProperty(event, 'altKey', {get: () => true});
+
+    dispatchEvent(eventTarget, event);
+    fixture.detectChanges();
+
+    expect(headers[headers.length - 1].focus).not.toHaveBeenCalled();
+    expect(event.defaultPrevented).toBe(false);
   });
 
 });

src/material/expansion/accordion.ts

@@ -10,7 +10,7 @@ import {Directive, Input, ContentChildren, QueryList, AfterContentInit} from '@a
 import {coerceBooleanProperty} from '@angular/cdk/coercion';
 import {CdkAccordion} from '@angular/cdk/accordion';
 import {FocusKeyManager} from '@angular/cdk/a11y';
-import {HOME, END} from '@angular/cdk/keycodes';
+import {HOME, END, hasModifierKey} from '@angular/cdk/keycodes';
 import {MAT_ACCORDION, MatAccordionBase, MatAccordionDisplayMode} from './accordion-base';
 import {MatExpansionPanelHeader} from './expansion-panel-header';
 
@@ -61,11 +61,15 @@ export class MatAccordion extends CdkAccordion implements MatAccordionBase, Afte
     const manager = this._keyManager;
 
     if (keyCode === HOME) {
-      manager.setFirstItemActive();
-      event.preventDefault();
+      if (!hasModifierKey(event)) {
+        manager.setFirstItemActive();
+        event.preventDefault();
+      }
     } else if (keyCode === END) {
-      manager.setLastItemActive();
-      event.preventDefault();
+      if (!hasModifierKey(event)) {
+        manager.setLastItemActive();
+        event.preventDefault();
+      }
     } else {
       this._keyManager.onKeydown(event);
     }