fix(material/expansion-panel): Prevent focus issue during collapse an…

…imation

This commit addresses an issue where mat-expansion-panels were breaking when a user attempted to quickly close and tab away from a panel after closing it. The issue occurred because the tab key was being pressed between the collapsing animation, causing the panel body to remain visible and receive focus.

To resolve this, we manually set the panel's visibility to hidden when the tab key is pressed during the collapsing animation. This ensures that the next element in the tab order receives focus as expected.

Fixes angular#27430.

src/material/expansion/expansion-panel-header.ts

@@ -7,7 +7,7 @@
  */
 
 import {FocusableOption, FocusMonitor, FocusOrigin} from '@angular/cdk/a11y';
-import {ENTER, hasModifierKey, SPACE} from '@angular/cdk/keycodes';
+import {ENTER, hasModifierKey, SPACE, TAB} from '@angular/cdk/keycodes';
 import {
   AfterViewInit,
   Attribute,
@@ -179,6 +179,13 @@ export class MatExpansionPanelHeader
     return null;
   }
 
+  /** Handle default for keydown event. */
+  private _handleDefaultKeydown(event: KeyboardEvent) {
+    if (this.panel.accordion) {
+      this.panel.accordion._handleHeaderKeydown(event);
+    }
+  }
+
   /** Handle keydown event calling to toggle() if appropriate. */
   _keydown(event: KeyboardEvent) {
     switch (event.keyCode) {
@@ -191,10 +198,15 @@ export class MatExpansionPanelHeader
         }
 
         break;
-      default:
-        if (this.panel.accordion) {
-          this.panel.accordion._handleHeaderKeydown(event);
+      case TAB:
+        if (this.panel.collapsingAnimation) {
+          this.panel._body.nativeElement.setAttribute('style', 'visibility: hidden');
         }
+        this._handleDefaultKeydown(event);
+
+        break;
+      default:
+        this._handleDefaultKeydown(event);
 
         return;
     }

src/material/expansion/expansion-panel.html

@@ -2,6 +2,7 @@
 <div class="mat-expansion-panel-content"
      role="region"
      [@bodyExpansion]="_getExpandedState()"
+     (@bodyExpansion.start)="_bodyAnimationStart($event)"
      (@bodyExpansion.done)="_bodyAnimationDone.next($event)"
      [attr.aria-labelledby]="_headerId"
      [id]="id"

src/material/expansion/expansion-panel.ts

@@ -104,6 +104,12 @@ export class MatExpansionPanel
   private _document: Document;
   private _hideToggle = false;
   private _togglePosition: MatAccordionTogglePosition;
+  private _collapsingAnimation = false;
+
+  /** whether the element is currently undergoing the collapsing animation */
+  get collapsingAnimation(): boolean {
+    return this._collapsingAnimation;
+  }
 
   /** Whether the toggle indicator should be hidden. */
   @Input()
@@ -174,6 +180,7 @@ export class MatExpansionPanel
         }),
       )
       .subscribe(event => {
+        this._collapsingAnimation = false;
         if (event.fromState !== 'void') {
           if (event.toState === 'expanded') {
             this.afterExpand.emit();
@@ -188,6 +195,13 @@ export class MatExpansionPanel
     }
   }
 
+  /** Check and determine if the element is currently undergoing a collapsing animation. */
+  _bodyAnimationStart(event: AnimationEvent) {
+    if (event.toState === 'collapsed') {
+      this._collapsingAnimation = true;
+    }
+  }
+
   /** Determines whether the expansion panel should have spacing between it and its siblings. */
   _hasSpacing(): boolean {
     if (this.accordion) {