chore(accessibility): Add aria attributes to aid screen reader flow

Author: riavalon

src/app/pages/component-category-list/component-category-list.html

@@ -1,5 +1,6 @@
 <div class="docs-component-category-list">
   <md-card
+      role="link"
       *ngFor="let category of docItems.getItemsInCategories()"
       class="docs-component-category-list-card"
       [routerLink]="['/components/category/', category.id]">

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

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

src/app/pages/component-sidenav/component-sidenav.html

@@ -1,9 +1,9 @@
 <md-sidenav-container class="docs-component-viewer-sidenav-container">
-  <md-sidenav #sidenav class="docs-component-viewer-sidenav"
+  <md-sidenav aria-label="Side navigation" role="navigation" #sidenav class="docs-component-viewer-sidenav"
               [opened]="!isScreenSmall()"
               [mode]="isScreenSmall() ? 'over' : 'side'">
-    <nav *ngFor="let category of docItems.getItemsInCategories()">
-      <h3>{{category.name}}</h3>
+    <nav [attr.aria-labelledby]="category.id + '-id'" *ngFor="let category of docItems.getItemsInCategories()">
+      <h3 tabindex="0" id="{{category.id}}-id">{{category.name}}</h3>
       <ul>
         <li *ngFor="let component of category.items">
           <a [routerLink]="['/components/component/', component.id]"
@@ -15,7 +15,7 @@ <h3>{{category.name}}</h3>
     </nav>
   </md-sidenav>
 
-  <div class="docs-component-sidenav-content">
+  <div role="main" class="docs-component-sidenav-content">
     <component-page-header (toggleSidenav)="sidenav.toggle()"></component-page-header>
     <router-outlet></router-outlet>
     <app-footer></app-footer>

src/app/pages/guide-list/guide-list.html

@@ -1,12 +1,14 @@
-<div class="docs-primary-header">
-  <h1>Guides</h1>
-</div>
-<md-list class="docs-guide-list-item">
-  <a md-list-item
-     *ngFor="let guide of guideItems.getAllItems()"
-     [routerLink]="['/guide/', guide.id]">
+<div class="guides-container" role="main">
+  <div class="docs-primary-header">
+    <h1 focusElement>Guides</h1>
+  </div>
+  <md-list class="docs-guide-list-item">
+    <a md-list-item
+      *ngFor="let guide of guideItems.getAllItems()"
+      [routerLink]="['/guide/', guide.id]">
       {{guide.name}}
-  </a>
-</md-list>
+    </a>
+  </md-list>
+</div>
 
 <app-footer></app-footer>

src/app/pages/guide-list/guide-list.scss

@@ -1,4 +1,4 @@
-:host {
+:host, .guides-container {
   display: flex;
   flex-direction: column;
   flex-grow: 1;

src/app/pages/guide-viewer/guide-viewer.html

@@ -1,5 +1,5 @@
 <div class="docs-primary-header">
-  <h1>{{guide.name}}</h1>
+  <h1 focusElement>{{guide.name}}</h1>
 </div>
 
 <doc-viewer class="docs-guide-content" [documentUrl]="guide.document"></doc-viewer>

src/app/pages/homepage/homepage.html

@@ -10,7 +10,7 @@ <h2> Material Design components for Angular apps</h2>
   </div>
 </header>
 
-<div class="docs-homepage-promo">
+<div role="main" class="docs-homepage-promo">
   <div class="docs-homepage-row">
     <div class="docs-homepage-promo-img">
       <img src="../assets/img/homepage/sprintzerotoapp.svg" alt="Sprint from Zero to App" />

src/app/shared/documentation-items/documentation-items.ts

@@ -29,7 +29,7 @@ const DOCS = [
   },
   {
     id: 'nav',
-    name: 'Navigation',
+    name: 'Navigation Components',
     summary: 'Sidenavs, toolbars, menus',
     items: [
       {id: 'menu', name: 'Menu', examples: ['menu-icons']},

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

@@ -0,0 +1,26 @@
+import {Renderer, Directive, ElementRef} from '@angular/core';
+
+
+@Directive({
+  selector: '[focusElement]'
+})
+
+export class FocusElementDirective {
+
+  constructor(
+    private _element: ElementRef,
+    private _renderer: Renderer
+  ) { }
+
+  ngAfterViewInit() {
+    // Add tabindex 0 so element is focusable by keyboard
+    this
+      ._renderer
+      .setElementAttribute(this._element.nativeElement, 'tabindex', '0');
+
+    // Focus host element after view loads
+    // so screen readers will be alerted
+    // the page has changed.
+    this._element.nativeElement.focus();
+  }
+}

src/app/shared/navbar/navbar.html

@@ -1,12 +1,12 @@
 <!-- TODO: figure out if the <nav> should go inside of a <header> element. -->
-<nav class="docs-navbar">
+<nav aria-label="Main" role="navigation" class="docs-navbar">
   <a md-button routerLink="/" aria-label="Angular Material">
     <img class="docs-angular-logo"
          src="../../../assets/img/homepage/angular-white-transparent.svg"
          alt="Angular">
     <span>Material</span>
   </a>
-  <a md-button routerLink="components">Components</a>
-  <a md-button routerLink="guides">Guides</a>
+  <a aria-label="Components" role="link" md-button routerLink="components">Components</a>
+  <a aria-label="Guides" role="link" md-button routerLink="guides">Guides</a>
 </nav>