From ed735a174a402c637aa416a8f5b5cd38caa84bcd Mon Sep 17 00:00:00 2001
From: tinayuangao <tinagao@google.com>
Date: Fri, 1 Sep 2017 08:08:24 -0700
Subject: [PATCH] chore: add skip navigation link for a11y demo (#6423)

---
 src/demo-app/a11y/a11y.html | 5 ++++-
 src/demo-app/a11y/a11y.ts   | 9 ++++++++-
 2 files changed, 12 insertions(+), 2 deletions(-)

diff --git a/src/demo-app/a11y/a11y.html b/src/demo-app/a11y/a11y.html
index 065ddcc8381..fefa22fecac 100644
--- a/src/demo-app/a11y/a11y.html
+++ b/src/demo-app/a11y/a11y.html
@@ -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>
diff --git a/src/demo-app/a11y/a11y.ts b/src/demo-app/a11y/a11y.ts
index 22c8916bebd..b70ea21504f 100644
--- a/src/demo-app/a11y/a11y.ts
+++ b/src/demo-app/a11y/a11y.ts
@@ -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();
+  }
 }