Merge pull request #37 from knittingcodemonkey/a11y_initiative

fix (Component): add accessibility features

Author: ladyleet

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>

src/app/app.component.scss

@@ -1,3 +1,4 @@
 .title {
   padding: 0 16px;
+  font-weight: 600;
 }