fix(material/sidenav): update inert value if mode changes (#33461)

Whether we mark the sidenav content as inert depends on the sidenav's mode. These changes add some code to account for the mode changing after the sidenav has been opened.

Fixes #33441.

Author: crisbeto

goldens/material/sidenav/index.api.md

@@ -122,6 +122,8 @@ export class MatDrawerContent extends CdkScrollable implements AfterContentInit
     // (undocumented)
     _container: MatDrawerContainer;
     // (undocumented)
+    _drawerModeChanged(): void;
+    // (undocumented)
     _drawerToggled(drawer: MatDrawer): void;
     // (undocumented)
     ngAfterContentInit(): void;

src/material/sidenav/drawer.spec.ts

@@ -751,6 +751,32 @@ describe('MatDrawer', () => {
 
       expect(content.hasAttribute('inert')).toBe(false);
     });
+
+    it('should toggle `inert` on the content if the `mode` changes', async () => {
+      testComponent.mode = 'over';
+      fixture.changeDetectorRef.markForCheck();
+      fixture.detectChanges();
+      lastFocusableElement.focus();
+
+      const content = fixture.nativeElement.querySelector('.mat-drawer-content');
+      expect(content.hasAttribute('inert')).toBe(false);
+
+      drawer.open();
+      fixture.detectChanges();
+      await wait(100);
+      fixture.detectChanges();
+      expect(content.getAttribute('inert')).toBe('true');
+
+      testComponent.mode = 'side';
+      fixture.changeDetectorRef.markForCheck();
+      fixture.detectChanges();
+      expect(content.hasAttribute('inert')).toBe(false);
+
+      testComponent.mode = 'over';
+      fixture.changeDetectorRef.markForCheck();
+      fixture.detectChanges();
+      expect(content.getAttribute('inert')).toBe('true');
+    });
   });
 
   it('should mark the drawer content as scrollable', () => {

src/material/sidenav/drawer.ts

@@ -123,6 +123,10 @@ export class MatDrawerContent extends CdkScrollable implements AfterContentInit
     }
   }
 
+  _drawerModeChanged() {
+    this._updateInert();
+  }
+
   private _updateInert() {
     const newValue = this._container._isShowingBackdrop();
 
@@ -235,6 +239,7 @@ export class MatDrawer implements AfterViewInit, OnDestroy {
     this._mode = value;
     this._updateFocusTrapState();
     this._modeChanged.next();
+    this._getContent()?._drawerModeChanged();
   }
   private _mode: MatDrawerMode = 'over';
 
@@ -579,7 +584,7 @@ export class MatDrawer implements AfterViewInit, OnDestroy {
     }
 
     this._opened.set(isOpen);
-    (this._container?._content || this._container?._userContent)?._drawerToggled(this);
+    this._getContent()?._drawerToggled(this);
 
     if (this._container?._transitionsEnabled) {
       // Note: it's important to set this as early as possible,
@@ -613,6 +618,11 @@ export class MatDrawer implements AfterViewInit, OnDestroy {
     });
   }
 
+  /** Gets the current content element. */
+  private _getContent() {
+    return this._container?._content || this._container?._userContent;
+  }
+
   /** Toggles whether the drawer is currently animating. */
   private _setIsAnimating(isAnimating: boolean) {
     this._elementRef.nativeElement.classList.toggle('mat-drawer-animating', isAnimating);