Skip to content

Commit

Permalink
fix(sidenav): make focus-trap occupy full height of sidenav (#2145)
Browse files Browse the repository at this point in the history
* fix(sidenav) make `focus-trap` occupy full height of sidenav

* add class to sidenav focus-trap

* prefix focus-trap class
  • Loading branch information
mmalerba authored Dec 9, 2016
1 parent 4adee46 commit 13223df
Show file tree
Hide file tree
Showing 5 changed files with 19 additions and 7 deletions.
2 changes: 1 addition & 1 deletion src/demo-app/sidenav/sidenav-demo.scss
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
.demo-sidenav-layout {
border: 3px solid black;

md-sidenav {
.md-sidenav-focus-trap > .cdk-focus-trap-content {
padding: 10px;
}
}
Expand Down
3 changes: 2 additions & 1 deletion src/demo-app/sidenav/sidenav-demo.ts
Original file line number Diff line number Diff line change
@@ -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';
Expand Down
2 changes: 1 addition & 1 deletion src/lib/core/a11y/focus-trap.html
Original file line number Diff line number Diff line change
@@ -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>
13 changes: 10 additions & 3 deletions src/lib/sidenav/sidenav.scss
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand All @@ -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;
}
6 changes: 5 additions & 1 deletion src/lib/sidenav/sidenav.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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)',
Expand Down

0 comments on commit 13223df

Please sign in to comment.