From 39c7b8124dfbdaa2db82cdcb0625b4579e3d97af Mon Sep 17 00:00:00 2001
From: tinayuangao <tinagao@google.com>
Date: Fri, 29 Sep 2017 06:41:05 +0800
Subject: [PATCH] chore: make accessibility demo page focus goes to header
 after clicking on links (#7188)

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

diff --git a/src/demo-app/a11y/a11y.html b/src/demo-app/a11y/a11y.html
index fefa22fecac..3a0f318264e 100644
--- a/src/demo-app/a11y/a11y.html
+++ b/src/demo-app/a11y/a11y.html
@@ -2,11 +2,12 @@
 
 <nav>
   <a (click)="skipNavigation()" href="javascript:void(0)">Skip navigation</a>
-  <a *ngFor="let navItem of navItems" [routerLink]="[navItem.route]">
+  <a *ngFor="let navItem of navItems" [routerLink]="[navItem.route]" (click)="skipNavigation()">
     {{navItem.name}}
   </a>
 </nav>
 
-<div #maincontent tabindex="0">
+<div #maincontent tabindex="-1">
+  <h1 #header tabindex="-1" *ngIf="!!currentComponent">{{currentComponent}} Demo</h1>
   <router-outlet></router-outlet>
 </div>
diff --git a/src/demo-app/a11y/a11y.ts b/src/demo-app/a11y/a11y.ts
index f522717c5b2..c517d188282 100644
--- a/src/demo-app/a11y/a11y.ts
+++ b/src/demo-app/a11y/a11y.ts
@@ -1,4 +1,5 @@
 import {Component, ElementRef, ViewChild, ViewEncapsulation} from '@angular/core';
+import {NavigationEnd, Router} from '@angular/router';
 
 @Component({
   moduleId: module.id,
@@ -16,7 +17,10 @@ export class AccessibilityHome {}
   preserveWhitespaces: false,
 })
 export class AccessibilityDemo {
+  currentComponent: string = '';
+
   @ViewChild('maincontent') mainContent: ElementRef;
+  @ViewChild('header') sectionHeader: ElementRef;
 
   navItems = [
     {name: 'Home', route: '.'},
@@ -44,8 +48,17 @@ export class AccessibilityDemo {
     {name: 'Tooltip', route: 'tooltip'},
   ];
 
+  constructor(private router: Router) {
+    router.events.subscribe(event => {
+      let nav = this.navItems.find(navItem => {
+        let fragments = (event as NavigationEnd).url.split('/');
+        return fragments[fragments.length - 1] === navItem.route;
+      });
+      this.currentComponent = nav ? nav.name : '';
+    });
+  }
+
   skipNavigation() {
-    this.mainContent.nativeElement.scrollIntoView();
-    this.mainContent.nativeElement.focus();
+    (this.currentComponent ? this.sectionHeader : this.mainContent).nativeElement.focus();
   }
 }