fix(drawer): unable to close using keyboard if there are no focusable elements

Fixes the drawer not trapping focus if it doesn't have any focusable elements, making it impossible to close using the keyboard.

Author: crisbeto

src/lib/sidenav/drawer.spec.ts

@@ -19,8 +19,9 @@ describe('MatDrawer', () => {
         DrawerSetToOpenedFalse,
         DrawerSetToOpenedTrue,
         DrawerDynamicPosition,
-        DrawerWitFocusableElements,
+        DrawerWithFocusableElements,
         DrawerOpenBinding,
+        DrawerWithoutFocusableElements,
       ],
     });
 
@@ -363,14 +364,14 @@ describe('MatDrawer', () => {
   });
 
   describe('focus trapping behavior', () => {
-    let fixture: ComponentFixture<DrawerWitFocusableElements>;
-    let testComponent: DrawerWitFocusableElements;
+    let fixture: ComponentFixture<DrawerWithFocusableElements>;
+    let testComponent: DrawerWithFocusableElements;
     let drawer: MatDrawer;
     let firstFocusableElement: HTMLElement;
     let lastFocusableElement: HTMLElement;
 
     beforeEach(() => {
-      fixture = TestBed.createComponent(DrawerWitFocusableElements);
+      fixture = TestBed.createComponent(DrawerWithFocusableElements);
       testComponent = fixture.debugElement.componentInstance;
       drawer = fixture.debugElement.query(By.directive(MatDrawer)).componentInstance;
       firstFocusableElement = fixture.debugElement.query(By.css('.link1')).nativeElement;
@@ -410,6 +411,21 @@ describe('MatDrawer', () => {
 
       expect(document.activeElement).toBe(lastFocusableElement);
     }));
+
+    it('should focus the drawer if there are no focusable elements', fakeAsync(() => {
+      fixture.destroy();
+
+      const nonFocusableFixture = TestBed.createComponent(DrawerWithoutFocusableElements);
+      const drawerEl = nonFocusableFixture.debugElement.query(By.directive(MatDrawer));
+      nonFocusableFixture.detectChanges();
+
+      drawerEl.componentInstance.open();
+      nonFocusableFixture.detectChanges();
+      tick();
+
+      expect(document.activeElement).toBe(drawerEl.nativeElement);
+    }));
+
   });
 });
 
@@ -644,10 +660,19 @@ class DrawerDynamicPosition {
       <a class="link2" href="#">link2</a>
     </mat-drawer-container>`,
 })
-class DrawerWitFocusableElements {
+class DrawerWithFocusableElements {
   mode: string = 'over';
 }
 
+@Component({
+  template: `
+    <mat-drawer-container>
+      <mat-drawer position="start" mode="over">
+        <button disabled>Not focusable</button>
+      </mat-drawer>
+    </mat-drawer-container>`,
+})
+class DrawerWithoutFocusableElements {}
 
 @Component({
   template: `

src/lib/sidenav/drawer.ts

@@ -249,21 +249,33 @@ export class MatDrawer implements AfterContentInit, OnDestroy {
               private _focusTrapFactory: FocusTrapFactory,
               private _focusMonitor: FocusMonitor,
               @Optional() @Inject(DOCUMENT) private _doc: any) {
+
     this.openedChange.subscribe((opened: boolean) => {
       if (opened) {
         if (this._doc) {
           this._elementFocusedBeforeDrawerWasOpened = this._doc.activeElement as HTMLElement;
         }
 
         if (this._isFocusTrapEnabled && this._focusTrap) {
-          this._focusTrap.focusInitialElementWhenReady();
+          this._trapFocus();
         }
       } else {
         this._restoreFocus();
       }
     });
   }
 
+  /** Traps focus inside the drawer. */
+  private _trapFocus() {
+    this._focusTrap.focusInitialElementWhenReady().then(hasMovedFocus => {
+      if (!hasMovedFocus) {
+        // If there were no focusable elements, focus the sidenav
+        // itself so the keyboard navigation still works.
+        this._elementRef.nativeElement.focus();
+      }
+    });
+  }
+
   /**
    * If focus is currently inside the drawer, restores it to where it was before the drawer
    * opened.