feat(aio): search results accessibility items

Add visually hidden class and apply to h2 in search results
Changed h2 group headers to h3s
Add roles to main and content
Fix API material icon placement
Image alt additions where needed
Add lang attribute to html tag
Add aria-label on search input

aio/src/app/app.component.html

@@ -9,14 +9,14 @@
   <span class="fill-remaining-space"></span>
 </md-toolbar>
 
-<md-sidenav-container class="sidenav-container">
+<md-sidenav-container class="sidenav-container" role="main">
 
   <md-sidenav [ngClass]="{'collapsed': !isSideBySide }" #sidenav class="sidenav" [opened]="isOpened" [mode]="mode">
     <aio-nav-menu *ngIf="!isSideBySide" class="top-menu" [nodes]="topMenuNodes" [currentNode]="currentNode"></aio-nav-menu>
     <aio-nav-menu [nodes]="sideNavNodes" [currentNode]="currentNode" ></aio-nav-menu>
   </md-sidenav>
 
-  <section class="sidenav-content" [id]="pageId">
+  <section class="sidenav-content" [id]="pageId" role="content">
     <aio-doc-viewer [doc]="currentDocument" (docRendered)="onDocRendered()"></aio-doc-viewer>
     <aio-dt [on]="dtOn" [(doc)]="currentDocument"></aio-dt>
   </section>

aio/src/app/search/search-box/search-box.component.ts

@@ -17,6 +17,7 @@ import { LocationService } from 'app/shared/location.service';
 @Component({
   selector: 'aio-search-box',
   template: `<input #searchBox
+    aria-label="search"
     placeholder="Search"
     (keyup)="onSearch($event.target.value, $event.which)"
     (focus)="onSearch($event.target.value)"

aio/src/app/search/search-results/search-results.component.html

@@ -1,6 +1,7 @@
 <div class="search-results" *ngIf="(searchAreas | async)?.length > 0" >
+  <h2 class="visually-hidden">Search Results</h2>
   <div class="search-area" *ngFor="let area of searchAreas | async">
-    <h2>{{area.name}}</h2>
+    <h3>{{area.name}}</h3>
     <div class="search-page" *ngFor="let page of area.pages">
       <a class="search-result-item" href="{{ page.path }}" (click)="onResultSelected(page)">{{ page.title }}</a>
     </div>