From 6b7459d636581a610a87c6b26f1425d74bb7c1bb Mon Sep 17 00:00:00 2001
From: Jennifer Luker <jluker@deseretdigital.com>
Date: Sun, 15 Oct 2017 14:17:35 -0600
Subject: [PATCH] Adding some accessibility features: 1. Wrapped the toolbar in
 a <header /> element to allow the proper classification of the toolbar. 2.
 wrapped the <router-outlet /> element with a <main /> element instead of a
 <div /> element 3. Added a role="navigation" to the sidenav for screenreaders
 4. Added an aria-label="menu" tag to the mat-icon-button because screen
 readers couldn't identify text to read inside the element. 5. Bumped up the
 font-weight on the .title element to fulfill color contrast requirements.

There is still a color contrast problem within the side menu. The current color is #e91e63, but it should be #E4165C to fulfill color contrast requirements.
---
 src/app/app.component.html | 30 ++++++++++++++++--------------
 src/app/app.component.scss |  1 +
 2 files changed, 17 insertions(+), 14 deletions(-)

diff --git a/src/app/app.component.html b/src/app/app.component.html
index 1aea76e2..d38ff7de 100644
--- a/src/app/app.component.html
+++ b/src/app/app.component.html
@@ -1,24 +1,26 @@
 <div class="app-fullpage">
-  <mat-toolbar color="accent" class="mat-elevation-z6">
-    <button mat-icon-button (click)="sidenav.toggle()">
-    <mat-icon>
-      menu
-    </mat-icon>
-  </button>
-    <span class="title"> RxJS Docs </span>
-  </mat-toolbar>
+  <header>
+    <mat-toolbar color="accent" class="mat-elevation-z6">
+      <button mat-icon-button (click)="sidenav.toggle()" aria-label="menu">
+        <mat-icon>
+          menu
+        </mat-icon>
+      </button>
+      <span class="title"> RxJS Docs </span>
+    </mat-toolbar>
+  </header>
   <mat-sidenav-container>
-    <mat-sidenav #sidenav>
+    <mat-sidenav #sidenav role="navigation">
       <mat-nav-list (click)="sidenav.toggle()">
-        <a *ngFor="let menu of menus" mat-list-item routerLinkActive="active"
-          [routerLinkActiveOptions]="menu.options"
+        <a *ngFor="let menu of menus" mat-list-item routerLinkActive="active" 
+          [routerLinkActiveOptions]="menu.options" 
           [routerLink]="menu.link">
-         {{menu.title}}
+          {{menu.title}}
         </a>
       </mat-nav-list>
     </mat-sidenav>
-    <div class="body-margin">
+    <main class="body-margin">
       <router-outlet></router-outlet>
-    </div>
+    </main>
   </mat-sidenav-container>
 </div>
diff --git a/src/app/app.component.scss b/src/app/app.component.scss
index d9dc7e5d..23f200f1 100644
--- a/src/app/app.component.scss
+++ b/src/app/app.component.scss
@@ -1,3 +1,4 @@
 .title {
   padding: 0 16px;
+  font-weight: 600;
 }