fix(sidenav): make focus-trap occupy full height of sidenav (angula…

…r#2145) * fix(sidenav) make `focus-trap` occupy full height of sidenav * add class to sidenav focus-trap * prefix focus-trap class
kara · Dec 9, 2016 · 13223df · 13223df
1 parent 4adee46
commit 13223df
Show file tree

Hide file tree

Showing 5 changed files with 19 additions and 7 deletions.
diff --git 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 > .cdk-focus-trap-content {
     padding: 10px;
   }
 }

diff --git a/src/demo-app/sidenav/sidenav-demo.ts b/src/demo-app/sidenav/sidenav-demo.ts
@@ -1,11 +1,12 @@
-import {Component} from '@angular/core';
+import {Component, ViewEncapsulation} from '@angular/core';
 
 
 @Component({
   moduleId: module.id,
   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
@@ -1,3 +1,3 @@
 <div *ngIf="!disabled" tabindex="0" (focus)="focusLastTabbableElement()"></div>
-<div #trappedContent><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
@@ -109,9 +109,6 @@ md-sidenav {
   min-width: 5%;
   outline: 0;
 
-  // TODO(kara): revisit scrolling behavior for sidenavs
-  overflow-y: auto;
-
   @include md-sidenav-transition(0, -100%);
 
   &.md-sidenav-side {
@@ -136,6 +133,16 @@ md-sidenav {
   }
 }
 
+.md-sidenav-focus-trap {
+  height: 100%;
+
+  > .cdk-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
@@ -46,7 +46,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)',
     '(keydown)': 'handleKeydown($event)',