fix(material/sidenav): disable focus trap while closed

src/material/sidenav/drawer.spec.ts

@@ -710,6 +710,29 @@ describe('MatDrawer', () => {
         .withContext('Expected focus trap anchors to be enabled in over mode.')
         .toBe(true);
     }));
+
+    it('should disable the focus trap while closed', fakeAsync(() => {
+      testComponent.mode = 'over';
+      fixture.changeDetectorRef.markForCheck();
+      fixture.detectChanges();
+      flush();
+
+      const anchors = Array.from<HTMLElement>(
+        fixture.nativeElement.querySelectorAll('.cdk-focus-trap-anchor'),
+      );
+      expect(anchors.map(anchor => anchor.getAttribute('tabindex'))).toEqual([null, null]);
+
+      drawer.open();
+      fixture.detectChanges();
+      flush();
+      expect(anchors.map(anchor => anchor.getAttribute('tabindex'))).toEqual(['0', '0']);
+
+      drawer.close();
+      fixture.changeDetectorRef.markForCheck();
+      fixture.detectChanges();
+      flush();
+      expect(anchors.map(anchor => anchor.getAttribute('tabindex'))).toEqual([null, null]);
+    }));
   });
 
   it('should mark the drawer content as scrollable', () => {

src/material/sidenav/drawer.ts

@@ -612,7 +612,7 @@ export class MatDrawer implements AfterViewInit, AfterContentChecked, OnDestroy
     if (this._focusTrap) {
       // Trap focus only if the backdrop is enabled. Otherwise, allow end user to interact with the
       // sidenav content.
-      this._focusTrap.enabled = !!this._container?.hasBackdrop;
+      this._focusTrap.enabled = !!this._container?.hasBackdrop && this.opened;
     }
   }