From 03bb7597e9ef6ccb9c22a37fe46e84ffcb558b86 Mon Sep 17 00:00:00 2001
From: Miles Malerba <mmalerba@google.com>
Date: Fri, 9 Dec 2016 09:10:33 -0800
Subject: [PATCH 1/3] fix(sidenav) make `focus-trap` occupy full height of
 sidenav

---
 src/demo-app/sidenav/sidenav-demo.scss |  2 +-
 src/demo-app/sidenav/sidenav-demo.ts   |  3 ++-
 src/lib/core/a11y/focus-trap.html      |  2 +-
 src/lib/sidenav/sidenav.scss           | 11 +++++++++--
 4 files changed, 13 insertions(+), 5 deletions(-)

diff --git a/src/demo-app/sidenav/sidenav-demo.scss b/src/demo-app/sidenav/sidenav-demo.scss
index 47813d802733..3b03ba3b80c1 100644
--- a/src/demo-app/sidenav/sidenav-demo.scss
+++ b/src/demo-app/sidenav/sidenav-demo.scss
@@ -1,7 +1,7 @@
 .demo-sidenav-layout {
   border: 3px solid black;
 
-  md-sidenav {
+  md-sidenav .focus-trap-content {
     padding: 10px;
   }
 }
diff --git a/src/demo-app/sidenav/sidenav-demo.ts b/src/demo-app/sidenav/sidenav-demo.ts
index 3e653e115256..ed5b512679d2 100644
--- a/src/demo-app/sidenav/sidenav-demo.ts
+++ b/src/demo-app/sidenav/sidenav-demo.ts
@@ -1,4 +1,4 @@
-import {Component} from '@angular/core';
+import {Component, ViewEncapsulation} from '@angular/core';
 
 
 @Component({
@@ -6,6 +6,7 @@ import {Component} from '@angular/core';
   selector: 'sidenav-demo',
   templateUrl: 'sidenav-demo.html',
   styleUrls: ['sidenav-demo.css'],
+  encapsulation: ViewEncapsulation.None,
 })
 export class SidenavDemo {
   side = 'start';
diff --git a/src/lib/core/a11y/focus-trap.html b/src/lib/core/a11y/focus-trap.html
index 077fc134b42a..123bd1bf63a1 100644
--- a/src/lib/core/a11y/focus-trap.html
+++ b/src/lib/core/a11y/focus-trap.html
@@ -1,3 +1,3 @@
 <div *ngIf="!disabled" tabindex="0" (focus)="focusLastTabbableElement()"></div>
-<div #trappedContent><ng-content></ng-content></div>
+<div #trappedContent class="focus-trap-content"><ng-content></ng-content></div>
 <div *ngIf="!disabled" tabindex="0" (focus)="focusFirstTabbableElement()"></div>
diff --git a/src/lib/sidenav/sidenav.scss b/src/lib/sidenav/sidenav.scss
index 06923ff59a08..44f43ef3ce42 100644
--- a/src/lib/sidenav/sidenav.scss
+++ b/src/lib/sidenav/sidenav.scss
@@ -108,8 +108,15 @@ md-sidenav {
   z-index: 3;
   min-width: 5%;
 
-  // TODO(kara): revisit scrolling behavior for sidenavs
-  overflow-y: auto;
+  > focus-trap {
+    height: 100%;
+
+    > .focus-trap-content {
+      box-sizing: border-box;
+      height: 100%;
+      overflow-y: auto; // TODO(kara): revisit scrolling behavior for sidenavs
+    }
+  }
 
   @include md-sidenav-transition(0, -100%);
 

From 41b9b1ca139214e773c424f14453f677a0ad64ea Mon Sep 17 00:00:00 2001
From: Miles Malerba <mmalerba@google.com>
Date: Fri, 9 Dec 2016 11:14:16 -0800
Subject: [PATCH 2/3] add class to sidenav focus-trap

---
 src/demo-app/sidenav/sidenav-demo.scss |  2 +-
 src/lib/sidenav/sidenav.scss           | 20 ++++++++++----------
 src/lib/sidenav/sidenav.ts             |  6 +++++-
 3 files changed, 16 insertions(+), 12 deletions(-)

diff --git a/src/demo-app/sidenav/sidenav-demo.scss b/src/demo-app/sidenav/sidenav-demo.scss
index 3b03ba3b80c1..e94602119315 100644
--- a/src/demo-app/sidenav/sidenav-demo.scss
+++ b/src/demo-app/sidenav/sidenav-demo.scss
@@ -1,7 +1,7 @@
 .demo-sidenav-layout {
   border: 3px solid black;
 
-  md-sidenav .focus-trap-content {
+  .md-sidenav-focus-trap > .focus-trap-content {
     padding: 10px;
   }
 }
diff --git a/src/lib/sidenav/sidenav.scss b/src/lib/sidenav/sidenav.scss
index 44f43ef3ce42..1af7773be6ce 100644
--- a/src/lib/sidenav/sidenav.scss
+++ b/src/lib/sidenav/sidenav.scss
@@ -108,16 +108,6 @@ md-sidenav {
   z-index: 3;
   min-width: 5%;
 
-  > focus-trap {
-    height: 100%;
-
-    > .focus-trap-content {
-      box-sizing: border-box;
-      height: 100%;
-      overflow-y: auto; // TODO(kara): revisit scrolling behavior for sidenavs
-    }
-  }
-
   @include md-sidenav-transition(0, -100%);
 
   &.md-sidenav-side {
@@ -142,6 +132,16 @@ md-sidenav {
   }
 }
 
+.md-sidenav-focus-trap {
+  height: 100%;
+
+  > .focus-trap-content {
+    box-sizing: border-box;
+    height: 100%;
+    overflow-y: auto; // TODO(kara): revisit scrolling behavior for sidenavs
+  }
+}
+
 .md-sidenav-invalid {
   display: none;
 }
diff --git a/src/lib/sidenav/sidenav.ts b/src/lib/sidenav/sidenav.ts
index e6cc23d6e638..7622ed28fc52 100644
--- a/src/lib/sidenav/sidenav.ts
+++ b/src/lib/sidenav/sidenav.ts
@@ -37,7 +37,11 @@ export class MdSidenavToggleResult {
 @Component({
   moduleId: module.id,
   selector: 'md-sidenav, mat-sidenav',
-  template: '<focus-trap [disabled]="isFocusTrapDisabled"><ng-content></ng-content></focus-trap>',
+  // TODO(mmalerba): move template to separate file.
+  template: `
+    <focus-trap class="md-sidenav-focus-trap" [disabled]="isFocusTrapDisabled">
+      <ng-content></ng-content>
+    </focus-trap>`,
   host: {
     '(transitionend)': '_onTransitionEnd($event)',
     // must prevent the browser from aligning text based on value

From 7ab4448741b2cf5c20fe3a5c5bd043dbef00bbe3 Mon Sep 17 00:00:00 2001
From: Miles Malerba <mmalerba@google.com>
Date: Fri, 9 Dec 2016 12:24:00 -0800
Subject: [PATCH 3/3] prefix focus-trap class

---
 src/demo-app/sidenav/sidenav-demo.scss | 2 +-
 src/lib/core/a11y/focus-trap.html      | 2 +-
 src/lib/sidenav/sidenav.scss           | 2 +-
 3 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/demo-app/sidenav/sidenav-demo.scss b/src/demo-app/sidenav/sidenav-demo.scss
index e94602119315..92c7d2455dbc 100644
--- a/src/demo-app/sidenav/sidenav-demo.scss
+++ b/src/demo-app/sidenav/sidenav-demo.scss
@@ -1,7 +1,7 @@
 .demo-sidenav-layout {
   border: 3px solid black;
 
-  .md-sidenav-focus-trap > .focus-trap-content {
+  .md-sidenav-focus-trap > .cdk-focus-trap-content {
     padding: 10px;
   }
 }
diff --git a/src/lib/core/a11y/focus-trap.html b/src/lib/core/a11y/focus-trap.html
index 123bd1bf63a1..5950764b3851 100644
--- a/src/lib/core/a11y/focus-trap.html
+++ b/src/lib/core/a11y/focus-trap.html
@@ -1,3 +1,3 @@
 <div *ngIf="!disabled" tabindex="0" (focus)="focusLastTabbableElement()"></div>
-<div #trappedContent class="focus-trap-content"><ng-content></ng-content></div>
+<div #trappedContent class="cdk-focus-trap-content"><ng-content></ng-content></div>
 <div *ngIf="!disabled" tabindex="0" (focus)="focusFirstTabbableElement()"></div>
diff --git a/src/lib/sidenav/sidenav.scss b/src/lib/sidenav/sidenav.scss
index 1af7773be6ce..d029b8c7e254 100644
--- a/src/lib/sidenav/sidenav.scss
+++ b/src/lib/sidenav/sidenav.scss
@@ -135,7 +135,7 @@ md-sidenav {
 .md-sidenav-focus-trap {
   height: 100%;
 
-  > .focus-trap-content {
+  > .cdk-focus-trap-content {
     box-sizing: border-box;
     height: 100%;
     overflow-y: auto; // TODO(kara): revisit scrolling behavior for sidenavs