fix(sidenav): focus trap enabled state not updated if mode changes while open (#16602)

Currently we update the focus trap enabled state only on open/close, however this means that it'll be incorrect if the sidenav mode changes while it's open.

Fixes #16601.

(cherry picked from commit 197091c)

Author: crisbeto

src/material/sidenav/drawer.spec.ts

@@ -510,6 +510,27 @@ describe('MatDrawer', () => {
       expect(document.activeElement).not.toBe(firstFocusableElement);
     }));
 
+    it('should update the focus trap enable state if the mode changes while open', fakeAsync(() => {
+      testComponent.mode = 'side';
+      fixture.detectChanges();
+
+      drawer.open();
+      fixture.detectChanges();
+      tick();
+
+      const anchors =
+          Array.from<HTMLElement>(fixture.nativeElement.querySelectorAll('.cdk-focus-trap-anchor'));
+
+      expect(anchors.every(anchor => !anchor.hasAttribute('tabindex')))
+          .toBe(true, 'Expected focus trap anchors to be disabled in side mode.');
+
+      testComponent.mode = 'over';
+      fixture.detectChanges();
+
+      expect(anchors.every(anchor => anchor.getAttribute('tabindex') === '0'))
+          .toBe(true, 'Expected focus trap anchors to be enabled in over mode.');
+    }));
+
   });
 });
 

src/material/sidenav/drawer.ts

@@ -154,6 +154,7 @@ export class MatDrawer implements AfterContentInit, AfterContentChecked, OnDestr
   get mode(): 'over' | 'push' | 'side' { return this._mode; }
   set mode(value: 'over' | 'push' | 'side') {
     this._mode = value;
+    this._updateFocusTrapState();
     this._modeChanged.next();
   }
   private _mode: 'over' | 'push' | 'side' = 'over';
@@ -333,7 +334,7 @@ export class MatDrawer implements AfterContentInit, AfterContentChecked, OnDestr
 
   ngAfterContentInit() {
     this._focusTrap = this._focusTrapFactory.create(this._elementRef.nativeElement);
-    this._focusTrap.enabled = this._isFocusTrapEnabled;
+    this._updateFocusTrapState();
   }
 
   ngAfterContentChecked() {
@@ -400,9 +401,7 @@ export class MatDrawer implements AfterContentInit, AfterContentChecked, OnDestr
       this._restoreFocus();
     }
 
-    if (this._focusTrap) {
-      this._focusTrap.enabled = this._isFocusTrapEnabled;
-    }
+    this._updateFocusTrapState();
 
     return new Promise<MatDrawerToggleResult>(resolve => {
       this.openedChange.pipe(take(1)).subscribe(open => resolve(open ? 'open' : 'close'));
@@ -413,6 +412,13 @@ export class MatDrawer implements AfterContentInit, AfterContentChecked, OnDestr
     return this._elementRef.nativeElement ? (this._elementRef.nativeElement.offsetWidth || 0) : 0;
   }
 
+  /** Updates the enabled state of the focus trap. */
+  private _updateFocusTrapState() {
+    if (this._focusTrap) {
+      this._focusTrap.enabled = this._isFocusTrapEnabled;
+    }
+  }
+
   // We have to use a `HostListener` here in order to support both Ivy and ViewEngine.
   // In Ivy the `host` bindings will be merged when this class is extended, whereas in
   // ViewEngine they're overwritte.