fix(material/expansion): prevent focus issue during collapse animation

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 #27430.

Author: kharazian

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) {