fix(expansion): accordion picking up headers from descendant accordion during keyboard navigation

src/material/expansion/accordion.spec.ts

@@ -31,6 +31,7 @@ describe('MatAccordion', () => {
         AccordionWithTogglePosition,
         NestedPanel,
         SetOfItems,
+        NestedAccordions,
       ],
     });
     TestBed.compileComponents();
@@ -176,6 +177,23 @@ describe('MatAccordion', () => {
     }
   });
 
+  it('should not move focus into nested accordions', () => {
+    const fixture = TestBed.createComponent(NestedAccordions);
+    fixture.detectChanges();
+
+    const headerElements = fixture.debugElement.queryAll(By.css('mat-expansion-panel-header'));
+    const headers = fixture.componentInstance.headers.toArray();
+    const {firstInnerHeader, secondOuterHeader} = fixture.componentInstance;
+
+    focusMonitor.focusVia(headerElements[0].nativeElement, 'keyboard');
+    headers.forEach(header => spyOn(header, 'focus'));
+
+    dispatchKeyboardEvent(headerElements[0].nativeElement, 'keydown', DOWN_ARROW);
+    fixture.detectChanges();
+    expect(secondOuterHeader.focus).toHaveBeenCalledTimes(1);
+    expect(firstInnerHeader.focus).not.toHaveBeenCalled();
+  });
+
   it('should move focus to the next header when pressing the up arrow', () => {
     const fixture = TestBed.createComponent(SetOfItems);
     fixture.detectChanges();
@@ -302,6 +320,29 @@ class SetOfItems {
   multi: boolean = false;
 }
 
+@Component({template: `
+  <mat-accordion>
+    <mat-expansion-panel>
+      <mat-expansion-panel-header>Summary 0</mat-expansion-panel-header>
+      Content 0
+
+      <mat-expansion-panel>
+        <mat-expansion-panel-header #firstInnerHeader>Summary 0-0</mat-expansion-panel-header>
+        Content 0-0
+      </mat-expansion-panel>
+    </mat-expansion-panel>
+
+    <mat-expansion-panel>
+      <mat-expansion-panel-header #secondOuterHeader>Summary 1</mat-expansion-panel-header>
+      Content 1
+    </mat-expansion-panel>
+  </mat-accordion>`})
+class NestedAccordions {
+  @ViewChildren(MatExpansionPanelHeader) headers: QueryList<MatExpansionPanelHeader>;
+  @ViewChild('secondOuterHeader', {static: false}) secondOuterHeader: MatExpansionPanelHeader;
+  @ViewChild('firstInnerHeader', {static: false}) firstInnerHeader: MatExpansionPanelHeader;
+}
+
 @Component({template: `
   <mat-accordion>
     <mat-expansion-panel #outerPanel="matExpansionPanel">

src/material/expansion/accordion.ts

@@ -11,6 +11,7 @@ import {coerceBooleanProperty} from '@angular/cdk/coercion';
 import {CdkAccordion} from '@angular/cdk/accordion';
 import {FocusKeyManager} from '@angular/cdk/a11y';
 import {HOME, END, hasModifierKey} from '@angular/cdk/keycodes';
+import {startWith} from 'rxjs/operators';
 import {
   MAT_ACCORDION,
   MatAccordionBase,
@@ -37,6 +38,10 @@ import {MatExpansionPanelHeader} from './expansion-panel-header';
 export class MatAccordion extends CdkAccordion implements MatAccordionBase, AfterContentInit {
   private _keyManager: FocusKeyManager<MatExpansionPanelHeader>;
 
+  /** Headers belonging to this accordion. */
+  private _ownHeaders = new QueryList<MatExpansionPanelHeader>();
+
+  /** All headers inside the accordion. Includes headers inside nested accordions. */
   @ContentChildren(MatExpansionPanelHeader, {descendants: true})
   _headers: QueryList<MatExpansionPanelHeader>;
 
@@ -60,7 +65,14 @@ export class MatAccordion extends CdkAccordion implements MatAccordionBase, Afte
   @Input() togglePosition: MatAccordionTogglePosition = 'after';
 
   ngAfterContentInit() {
-    this._keyManager = new FocusKeyManager(this._headers).withWrap();
+    this._headers.changes
+      .pipe(startWith(this._headers))
+      .subscribe((headers: QueryList<MatExpansionPanelHeader>) => {
+        this._ownHeaders.reset(headers.filter(header => header.panel.accordion === this));
+        this._ownHeaders.notifyOnChanges();
+      });
+
+    this._keyManager = new FocusKeyManager(this._ownHeaders).withWrap();
   }
 
   /** Handles keyboard events coming in from the panel headers. */