fix(material/sidenav): incorrectly trapping focus in some cases

src/material/sidenav/drawer.spec.ts

@@ -714,6 +714,22 @@ describe('MatDrawer', () => {
       flush();
       expect(anchors.map(anchor => anchor.getAttribute('tabindex'))).toEqual([null, null]);
     }));
+
+    it('should not trap focus if the drawer container has a backdrop, but is not showing it', fakeAsync(() => {
+      fixture.destroy();
+
+      const hiddenBackdropFixture = TestBed.createComponent(DrawerWithSideAndHiddenBackdrop);
+      hiddenBackdropFixture.detectChanges();
+      tick();
+      hiddenBackdropFixture.detectChanges();
+
+      const anchors = Array.from<HTMLElement>(
+        hiddenBackdropFixture.nativeElement.querySelectorAll('.cdk-focus-trap-anchor'),
+      );
+
+      expect(anchors.length).toBeGreaterThan(0);
+      expect(anchors.every(anchor => !anchor.hasAttribute('tabindex'))).toBe(true);
+    }));
   });
 
   it('should mark the drawer content as scrollable', () => {
@@ -1418,3 +1434,16 @@ class NestedDrawerContainers {
   @ViewChild('innerContainer') innerContainer!: MatDrawerContainer;
   @ViewChild('innerDrawer') innerDrawer!: MatDrawer;
 }
+
+@Component({
+  template: `
+    <mat-sidenav-container>
+      <mat-sidenav opened mode="side">
+        <button>Button inside</button>
+      </mat-sidenav>
+      <mat-sidenav mode="over" position="end">End content</mat-sidenav>
+    </mat-sidenav-container>
+  `,
+  imports: [MatSidenavModule],
+})
+class DrawerWithSideAndHiddenBackdrop {}

src/material/sidenav/drawer.ts

@@ -609,7 +609,7 @@ export class MatDrawer implements AfterViewInit, 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.opened;
+      this._focusTrap.enabled = this.opened && !!this._container?._isShowingBackdrop();
     }
   }