chore: add skip navigation link for a11y demo (#6423)

This commit is contained in:
tinayuangao
2017-09-01 08:08:24 -07:00
committed by Jeremy Elbourn
parent 8f9f3c8fca
commit ed735a174a
2 changed files with 12 additions and 2 deletions
+4 -1
View File
@@ -1,9 +1,12 @@
<h1>Accessibility Demo</h1>
<nav>
<a (click)="skipNavigation()" href="javascript:void(0)">Skip navigation</a>
<a *ngFor="let navItem of navItems" [routerLink]="[navItem.route]">
{{navItem.name}}
</a>
</nav>
<router-outlet></router-outlet>
<div #maincontent tabindex="0">
<router-outlet></router-outlet>
</div>
+8 -1
View File
@@ -1,4 +1,4 @@
import {Component, ViewEncapsulation} from '@angular/core';
import {Component, ElementRef, ViewChild, ViewEncapsulation} from '@angular/core';
@Component({
moduleId: module.id,
@@ -15,6 +15,8 @@ export class AccessibilityHome {}
encapsulation: ViewEncapsulation.None,
})
export class AccessibilityDemo {
@ViewChild('maincontent') mainContent: ElementRef;
navItems = [
{name: 'Home', route: '.'},
{name: 'Autocomplete', route: 'autocomplete'},
@@ -37,4 +39,9 @@ export class AccessibilityDemo {
{name: 'Select', route: 'select'},
{name: 'Toolbar', route: 'toolbar'},
];
skipNavigation() {
this.mainContent.nativeElement.scrollIntoView();
this.mainContent.nativeElement.focus();
}
}