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 @@
-
+
+
{{currentComponent}} Demo
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();
}
}