From 4624406ce89a625b94e67327fe3c95d07b9a6f75 Mon Sep 17 00:00:00 2001
From: Stefanie Fluin <sjtrimble@gmail.com>
Date: Mon, 17 Apr 2017 10:57:49 -0700
Subject: [PATCH] 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/content/examples/animations/src/index.html            | 2 +-
 aio/content/marketing/index.html                          | 8 ++++----
 aio/content/marketing/presskit.html                       | 2 +-
 aio/src/app/app.component.html                            | 4 ++--
 aio/src/app/search/search-box/search-box.component.ts     | 1 +
 .../search/search-results/search-results.component.html   | 3 ++-
 aio/src/index.html                                        | 2 +-
 aio/src/styles/1-layouts/_content-layout.scss             | 3 +++
 aio/src/styles/1-layouts/_layout-global.scss              | 6 ++++++
 aio/src/styles/1-layouts/_search-results.scss             | 3 ++-
 aio/src/styles/2-modules/_api-list.scss                   | 8 ++++++++
 11 files changed, 31 insertions(+), 11 deletions(-)
diff --git a/aio/content/examples/animations/src/index.html b/aio/content/examples/animations/src/index.html
index 6c4a13adb2..74a397e7d1 100644
--- a/aio/content/examples/animations/src/index.html
+++ b/aio/content/examples/animations/src/index.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html>
+<html lang="en">
  <head>
     <meta charset="UTF-8">
     <title>Animations</title>
diff --git a/aio/content/marketing/index.html b/aio/content/marketing/index.html
index e0bb9e3f9d..93b74f5191 100755
--- a/aio/content/marketing/index.html
+++ b/aio/content/marketing/index.html
@@ -17,7 +17,7 @@
   <div class="home-rows"><!-- Group 1-->
     <div layout="row" layout-xs="column" class="home-row">
       <div class="promo-img-container promo-1">
-        <div><img src="assets/images/home/responsive-framework.svg"></div>
+        <div><img src="assets/images/home/responsive-framework.svg" alt="responsive framework"></div>
       </div>
       <div class="text-container">
         <div class="text-block promo-1-desc l-pad-top-2"><h3 class="text-headline">Develop Across
@@ -38,12 +38,12 @@
         </div>
       </div>
       <div class="promo-img-container promo-2">
-        <div><img src="assets/images/home/speed-performance.svg"></div>
+        <div><img src="assets/images/home/speed-performance.svg" alt="speed and performance"></div>
       </div>
     </div><!-- Group 3-->
     <div layout="row" layout-xs="column" class="home-row">
       <div class="promo-img-container promo-3">
-        <div><img src="assets/images/home/joyful-development.png"></div>
+        <div><img src="assets/images/home/joyful-development.png" alt="IDE example"></div>
       </div>
       <div class="text-container">
         <div class="text-block promo-3-desc"><h3 class="text-headline">Incredible Tooling</h3>
@@ -63,7 +63,7 @@
             applications.</p></div>
       </div>
       <div class="promo-img-container promo-4">
-        <div><img src="assets/images/home/loved-by-millions.png"></div>
+        <div><img src="assets/images/home/loved-by-millions.png" alt="angular on the map"></div>
       </div>
     </div>
     <div class="cta-bar"><a href="/guide/quickstart" md-button="md-button" class="button button-large button-shield mat-raised mat-primary">Get Started</a></div>
diff --git a/aio/content/marketing/presskit.html b/aio/content/marketing/presskit.html
index 8ef1ff1476..6c67b531fa 100644
--- a/aio/content/marketing/presskit.html
+++ b/aio/content/marketing/presskit.html
@@ -16,7 +16,7 @@
   <div class="presskit-row">
     <div class="presskit-inner">
       <div class="presskit-image-container">
-        <img src="assets/images/logos/angular/angular.svg">
+        <img src="assets/images/logos/angular/angular.svg" alt="Angular">
       </div>
       <div>
         <h3 class="l-space-left-3">FULL COLOR LOGO</h3>
diff --git a/aio/src/app/app.component.html b/aio/src/app/app.component.html
index 4b9daad644..632ff21be1 100644
--- a/aio/src/app/app.component.html
+++ b/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>
diff --git a/aio/src/app/search/search-box/search-box.component.ts b/aio/src/app/search/search-box/search-box.component.ts
index aeb744b71e..87f2c0a35e 100644
--- a/aio/src/app/search/search-box/search-box.component.ts
+++ b/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)"
diff --git a/aio/src/app/search/search-results/search-results.component.html b/aio/src/app/search/search-results/search-results.component.html
index 2fcfb940a3..998bb52b67 100644
--- a/aio/src/app/search/search-results/search-results.component.html
+++ b/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>
diff --git a/aio/src/index.html b/aio/src/index.html
index 42a93b3430..88246a40ad 100644
--- a/aio/src/index.html
+++ b/aio/src/index.html
@@ -40,7 +40,7 @@
   <noscript>
     <header>
       <div class="hero">
-        <img src="assets/images/logos/angular/angular.svg" />
+        <img src="assets/images/logos/angular/angular.svg" alt="Angular"/>
         <h1>One framework.<br>Mobile &amp; desktop.</h1>
         <br />
         <h3 style="color:red">
diff --git a/aio/src/styles/1-layouts/_content-layout.scss b/aio/src/styles/1-layouts/_content-layout.scss
index 7acf592691..66fed307a7 100644
--- a/aio/src/styles/1-layouts/_content-layout.scss
+++ b/aio/src/styles/1-layouts/_content-layout.scss
@@ -11,6 +11,9 @@
   aio-menu {
     display: none;
   }
+  .sidenav-content {
+    min-height: 450px;
+  }
 }
 
 .sidenav-container {
diff --git a/aio/src/styles/1-layouts/_layout-global.scss b/aio/src/styles/1-layouts/_layout-global.scss
index f60d53b7e3..faee1cfde1 100644
--- a/aio/src/styles/1-layouts/_layout-global.scss
+++ b/aio/src/styles/1-layouts/_layout-global.scss
@@ -34,4 +34,10 @@ l-relative {
 
 .center {
     text-align: center;
+}
+
+.visually-hidden {
+    position: absolute !important;
+    top: -9999px !important;
+    left: -9999px !important;
 }
\ No newline at end of file
diff --git a/aio/src/styles/1-layouts/_search-results.scss b/aio/src/styles/1-layouts/_search-results.scss
index b14db7c06e..a2cea9089c 100644
--- a/aio/src/styles/1-layouts/_search-results.scss
+++ b/aio/src/styles/1-layouts/_search-results.scss
@@ -34,8 +34,9 @@ aio-search-results {
     flex-direction: column;
     margin: 16px 16px;
     height: 100%;
-    h2 {
+    h3 {
         font-size: 16px;
+        font-weight: 400;
         margin: 10px 0px 5px;
         text-transform: uppercase;
     }
diff --git a/aio/src/styles/2-modules/_api-list.scss b/aio/src/styles/2-modules/_api-list.scss
index 6c817b3d94..f463ba9be6 100644
--- a/aio/src/styles/2-modules/_api-list.scss
+++ b/aio/src/styles/2-modules/_api-list.scss
@@ -1,3 +1,11 @@
+/* API EDIT ICON */
+#api {
+  .info-bar .material-icons {
+    top: 24px;
+    right: 48px;
+  }
+}
+
 /* API LIST STYLES */
 
 aio-api-list {
