chore: make accessibility demo page focus goes to header after clicking on links (#7188)

Author: tinayuangao

src/demo-app/a11y/a11y.html

@@ -2,11 +2,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]">
+  <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>

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();
   }
 }