Focus page content after navigation for a11y. (#267)

Author: josephperrott

src/app/pages/component-page-header/component-page-header.html

@@ -3,5 +3,5 @@
     <md-icon>menu</md-icon>
   </button>
 
-  <h1>{{getTitle()}} </h1>
+  <h1 focusOnNavigation>{{getTitle()}} </h1>
 </div>

src/app/pages/component-page-header/component-page-header.ts

@@ -1,6 +1,7 @@
 import {Component, EventEmitter, NgModule, Output} from '@angular/core';
 import 'rxjs/add/operator/first';
 import {ComponentPageTitle} from '../page-title/page-title';
+import {NavigationFocusModule} from '../../shared/navigation-focus/navigation-focus';
 import {MdButtonModule, MdIconModule} from '@angular/material';
 
 @Component({
@@ -9,7 +10,7 @@ import {MdButtonModule, MdIconModule} from '@angular/material';
   styleUrls: ['./component-page-header.scss']
 })
 export class ComponentPageHeader {
-  constructor(public _componentPageTitle: ComponentPageTitle) { }
+  constructor(public _componentPageTitle: ComponentPageTitle) {}
 
   @Output() toggleSidenav = new EventEmitter<void>();
 
@@ -19,7 +20,7 @@ export class ComponentPageHeader {
 }
 
 @NgModule({
-  imports: [MdButtonModule, MdIconModule],
+  imports: [MdButtonModule, MdIconModule, NavigationFocusModule],
   exports: [ComponentPageHeader],
   declarations: [ComponentPageHeader],
   providers: [ComponentPageTitle],

src/app/pages/component-viewer/component-api.html

@@ -1,3 +1,6 @@
-  <doc-viewer
-      documentUrl="/assets/documents/api/{{componentViewer.componentDocItem.id}}.html"
-      class="docs-component-view-text-content"></doc-viewer>
+<span class="cdk-visually-hidden" tabindex="-1" #intialFocusTarget>
+  API for {{componentViewer.componentDocItem.id}}
+</span>
+<doc-viewer
+  documentUrl="/assets/documents/api/{{componentViewer.componentDocItem.id}}.html"
+  class="docs-component-view-text-content"></doc-viewer>

src/app/pages/component-viewer/component-examples.html

@@ -1,3 +1,6 @@
+<span class="cdk-visually-hidden" tabindex="-1" #intialFocusTarget>
+  Examples for {{componentViewer.componentDocItem.id}}
+</span>
 <example-viewer
-    *ngFor="let example of componentViewer.componentDocItem.examples"
-    [example]="example"></example-viewer>
+  *ngFor="let example of componentViewer.componentDocItem.examples"
+  [example]="example"></example-viewer>

src/app/pages/component-viewer/component-overview.html

@@ -1,3 +1,6 @@
+<span class="cdk-visually-hidden" tabindex="-1" #intialFocusTarget>
+  Overview for {{componentViewer.componentDocItem.id}}
+</span>
 <doc-viewer
     documentUrl="/assets/documents/overview/{{componentViewer.componentDocItem.id}}.html"
     class="docs-component-view-text-content docs-component-overview"

src/app/pages/component-viewer/component-viewer.ts

@@ -1,4 +1,4 @@
-import {Component, NgModule, ViewEncapsulation} from '@angular/core';
+import {Component, OnInit, NgModule, ElementRef, ViewEncapsulation, ViewChild} from '@angular/core';
 import {ActivatedRoute, Router, RouterModule} from '@angular/router';
 import {DocumentationItems, DocItem} from '../../shared/documentation-items/documentation-items';
 import {ComponentPageTitle} from '../page-title/page-title';
@@ -38,8 +38,15 @@ export class ComponentViewer {
   styleUrls: ['./component-overview.scss'],
   encapsulation: ViewEncapsulation.None,
 })
-export class ComponentOverview {
+export class ComponentOverview implements OnInit {
+  @ViewChild('intialFocusTarget') focusTarget: ElementRef;
+
   constructor(public componentViewer: ComponentViewer) {}
+
+  ngOnInit() {
+    // 100ms timeout is used to allow the page to settle before moving focus for screen readers.
+    setTimeout(() => this.focusTarget.nativeElement.focus(), 100);
+  }
 }
 
 @Component({
@@ -62,7 +69,7 @@ export class ComponentExamples extends ComponentOverview {}
     RouterModule,
     DocViewerModule,
     CommonModule,
-    TableOfContentsModule
+    TableOfContentsModule,
   ],
   exports: [ComponentViewer],
   declarations: [ComponentViewer, ComponentOverview, ComponentApi, ComponentExamples],

src/app/shared/navigation-focus/navigation-focus.ts

@@ -0,0 +1,25 @@
+import {NgModule, Injectable, OnInit, Directive, Input, ElementRef, Renderer2} from '@angular/core';
+import {Subscription} from 'rxjs/Subscription';
+
+/** The timeout id of the previous focus change. */
+let lastTimeoutId = -1;
+
+@Directive({
+  selector: '[focusOnNavigation]',
+  host: {'tabindex': '-1'},
+})
+export class NavigationFocus implements OnInit {
+  constructor(private el: ElementRef) {}
+
+  ngOnInit() {
+    clearTimeout(lastTimeoutId);
+    // 100ms timeout is used to allow the page to settle before moving focus for screen readers.
+    lastTimeoutId = setTimeout(() => this.el.nativeElement.focus(), 100);
+  }
+}
+
+@NgModule({
+  declarations: [NavigationFocus],
+  exports: [NavigationFocus],
+})
+export class NavigationFocusModule {}

src/app/shared/theme-picker/theme-picker.html

@@ -1,4 +1,5 @@
-<button md-icon-button [md-menu-trigger-for]="themeMenu" mdTooltip="Select a theme!">
+<button md-icon-button [md-menu-trigger-for]="themeMenu" mdTooltip="Select a theme!"
+        tabindex="-1">
   <md-icon>format_color_fill</md-icon>
 </button>
 

src/tsconfig.json

@@ -10,9 +10,7 @@
     "outDir": "../dist/out-tsc",
     "sourceMap": true,
     "target": "es5",
-    "typeRoots": [
-      "../node_modules/@types"
-    ]
+    "types": ["q", "selenium-driver", "jasmine"]
   },
   "exclude": [
     "assets"